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

JavaScript Consumer SDK を使用すると、ユーザーアプリで、Fleet Engine で追跡された車両の位置やその他の関心のある場所をウェブベースの地図に表示できます。これにより、コンシューマー ユーザーは配送状況を確認できます。 このガイドでは、関連付けられた Google Cloud プロジェクトと API キーを使用して Fleet Engine を設定していることを前提としています。詳しくは、Fleet Engine をご覧ください。

JavaScript Consumer SDK を設定する手順は次のとおりです。

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

Maps JavaScript API を有効にする

Fleet Engine インスタンスに使用する Google Cloud コンソール プロジェクトで Maps JavaScript API を有効にします。詳しくは、Maps JavaScript API ドキュメントの API を有効にするをご覧ください。

認可を設定する

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

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

重要な詳細

ユーザーアプリは、Google Cloud プロジェクトの delivery_consumer ロールを使用してエンドユーザーを認証し、コンシューマー固有の情報のみを返す必要があります。これにより、Fleet Engine はレスポンス内の他のすべての情報をフィルタして編集します。たとえば、利用不可タスク中に、位置情報がエンドユーザーと共有されることはありません。スケジュールされたタスクのサービス アカウント のロールをご覧ください。

認可の仕組み

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

サーバーサイドの認可

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

特に、配送状況を追跡するための JavaScript Consumer SDK については、次の点に注意してください。

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

JavaScript Consumer SDK を使用すると、認可トークン フェッチャーを使用してサーバーからトークンをリクエストします。これは、次のいずれかに該当する場合に行われます。

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

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

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

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

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

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

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

    • 文字列 token。

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

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

次のステップ