ตั้งค่า 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

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

Fleet Engine กำหนดให้ใช้ JSON Web Token (JWT) สำหรับการเรียกเมธอด API จากสภาพแวดล้อมที่มีความน่าเชื่อถือต่ำ ได้แก่ สมาร์ทโฟนและเบราว์เซอร์

JWT มาจากเซิร์ฟเวอร์ของคุณ มีการลงชื่อ เข้ารหัส และส่งไปยังไคลเอ็นต์ สำหรับการโต้ตอบกับเซิร์ฟเวอร์ในภายหลังจนกว่าจะหมดอายุหรือไม่ถูกต้องอีกต่อไป

รายละเอียดสำคัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ตัวดึงข้อมูลต้องส่งคืนโครงสร้างข้อมูลที่มี 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,
  };
}

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

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