JavaScript フリート トラッキング ライブラリを設定する

JavaScript フリート トラッキング ライブラリを使用する前に、Fleet Engine について理解し、設定しておく必要があります。詳細については、Fleet Engine をご覧ください。

このドキュメントでは、ウェブページ アプリと Fleet Engine 間の認可を有効にする方法について説明します。Fleet Engine へのリクエストが正しい認証トークンで設定されると、地図上で車両を追跡できるようになります。

認可を設定する

Fleet Engine では、スマートフォンやブラウザなどの信頼度の低い環境からの API メソッド呼び出しに JSON Web Token（JWT）を使用する必要があります。

JWT はサーバーで生成され、署名と暗号化が行われてクライアントに渡されます。有効期限が切れるか無効になるまで、以降のサーバーとのやり取りで使用されます。

主な詳細

承認の仕組み

Fleet Engine データを使用した認可には、サーバーサイドとクライアントサイドの両方の実装が必要です。

サーバーサイドの認可

フリート トラッキング アプリケーションで認証と認可を設定する前に、バックエンド サーバーが Fleet Engine にアクセスするためにフリート トラッキング アプリケーションに JSON ウェブトークンを発行できる必要があります。フリート トラッキング アプリケーションは、リクエストとともにこれらの JWT を送信します。これにより、Fleet Engine はリクエストが認証され、リクエスト内のデータにアクセスする権限が付与されていることを認識します。サーバーサイドの JWT 実装の手順については、Fleet Engine の基本の JSON ウェブトークンを発行するをご覧ください。

フリート トラッキングを実装する際にサーバーからトークンを生成するには、以下をご覧ください。

クライアントサイドの認可

JavaScript のフリート トラッキング ライブラリを使用すると、認可トークン フェッチャーを使用してサーバーからトークンがリクエストされます。これは、次のいずれかに該当する場合に実行されます。

  • 有効なトークンが存在しない場合（SDK が新しいページの読み込みでフェッチャーを呼び出していない場合や、フェッチャーがトークンを返していない場合など）。

  • トークンの有効期限が切れています。

  • トークンの有効期限が 1 分以内である。

それ以外の場合、JavaScript Fleet Tracking ライブラリは以前に発行された有効なトークンを使用し、フェッチャーを呼び出しません。

認証トークン フェッチャーを作成する

次のガイドラインに沿って、認可トークン フェッチャーを作成します。

  • フェッチャーは、次の例のように Promise でラップされた 2 つのフィールドを含むデータ構造を返す必要があります。

    • 文字列 token。

    • 数値 expiresInSeconds。トークンは、取得後この時間で期限切れになります。認証トークン フェッチャーは、例に示すように、取得時からライブラリまでの有効期限を秒単位で渡す必要があります。

  • フェッチャーはサーバー上の URL を呼び出してトークンを取得する必要があります。この URL（SERVER_TOKEN_URL）は、バックエンドの実装によって異なります。次の URL の例は、GitHub のサンプルアプリのバックエンド用です。

    • https://SERVER_URL/token/fleet_reader

例 - 認証トークン フェッチャーを作成する

次の例は、認証トークン フェッチャーを作成する方法を示しています。

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

次のステップ