ตั้งค่า JavaScript Consumer SDK

เมื่อใช้ JavaScript Consumer SDK แอปผู้บริโภคจะแสดงตำแหน่งของยานพาหนะและสถานที่ที่สนใจอื่นๆ ที่ติดตามใน Fleet Engine บนแผนที่บนเว็บได้ ซึ่งจะช่วยให้ผู้ใช้ที่เป็นผู้บริโภคเห็นความคืบหน้าของการจัดส่ง คู่มือนี้ถือว่าคุณได้ตั้งค่า Fleet Engine ด้วยโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google และคีย์ API ที่เกี่ยวข้องแล้ว ดูรายละเอียดได้ที่ Fleet Engine

คุณตั้งค่า Consumer SDK ของ JavaScript โดยทำตามขั้นตอนต่อไปนี้

1. เปิดใช้ Maps JavaScript API
2. ตั้งค่าการให้สิทธิ์

เปิดใช้ Maps JavaScript API

เปิดใช้ Maps JavaScript API ในโปรเจ็กต์คอนโซล Google Cloud ที่คุณใช้สำหรับอินสแตนซ์ Fleet Engine ดูรายละเอียดเพิ่มเติมได้ที่เปิดใช้ API ในเอกสารประกอบของ Maps JavaScript API

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

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

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

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

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

แอปผู้บริโภคควรตรวจสอบสิทธิ์ผู้ใช้ปลายทางด้วยบทบาท delivery_consumer จากโปรเจ็กต์ที่อยู่ในระบบคลาวด์ Google Cloud เพื่อแสดงเฉพาะข้อมูลที่เจาะจงสำหรับผู้บริโภค ด้วยวิธีนี้ Fleet Engine จะกรองและปกปิดข้อมูลอื่นๆ ทั้งหมดในการตอบกลับ เช่น ในระหว่างงานที่ไม่พร้อมให้บริการ ระบบจะไม่แชร์ข้อมูลตำแหน่งกับผู้ใช้ปลายทาง ดูบทบาทของบัญชีบริการสำหรับงานที่กำหนดเวลาไว้

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

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

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

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

โดยเฉพาะอย่างยิ่ง โปรดคำนึงถึงสิ่งต่อไปนี้สำหรับ Consumer SDK ของ JavaScript สำหรับการติดตามการจัดส่ง

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

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

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

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

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

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

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

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

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

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

  • สตริง token

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

• เครื่องมือดึงข้อมูลควรเรียกใช้ URL บนเซิร์ฟเวอร์ของคุณเพื่อดึงข้อมูลโทเค็น URL นี้ (SERVER_TOKEN_URL) จะขึ้นอยู่กับการติดตั้งใช้งานแบ็กเอนด์ของคุณ ตัวอย่าง URL ต่อไปนี้ใช้สำหรับแบ็กเอนด์ของแอปตัวอย่างใน GitHub

  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID

ตัวอย่าง - สร้างเครื่องมือดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

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

JavaScript

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
  };
}

TypeScript

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,
  };
}

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

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