ตั้งค่า JavaScript Consumer SDK

ด้วย JavaScript Consumer SDK แอปผู้บริโภคของคุณจะแสดงตำแหน่งของ ยานพาหนะและสถานที่อื่นๆ ที่สนใจซึ่งติดตามใน Fleet Engine บนเว็บ แผนที่ ซึ่งจะช่วยให้ผู้ใช้ที่เป็นผู้บริโภคเห็นความคืบหน้าในการจัดส่งได้ คู่มือนี้ถือว่าคุณได้ตั้งค่า Fleet Engine กับโปรเจ็กต์ Google Cloud และคีย์ API ที่เชื่อมโยงแล้ว ดูรายละเอียดได้ที่ Fleet Engine

คุณตั้งค่า JavaScript Consumer SDK ได้โดยทำตามขั้นตอนต่อไปนี้

1. เปิดใช้ Maps JavaScript API
2. ตั้งค่าการให้สิทธิ์

เปิดใช้ Maps JavaScript API

เปิดใช้ Maps JavaScript API ในโปรเจ็กต์ Google Cloud Console ที่คุณใช้ สำหรับอินสแตนซ์ Fleet Engine โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อเปิดใช้ API ใน เอกสาร Maps JavaScript API

ตั้งค่าการให้สิทธิ์

สําหรับการเรียกใช้เมธอด API จากสภาพแวดล้อมที่มีระดับความน่าเชื่อถือต่ำ Fleet Engine จะต้องใช้โทเค็นเว็บ JSON (JWT) ที่ลงนามโดยบัญชีบริการที่เหมาะสม สภาพแวดล้อมที่มีความน่าเชื่อถือต่ำรวมถึงสมาร์ทโฟนและเบราว์เซอร์ต่างๆ JWT จะทำงานในเซิร์ฟเวอร์ของคุณ ซึ่งเป็นสภาพแวดล้อมที่เชื่อถือได้อย่างสมบูรณ์ JWT ลงชื่อ เข้ารหัส และส่งต่อไปยังไคลเอ็นต์สำหรับเซิร์ฟเวอร์ที่ตามมา การโต้ตอบต่างๆ จนกว่าหมดอายุหรือใช้ไม่ได้

แบ็กเอนด์ควรตรวจสอบสิทธิ์และอนุญาตกับ Fleet Engine โดยใช้กลไกข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชันมาตรฐาน สร้าง อย่าลืมใช้ JWT ที่ลงชื่อโดยบัญชีบริการที่เหมาะสม สำหรับ รายการของบทบาทบัญชีบริการ โปรดดูบทบาทบัญชีบริการ Fleet Engine ในข้อมูลพื้นฐานเกี่ยวกับ Fleet Engine

ในทางกลับกัน แบ็กเอนด์ของคุณควรตรวจสอบสิทธิ์และให้สิทธิ์กับ Fleet Engine โดยใช้ Application Default Credentials แบบมาตรฐาน และกลไกต่างๆ

การให้สิทธิ์ทำงานอย่างไร

การให้สิทธิ์ด้วยข้อมูล Fleet Engine เกี่ยวข้องกับการติดตั้งใช้งานทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

การให้สิทธิ์ฝั่งเซิร์ฟเวอร์

ก่อนที่คุณจะตั้งค่าการตรวจสอบสิทธิ์และการให้สิทธิ์ใน เซิร์ฟเวอร์ส่วนหลังของคุณ ต้องสามารถออกโทเค็นเว็บ JSON ไปยัง แอปพลิเคชันบนเว็บสำหรับเข้าถึง Fleet Engine แอปพลิเคชันบนเว็บของคุณ ส่ง JWT เหล่านี้พร้อมกับคำขอเพื่อให้ Fleet Engine จดจำคำขอในรูปแบบ ตรวจสอบสิทธิ์และได้รับอนุญาตให้เข้าถึงข้อมูลใน อีกครั้ง ดูวิธีการใช้งาน JWT ฝั่งเซิร์ฟเวอร์ได้ที่เว็บ JSON เกี่ยวกับปัญหา โทเค็นในส่วน Fleet Engine Essentials

• หลักเกณฑ์ทั่วไปสำหรับการออกโทเค็นเว็บ JSON
• หลักเกณฑ์ของ JWT สำหรับงานที่กำหนดเวลาไว้
• ตัวอย่างโทเค็นสำหรับแอปผู้บริโภค

การให้สิทธิ์ฝั่งไคลเอ็นต์

เมื่อคุณใช้ JavaScript Consumer SDK ระบบจะขอโทเค็นจากเซิร์ฟเวอร์โดยใช้เครื่องมือดึงข้อมูลโทเค็นการให้สิทธิ์ โดยจะดำเนินการเช่นนี้เมื่อข้อใดข้อหนึ่งต่อไปนี้เป็นจริง

• ไม่มีโทเค็นที่ถูกต้อง เช่น เมื่อ SDK ไม่ได้เรียกใช้เครื่องมือรับข้อมูลในการโหลดหน้าเว็บใหม่ หรือเมื่อเครื่องมือรับข้อมูลไม่ได้แสดงผลพร้อมโทเค็น

• โทเค็นหมดอายุแล้ว

• โทเค็นจะหมดอายุภายใน 1 นาที

มิฉะนั้น JavaScript Consumer SDK จะใช้โทเค็นที่ออกให้ก่อนหน้านี้และถูกต้อง และไม่ ให้เรียกใช้ตัวดึงข้อมูล

สร้างตัวดึงข้อมูลโทเค็นการให้สิทธิ์

สร้างเครื่องมือดึงข้อมูลโทเค็นการให้สิทธิ์โดยใช้หลักเกณฑ์ต่อไปนี้

• เครื่องมือรับข้อมูลต้องแสดงโครงสร้างข้อมูลที่มี 2 ฟิลด์ โดยรวมอยู่ใน Promise ดังนี้

  • สตริง token

  • หมายเลข expiresInSeconds โทเค็นจะหมดอายุในระยะเวลานี้หลังจากการดึงข้อมูล เครื่องมือดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์ต้องส่งเวลาหมดอายุเป็นวินาทีนับจากเวลาที่ดึงข้อมูลไปยังคลังตามที่แสดงในตัวอย่าง

• ตัวดึงข้อมูลควรเรียก URL บนเซิร์ฟเวอร์ของคุณเพื่อเรียกโทเค็น ช่วงเวลานี้ URL SERVER_TOKEN_URL ขึ้นอยู่กับการติดตั้งใช้งานแบ็กเอนด์ URL ตัวอย่างต่อไปนี้มีไว้สำหรับแบ็กเอนด์แอปตัวอย่างบน GitHub

  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID

ตัวอย่าง - สร้างเครื่องมือดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

ตัวอย่างต่อไปนี้แสดงวิธีสร้างตัวดึงข้อมูลโทเค็นการให้สิทธิ์

async function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.ExpiresInSeconds,
  };
}

ขั้นตอนถัดไป

• ติดตามการจัดส่ง