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

• หลักเกณฑ์ทั่วไปสำหรับการออกโทเค็นเว็บ 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,
  };
}

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

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