此页面由 Cloud Translation API 翻译。

设置 JavaScript Consumer SDK

借助 JavaScript 消费者 SDK，您的消费者应用可以在基于 Web 的地图上显示车辆位置和 Fleet Engine 中跟踪的其他感兴趣的地点。这样，您的消费者用户就可以了解其物流进度。本指南假定您已使用关联的 Google Cloud 项目和 API 密钥设置了 Fleet Engine。如需了解详情，请参阅 Fleet Engine。

您可以按照以下步骤设置 JavaScript 使用方 SDK：

启用 Maps JavaScript API。
设置授权。

启用 Maps JavaScript API

在您用于 Fleet Engine 实例的 Google Cloud 控制台项目中启用 Maps JavaScript API。如需了解详情，请参阅 Maps JavaScript API 文档中的启用 API。

设置授权

对于从低信任环境进行的 API 方法调用，Fleet Engine 需要使用由相应服务账号签名的 JSON Web 令牌 (JWT)。低信任的环境包括智能手机和浏览器。JWT 来自您的服务器，这是一个完全可信的环境。系统会对 JWT 进行签名和加密，然后将其传递给客户端以进行后续服务器互动，直到 JWT 过期或失效。

您的后端应使用标准的应用默认凭据机制针对 Fleet Engine 进行身份验证和授权。请务必使用由相应服务账号签名的 JWT。如需查看服务账号角色的列表，请参阅 Fleet Engine 基础知识中的 Fleet Engine 服务账号角色。

您的消费者应用应使用 Google Cloud 项目中的 delivery_consumer 角色对最终用户进行身份验证，以便仅返回特定于消费者的信息。通过这种方式，Fleet Engine 会过滤和隐去响应中的所有其他信息。例如，在执行不可用任务期间，不会与最终用户共享任何位置信息。如需了解安排的任务，请参阅服务账号角色。

相反，您的后端应使用标准应用默认凭据机制针对 Fleet Engine 进行身份验证和授权。

授权的工作原理

使用 Fleet Engine 数据进行授权涉及服务器端和客户端实现。

服务器端授权

在基于 Web 的应用中设置身份验证和授权之前，您的后端服务器必须能够向您的基于 Web 的应用发出 JSON Web 令牌，以便应用访问车队引擎。您的基于 Web 的应用会随请求一起发送这些 JWT，以便 Fleet Engine 将请求识别为经过身份验证且有权访问请求中的数据。如需服务器端 JWT 实现的说明，请参阅 Fleet Engine Essentials 下的颁发 JSON Web 令牌。

具体而言，对于用于跟踪货运的 JavaScript Consumer SDK 而言，请注意以下几点：

客户端授权

当您使用 JavaScript 使用方 SDK 时，它会使用授权令牌提取程序从服务器请求令牌。当满足以下任一条件时，系统就会执行此操作：

不存在有效的令牌，例如 SDK 尚未在加载新页面时调用提取器，或者提取器未返回令牌时。
令牌已过期。
令牌将在 1 分钟内过期。

否则，JavaScript 使用方 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,
  };
}

后续步骤

关注运单