ตั้งค่าไลบรารีการติดตามกลุ่ม JavaScript
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ก่อนใช้ไลบรารีการติดตามกลุ่มยานพาหนะ JavaScript โปรดตรวจสอบว่าคุณคุ้นเคยและได้ตั้งค่า Fleet Engine แล้ว โปรดดูรายละเอียดที่หัวข้อ
Fleet Engine
เอกสารนี้แสดงวิธีเปิดใช้การให้สิทธิ์ระหว่าง
แอปหน้าเว็บกับ Fleet Engine เมื่อตั้งค่าคำขอไปยัง Fleet Engine โดยใช้โทเค็นการให้สิทธิ์ที่ถูกต้องแล้ว คุณก็พร้อมที่จะ
ติดตามยานพาหนะบนแผนที่
ตั้งค่าการให้สิทธิ์
Fleet Engine กำหนดให้ใช้ JSON Web Token (JWT) สำหรับการเรียกเมธอด API
จากสภาพแวดล้อมที่มีความน่าเชื่อถือต่ำ ได้แก่ สมาร์ทโฟนและเบราว์เซอร์
JWT มาจากเซิร์ฟเวอร์ของคุณ มีการลงชื่อ เข้ารหัส และส่งไปยังไคลเอ็นต์
สำหรับการโต้ตอบกับเซิร์ฟเวอร์ในภายหลังจนกว่าจะหมดอายุหรือไม่ถูกต้องอีกต่อไป
รายละเอียดสำคัญ
การให้สิทธิ์ทำงานอย่างไร
การให้สิทธิ์ด้วยข้อมูล Fleet Engine เกี่ยวข้องกับการติดตั้งใช้งานทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์
การให้สิทธิ์ฝั่งเซิร์ฟเวอร์
ก่อนที่จะตั้งค่าการตรวจสอบสิทธิ์และการให้สิทธิ์ในแอปพลิเคชันการติดตามกลุ่มรถ
ของคุณ เซิร์ฟเวอร์แบ็กเอนด์ต้องออกโทเค็นเว็บ JSON ให้กับแอปพลิเคชันการติดตามกลุ่มรถ
ของคุณเพื่อเข้าถึง Fleet Engine ได้ แอปพลิเคชันติดตามยานพาหนะ
จะส่ง JWT เหล่านี้ไปพร้อมกับคำขอเพื่อให้ Fleet Engine รู้จักคำขอในฐานะ
ที่ได้รับการตรวจสอบสิทธิ์และได้รับอนุญาตให้เข้าถึงข้อมูลใน
คำขอ ดูวิธีการติดตั้งใช้งาน JWT ฝั่งเซิร์ฟเวอร์ได้ที่ออกโทเค็นเว็บ JSON ในส่วนข้อควรทราบเกี่ยวกับ Fleet Engine
หากต้องการสร้างโทเค็นจากเซิร์ฟเวอร์เมื่อติดตั้งใช้งานการติดตามกลุ่มยานพาหนะ โปรดดูข้อมูลต่อไปนี้
การให้สิทธิ์ฝั่งไคลเอ็นต์
เมื่อใช้ไลบรารีการติดตามกลุ่มยานพาหนะ JavaScript ระบบจะขอโทเค็นจากเซิร์ฟเวอร์โดยใช้
เครื่องมือดึงข้อมูลโทเค็นการให้สิทธิ์ โดยจะดำเนินการเมื่อมีสิ่งต่อไปนี้
มิฉะนั้น ไลบรารีการติดตามกองยานพาหนะ JavaScript จะใช้โทเค็นที่ออกให้ก่อนหน้านี้ซึ่งยังใช้งานได้ และจะไม่เรียกใช้ Fetcher
สร้างตัวดึงข้อมูลโทเค็นการให้สิทธิ์
สร้างตัวดึงข้อมูลโทเค็นการให้สิทธิ์โดยใช้หลักเกณฑ์ต่อไปนี้
ตัวดึงข้อมูลต้องส่งคืนโครงสร้างข้อมูลที่มี 2 ฟิลด์ ซึ่งอยู่ใน
Promise
ดังนี้
โปรแกรมดึงข้อมูลควรเรียก URL ในเซิร์ฟเวอร์เพื่อดึงโทเค็น URL นี้
--SERVER_TOKEN_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,
};
}
ขั้นตอนถัดไป
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-27 UTC"],[[["\u003cp\u003eBefore using the JavaScript Fleet tracking library, ensure you have Fleet Engine set up and are familiar with it.\u003c/p\u003e\n"],["\u003cp\u003eFleet Engine requires JSON Web Tokens (JWTs) for API calls from low-trust environments like web browsers.\u003c/p\u003e\n"],["\u003cp\u003eYour backend server should be configured to issue JWTs to your Fleet tracking application for authentication and authorization with Fleet Engine.\u003c/p\u003e\n"],["\u003cp\u003eThe JavaScript Fleet tracking library utilizes an authorization token fetcher to request and manage JWTs, ensuring secure communication with Fleet Engine.\u003c/p\u003e\n"],["\u003cp\u003eAfter setting up authorization, you can proceed with tracking vehicles and viewing your fleet in real-time.\u003c/p\u003e\n"]]],["Fleet Engine authorization requires JSON Web Tokens (JWTs) for API calls from low-trust environments. Your backend server issues signed, encrypted JWTs to the client. Use Application Default Credentials and service accounts to authenticate. The JavaScript Fleet tracking library uses an authorization token fetcher to get a token from your server. The fetcher must return a token and its expiration time. The library requests a new token if no valid token exists, if it has expired, or if it is near expiring.\n"],null,["Before using the JavaScript fleet tracking library, make sure you are\nfamiliar with and have set up Fleet Engine. For details, see\n[Fleet Engine](/maps/documentation/mobility/fleet-engine).\n\nThis document shows how to enable authorization between the\nweb page app and Fleet Engine. Once your requests to Fleet Engine have\nbeen set up with the correct authorization tokens, you'll be ready to\ntrack a vehicle on a map.\n\nSet up authorization\n\nFleet Engine requires the use of **JSON Web Tokens** (JWTs) for API method calls\nfrom **low-trust environments**: smartphones and browsers.\n\nA JWT originates on your server, is signed, encrypted, and passed to the client\nfor subsequent server interactions until it expires or is no longer valid.\n\n**Key details**\n\n- Use [Application Default Credentials](https://google.aip.dev/auth/4110) to authenticate and authorize against Fleet Engine.\n- Use an appropriate service account to sign JWTs. See [Fleet Engine serviceaccount](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/service-accounts#fleet_engine_service_account_roles) roles in **Fleet Engine Basics**.\n\nHow does authorization work?\n\nAuthorization with Fleet Engine data involves both server-side and client-side\nimplementation.\n\nServer-side authorization\n\nBefore you set up authentication and authorization in your Fleet tracking\napplication, your backend server must be able to issue JSON Web Tokens to your\nFleet tracking application for access to Fleet Engine. Your Fleet tracking application\nsends these JWTs with its requests so Fleet Engine recognizes the requests as\nauthenticated and authorized to access the data in the\nrequest. For instructions on server-side JWT implementation, see [Issue JSON Web\nTokens](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt) under **Fleet Engine Essentials**.\nTo generate tokens from your server when implementing Fleet tracking, see the following:\n\n\u003cbr /\u003e\n\n- [General guidelines](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#general_guidelines) for issuing JSON Web Tokens, including sections for both on-demand trips and scheduled tasks\n- On-demand trips: [Example token for a backend server operation](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#example_token_for_a_backend_server_operation)\n- Scheduled tasks: [Example token to track all tasks and vehicles in the\n fleet](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#example_token_to_track_all_tasks_and_vehicles)\n\nClient-side authorization\n\nWhen you use the JavaScript Fleet tracking library, it requests a token from the server using an\nauthorization token fetcher. It does this when any of the following is true:\n\n- No valid token exists, such as when the SDK hasn't called the fetcher on a\n fresh page load, or when the fetcher hasn't returned with a token.\n\n- The token has expired.\n\n- The token is within one minute of expiring.\n\nOtherwise, the JavaScript Fleet tracking library uses the previously-issued, valid token and does not\ncall the fetcher.\n\nCreate an authorization token fetcher\n\nCreate your authorization token fetcher using these guidelines:\n\n- **The fetcher must return a data structure with two fields** , wrapped in a\n `Promise` as follows:\n\n - A string `token`.\n\n - A number `expiresInSeconds`. A token expires in this amount of time\n after fetching. The authentication token fetcher must pass the expiry\n time in seconds, from the time of fetching to the library as shown in\n the example.\n\n- **The fetcher should call a URL on your server** to retrieve a token. This\n URL--the `SERVER_TOKEN_URL`--depends on your backend implementation. The\n following example URL is for the [sample app backend on GitHub](https://github.com/googlemaps/last-mile-fleet-solution-samples/tree/main/backend):\n\n - `https://SERVER_URL/token/fleet_reader`\n\nExample - Create an authorization token fetcher\n\nThe following examples show how to create an authorization token fetcher: \n\nJavaScript \n\n async function authTokenFetcher(options) {\n // options is a record containing two keys called\n // serviceType and context. The developer should\n // generate the correct SERVER_TOKEN_URL and request\n // based on the values of these fields.\n const response = await fetch(SERVER_TOKEN_URL);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n const data = await response.json();\n return {\n token: data.Token,\n expiresInSeconds: data.ExpiresInSeconds\n };\n }\n\nTypeScript \n\n function authTokenFetcher(options: {\n serviceType: google.maps.journeySharing.FleetEngineServiceType,\n context: google.maps.journeySharing.AuthTokenContext,\n }): Promise\u003cgoogle.maps.journeySharing.AuthToken\u003e {\n // The developer should generate the correct\n // SERVER_TOKEN_URL based on options.\n const response = await fetch(SERVER_TOKEN_URL);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n const data = await response.json();\n return {\n token: data.token,\n expiresInSeconds: data.ExpiresInSeconds,\n };\n }\n\nWhat's next\n\n- [Track a vehicle](/maps/documentation/mobility/operations/fleet-tracking/follow)\n- [View a fleet](/maps/documentation/mobility/operations/fleet-tracking/view-fleet)"]]