透過 JavaScript Consumer SDK，您的消費者應用程式可以在網路地圖上顯示車輛位置和 Fleet Engine 追蹤的其他感興趣地點。這樣一來，消費者使用者就能查看貨物運送進度。本指南假設您已設定 Fleet Engine 及其相關聯的 Google Cloud 專案和 API 金鑰。詳情請參閱「Fleet Engine」。
您可以按照下列步驟設定 JavaScript Consumer SDK：
啟用 Maps JavaScript API
在您用於 Fleet Engine 例項的 Google Cloud 控制台專案中啟用 Maps JavaScript API。詳情請參閱 Maps JavaScript API 說明文件中的「啟用 API」。
設定授權
Fleet Engine 要求使用 JSON Web Token (JWT) 來呼叫來自信任程度較低的環境 (智慧型手機和瀏覽器) 的 API 方法。
JWT 會在您的伺服器上產生，並經過簽署和加密，然後傳遞至用戶端，以便在後續的伺服器互動中使用，直到過期或不再有效為止。
重要詳細資料
- 使用應用程式預設憑證驗證並授權 Fleet Engine。
- 使用適當的服務帳戶簽署 JWT。請參閱Fleet Engine 基本資訊中的Fleet Engine 服務帳戶角色。
delivery_consumer 角色驗證使用者，以便只傳回消費者專屬資訊。如此一來，Fleet Engine 就能篩選並遮蓋回應中的所有其他資訊。舉例來說，在無法使用服務的任務期間，系統不會與使用者分享任何位置資訊。如要瞭解排程工作任務的服務帳戶角色，請參閱服務帳戶角色。授權的運作方式為何？
使用 Fleet Engine 資料進行授權時，必須同時在伺服器端和用戶端實作。
伺服器端授權
在您在以網頁為基礎的應用程式中設定驗證和授權之前，後端伺服器必須能夠向以網頁為基礎的應用程式核發 JSON Web Token，以便存取 Fleet Engine。您的網路應用程式會隨要求傳送這些 JWT，讓 Fleet Engine 將要求視為已驗證，並授權存取要求中的資料。如需伺服器端 JWT 實作說明，請參閱「Fleet Engine 重點」一節中的「發出 JSON Web Token」。
具體來說，請留意以下 JavaScript Consumer SDK 的追蹤貨件功能：- 發出 JSON Web Token 的一般規範
- 排程工作 JWT 指南
- 消費者應用程式範例權杖
用戶端授權
使用 JavaScript Consumer SDK 時，SDK 會使用授權權杖擷取器向伺服器要求權杖。在下列任一情況下，系統就會執行這項操作：
沒有有效的權杖，例如 SDK 在載入新網頁時未呼叫擷取器，或是擷取器未傳回權杖。
權杖已過期。
權杖即將在 1 分鐘內到期。
否則，JavaScript Consumer SDK 會使用先前核發的有效權杖，且不會呼叫擷取器。
建立授權權杖擷取工具
請按照下列規範建立授權權杖擷取器：
擷取器必須傳回具有兩個欄位的資料結構，並以
Promise包裝，如下所示：字串
token。數字
expiresInSeconds。憑證會在擷取後的這段時間內到期。驗證權杖擷取器必須從擷取到程式庫的時間開始，以秒為單位傳遞到期時間，如範例所示。
擷取器應呼叫伺服器上的網址，以便擷取權杖。這個網址 (
SERVER_TOKEN_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,
};
}