ตั้งค่า 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 สำหรับรายละเอียดเพิ่มเติม โปรดดูเปิดใช้ API ในเอกสารประกอบของ Google Cloud วิธีนี้ช่วยให้ SDK ของผู้บริโภคสำหรับ JavaScript

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

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

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

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

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

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

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

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

โดยเฉพาะอย่างยิ่ง โปรดทราบว่า JavaScript Consumer SDK สำหรับ การแชร์เส้นทาง:

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

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

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

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

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

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

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

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

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

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

  • สตริง token

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

• ตัวดึงข้อมูลควรเรียก URL บนเซิร์ฟเวอร์ของคุณเพื่อเรียกโทเค็น SERVER_TOKEN_URL นี้ซึ่งเป็น 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