ตั้งค่าไลบรารีการติดตามกลุ่ม JavaScript

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

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

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

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

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

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

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

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

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

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

หากต้องการสร้างโทเค็นจากเซิร์ฟเวอร์เมื่อใช้การติดตามฟลีต โปรดดูข้อมูลต่อไปนี้

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

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

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

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

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

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

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

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

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

    • สตริง token

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

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

    • https://SERVER_URL/token/fleet_reader

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

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

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

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