Настройка потребительского SDK JavaScript

С помощью JavaScript Consumer SDK ваше потребительское приложение может отображать местоположение транспортных средств и других интересующих объектов, отслеживаемых в Fleet Engine, на веб-карте. Это позволяет вашим пользователям отслеживать ход доставки. В этом руководстве предполагается, что вы настроили Fleet Engine с соответствующим проектом Google Cloud и ключами API. Подробности см. в разделе Fleet Engine .

You set up the JavaScript Consumer SDK following these steps:

1. Enable the Maps JavaScript API .
2. Set up authorization .

Enable the Maps JavaScript API

Enable the Maps JavaScript API in the Google Cloud Console project that you use for your Fleet Engine instance. For more details, see Enable APIs in the Maps JavaScript API documentation.

Set up authorization

Fleet Engine requires the use of JSON Web Tokens (JWTs) for API method calls from low-trust environments : smartphones and browsers.

A JWT originates on your server, is signed, encrypted, and passed to the client for subsequent server interactions until it expires or is no longer valid.

Ключевые детали

• Use Application Default Credentials to authenticate and authorize against Fleet Engine.
• Use an appropriate service account to sign JWTs. See Fleet Engine serviceaccount roles in Fleet Engine Basics .

How does authorization work?

Authorization with Fleet Engine data involves both server-side and client-side implementation.

Server-side authorization

Прежде чем настраивать аутентификацию и авторизацию в вашем веб-приложении, ваш бэкэнд-сервер должен иметь возможность выдавать JSON Web Tokens вашему веб-приложению для доступа к Fleet Engine. Ваше веб-приложение отправляет эти JWT вместе со своими запросами, чтобы Fleet Engine распознавал запросы как аутентифицированные и авторизованные для доступа к данным в запросе. Инструкции по реализации JWT на стороне сервера см. в разделе «Выдача JSON Web Tokens» в руководстве Fleet Engine Essentials .

• General guidelines for issuing JSON Web Tokens
• Scheduled tasks JWT guidelines
• Example token for a consumer app

Client-side authorization

When you use the JavaScript Consumer SDK, it requests a token from the server using an authorization token fetcher. It does this when any of the following is true:

• No valid token exists, such as when the SDK hasn't called the fetcher on a fresh page load, or when the fetcher hasn't returned with a token.

• The token has expired.

• The token is within one minute of expiring.

Otherwise, the JavaScript Consumer SDK uses the previously-issued, valid token and does not call the fetcher.

Create an authorization token fetcher

Create your authorization token fetcher using these guidelines:

• The fetcher must return a data structure with two fields , wrapped in a Promise as follows:

  • A string token .

  • Значение параметра expiresInSeconds указывает, что токен истекает через указанное время после его получения. Программа для получения аутентификационных токенов должна передавать это значение в секундах, от момента получения токена библиотекой, как показано в примере.

• Для получения токена необходимо вызвать URL-адрес на вашем сервере . Этот URL-адрес — SERVER_TOKEN_URL — зависит от вашей реализации бэкэнда. Следующий пример URL-адреса относится к тестовому приложению на GitHub :

  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID

Example - Create an authentication token fetcher

The following examples show how to create an authorization token fetcher:

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
  };
}

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

Что дальше?

• Follow a shipment