JavaScript Consumer SDK をセットアップする

プラットフォームを選択: Android iOS JavaScript

JavaScript Consumer SDK を使用すると、コンシューマ アプリで、Fleet Engine で追跡された車両の位置情報やその他の興味 / 関心のある場所をウェブベースの地図に表示できます。これにより、消費者はドライバーの移動の進捗状況を確認できます。 このガイドでは、関連する Google Cloud プロジェクトと API キーを使用して Fleet Engine をセットアップしていることを前提としています。詳細については、Fleet Engine をご覧ください。

JavaScript Consumer SDK は次の手順で設定します。

  1. Maps JavaScript API を有効にする
  2. 認可を設定する

Maps JavaScript API を有効にする

Google Cloud コンソールで Maps JavaScript API を有効にします。詳細については、Google Cloud ドキュメントの API を有効にするをご覧ください。これにより、JavaScript 向けコンシューマ SDK が有効になります。

認可を設定する

信頼性の低い環境からの API メソッド呼び出しの場合、Fleet Engine では、適切なサービス アカウントによって署名された JSON Web Token（JWT）を使用する必要があります。信頼性の低い環境には、スマートフォンやブラウザが含まれます。JWT 完全に信頼できる環境であるサーバー上で行われます。JWT は署名され、暗号化され、有効期限が切れるか無効になるまで、その後のサーバー インタラクションのためにクライアントに渡されます。

バックエンドは、標準のアプリケーションのデフォルト認証情報メカニズムを使用して、Fleet Engine に対して認証と承認を行う必要があります。適切なサービス アカウントで署名された JWT を使用してください。1 つの サービス アカウントのロールのリストについては、Fleet Engine サービス アカウントのロールをご覧ください。 「Fleet Engine Basics」をご覧ください。

対照的に、バックエンドは Fleet Engine に対して認証と認可を行う必要がある 標準のアプリケーションのデフォルト認証情報を使用 メカニズムです。

認可の仕組み

Fleet Engine データによる認証には、サーバーサイドとクライアントサイドの両方の実装が含まれます。

サーバーサイド認可

ウェブベースの バックエンド サーバーが JSON Web Token を発行でき、 Fleet Engine にアクセスするためのウェブベースのアプリケーションです。ウェブベースのアプリケーション リクエストと一緒にこれらの JWT を送信し、Fleet Engine がリクエストを データへのアクセスを許可することを リクエストできます。サーバーサイドの JWT 実装の手順については、Fleet Engine の基本の JSON Web Token を発行するをご覧ください。

特に、JavaScript Consumer SDK for Google では次の点に注意してください。 移動状況の共有:

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

JavaScript Consumer SDK を使用する場合は、 認証トークン フェッチャーです。これは、次のいずれかに該当する場合に行われます。

  • 有効なトークンが存在しない（SDK が新しいページの読み込みで取得ツールを呼び出していない場合や、取得ツールがトークンを返さなかった場合など）。

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

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

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

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

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

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

    • 文字列 token。

    • 数値 expiresInSeconds。トークンは取得後、この時間の経過後に期限切れになります。認証トークン フェッチャーは有効期限を渡す必要があります。 ライブラリにフェッチした時点からの秒数です。 見てみましょう。

  • フェッチャーは、サーバーの URL を呼び出してトークンを取得する必要があります。この URL（SERVER_TOKEN_URL）はバックエンドの実装によって異なります。次の 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 でルートを追跡する