ตั้งค่า 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 Web Token (JWT) ที่ลงนามโดยบัญชีบริการที่เหมาะสม สภาพแวดล้อมที่มีระดับความน่าเชื่อถือต่ำ ได้แก่ สมาร์ทโฟนและเบราว์เซอร์ JWT สร้างขึ้นจากเซิร์ฟเวอร์ของคุณ ซึ่งเป็นสภาพแวดล้อมที่เชื่อถือได้ทั้งหมด JWT ได้รับการรับรอง เข้ารหัส และส่งไปยังไคลเอ็นต์สำหรับการโต้ตอบกับเซิร์ฟเวอร์ในภายหลังจนกว่าจะหมดอายุหรือไม่ถูกต้องอีกต่อไป

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

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

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

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

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

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

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

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

เมื่อคุณใช้ JavaScript Consumer 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,
  };
}

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

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