設定 JavaScript Consumer SDK

選取平台: Android 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

在 Google Cloud 控制台中啟用 Maps JavaScript API。詳情請參閱 Google Cloud 說明文件中的「啟用 API」。這樣會啟用 Consumer SDK for JavaScript。

設定授權

對於從低信任環境發出的 API 方法呼叫,Fleet Engine 必須使用適當服務帳戶簽署的 JSON Web Token (JWT)。信任度低的環境包括智慧型手機和瀏覽器。JWT 源自您的伺服器,而該環境為受信任的環境。JWT 會經過簽署和加密並傳遞至用戶端,以便進行後續的伺服器互動,直到過期或失效為止。

您的後端應使用標準應用程式預設憑證機制,對 Fleet Engine 進行驗證和授權。請務必使用適當服務帳戶簽署的 JWT。如需服務帳戶角色清單,請參閱「Fleet Engine 基礎知識」中的Fleet Engine 服務帳戶角色。

相對的,您的後端應使用標準應用程式預設憑證機制對 Fleet Engine 進行驗證與授權。

授權的運作方式為何?

使用 Fleet Engine 資料進行授權時,必須同時在伺服器端和用戶端實作。

伺服器端授權

在網頁式應用程式中設定驗證和授權之前,後端伺服器必須能向網頁應用程式發出 JSON Web Token,以便存取 Fleet Engine。網頁應用程式會以要求來傳送這些 JWT,讓 Fleet Engine 將要求視為已驗證並授權存取要求中的資料。如需伺服器端 JWT 實作說明,請參閱「Fleet Engine 重點」一節中的「發出 JSON Web Token」。

具體來說,關於分享行程進度的 JavaScript Consumer SDK 注意事項如下:

用戶端授權

使用 JavaScript Consumer SDK 時,系統會使用授權權杖擷取工具,向伺服器要求權杖。系統會在符合下列任一條件時執行此動作:

  • 沒有有效的權杖,例如 SDK 在載入新網頁時未呼叫擷取器,或是擷取器未傳回權杖。

  • 權杖已過期。

  • 權杖即將在 1 分鐘內到期。

否則,JavaScript Consumer SDK 會使用先前核發的有效權杖,且不會呼叫擷取程式。

建立授權權杖擷取器

按照下列指南建立授權權杖擷取工具:

  • 擷取器必須傳回包含兩個欄位的資料結構 (納入 Promise 欄位),如下所示:

    • 字串 token

    • 數字 expiresInSeconds。權杖會在擷取後的這段時間到期。驗證權杖擷取工具必須在擷取至程式庫的時間 (如範例所示) 傳遞到期時間 (以秒為單位)。

  • 擷取器應呼叫伺服器上的網址以擷取憑證。這個網址 (SERVER_TOKEN_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 追蹤行程