ตั้งค่า 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 ในเซิร์ฟเวอร์เพื่อดึงข้อมูลโทเค็น ช่วงเวลานี้ 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,
  };
}

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

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