ตั้งค่า JavaScript Consumer SDK

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

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

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

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

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

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

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

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

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

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

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

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

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

• ตัวดึงข้อมูลต้องส่งคืนโครงสร้างข้อมูลที่มี 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,
  };
}

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

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