設定 JavaScript Consumer SDK

透過 JavaScript Consumer SDK,消費者應用程式可顯示 以網路為基礎的 Fleet Engine 追蹤車輛和其他感興趣的地點 。方便消費者查看出貨進度。 本指南假設您已設定 Fleet Engine 與 Google Cloud 專案和 API 金鑰詳情請參閱 Fleet Engine

請按照下列步驟設定 JavaScript Consumer SDK:

  1. 啟用 Maps JavaScript API
  2. 設定授權

啟用 Maps JavaScript API

在您使用的 Google Cloud 控制台專案中啟用 Maps JavaScript API 最適合您的 Fleet Engine 執行個體使用詳情請參閱「啟用 API」 Maps JavaScript API 說明文件。

設定授權

Fleet Engine 必須使用 適用於來自 low-trust 的 API 方法呼叫的適當服務帳戶 環境。低信任的環境包括智慧型手機和瀏覽器。JWT 起源於您的伺服器,這也是值得信賴的環境JWT 簽署、加密並傳遞至用戶端,以供後續伺服器使用 互動,直到過期或不再有效。

您的後端應使用 標準的應用程式預設憑證機制。廠牌 請務必使用適當服務帳戶簽署的 JWT。換 服務帳戶角色清單,請參閱 Fleet Engine 服務帳戶角色 詳情請參閱 Fleet Engine 基本概念一文。

消費者應用程式應利用 Google Cloud 專案中的 delivery_consumer 角色 (僅限傳回) 消費者專屬資訊這樣一來,Fleet Engine 就會篩選並遮蓋所有 回應中的其他資訊舉例來說,在無法使用的任務期間 未與使用者分享任何位置資訊。請參閱服務帳戶 角色

授權程序如何運作?

使用 Fleet Engine 資料進行授權時,涉及伺服器端和用戶端 。

伺服器端授權

在網路應用程式中設定授權之前,您的後端 伺服器必須能夠提供 JSON Web Token因此 Fleet Engine 將來自您應用程式的要求視為已取得授權,能夠存取應用程式 要求中的資料如需伺服器端 JWT 實作的操作說明,請參閱 在「Fleet Engine Essentials」下方發出 JSON Web Token

具體而言,請留意下列 JavaScript Consumer SDK 應用範圍 運送追蹤資訊:

用戶端授權

當您使用 JavaScript Consumer SDK 時,系統會使用 授權權杖擷取工具系統會在符合下列任一條件時執行此動作:

  • 沒有有效的憑證,例如 SDK 未在 載入新的網頁,或是擷取程式未傳回權杖時。

  • 權杖已過期。

  • 憑證會在一分鐘內到期。

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

後續步驟