ตั้งค่า JavaScript Consumer SDK

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

เมื่อใช้ 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 สำหรับรายละเอียดเพิ่มเติม โปรดดูเปิดใช้ API ในเอกสารประกอบของ Google Cloud ซึ่งจะเป็นการเปิดใช้ Consumer SDK สําหรับ JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • สตริง token

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

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

    • https://SERVER_URL/token/consumer/TRIPID

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

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

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

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

ติดตามการเดินทางใน JavaScript