ตั้งค่า 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 Web โทเค็นในส่วนข้อมูลเบื้องต้นเกี่ยวกับเครื่องยนต์ของ Fleet

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

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

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

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

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

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

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

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

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

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

  • สตริง token

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

• เครื่องมือรับข้อมูลควรเรียก URL ในเซิร์ฟเวอร์เพื่อดึงข้อมูลโทเค็น SERVER_TOKEN_URL นี้ซึ่งเป็น 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,
  };
}

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

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