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

JavaScript Consumer SDK を使用すると、Fleet Engine で追跡されている車両の位置やその他の関心対象地域を、ウェブベースの地図に表示できます。これにより、一般ユーザーは荷物の配送状況を確認できます。 このガイドでは、Fleet Engine と、それに関連付けられた Google Cloud プロジェクトと API キーが設定されていることを前提としています。詳しくは、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 Web Token（JWT）を使用する必要があります。

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

重要な詳細

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

認可の仕組み

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

サーバーサイド認証

ウェブベースのアプリケーションで認証と認可を設定する前に、バックエンド サーバーが、Fleet Engine にアクセスするための JSON ウェブトークンをウェブベースのアプリケーションに発行できる必要があります。ウェブベースのアプリケーションは、リクエストとともにこれらの JWT を送信します。これにより、Fleet Engine はリクエストを認証済みと認識し、リクエスト内のデータへのアクセスを承認します。サーバーサイドの JWT 実装手順については、Fleet Engine の基本の 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,
  };
}

次のステップ