設定 JavaScript Consumer SDK

選取平台: Android iOS JavaScript

透過 JavaScript Consumer SDK,消費者應用程式可顯示 以網路為基礎的 Fleet Engine 追蹤車輛和其他感興趣的地點 。這樣一來,消費者就能查看駕駛員的行程進度。本指南假設您已設定 Fleet Engine 及其相關聯的 Google Cloud 專案和 API 金鑰。詳情請參閱「車隊引擎」。

您可以按照下列步驟設定 JavaScript Consumer SDK:

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

啟用 Maps JavaScript API

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

設定授權

對於從低信任環境發出的 API 方法呼叫,Fleet Engine 會規定 使用由適當服務帳戶簽署的 JSON Web Token (JWT)。 低信任的環境包括智慧型手機和瀏覽器。JWT 起源於您的伺服器,這也是值得信賴的環境系統會為 JWT 簽署、加密,並將其傳遞至用戶端,以便後續的伺服器互動,直到 JWT 到期或不再有效為止。

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

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

授權程序如何運作?

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

伺服器端授權

在網頁式 您的後端伺服器必須能向 存取 Fleet Engine 的網頁式應用程式您的網路應用程式會隨要求傳送這些 JWT,讓 Fleet Engine 將要求視為已驗證,並授權存取要求中的資料。如需伺服器端 JWT 實作的操作說明,請參閱核發 JSON Web Fleet Engine Essentials 底下的權杖

具體而言,請留意下列適用於 分享行程進度:

用戶端授權

使用 JavaScript Consumer SDK 時,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 追蹤行程