このページは Cloud Translation API によって翻訳されました。

Google Wallet API を使用してウェブでパスを作成する

1. はじめに

概要

Google Wallet API を使用すると、ポイントカード、クーポン、ギフトカード、イベントチケット、乗車券、搭乗券など、さまざまなタイプのパスを通じてユーザーに働きかけることができます。各パスタイプ（パスクラス）には、ユースケースに固有のフィールドと機能が用意されており、ユーザーエクスペリエンスを向上させることができます。

ただし、すべてのユースケースに適合するとは限りません。よりカスタマイズされたエクスペリエンスを作成するには、汎用パスタイプを使用します。汎用パスタイプのユースケースの例を次に示します。

駐車パス
図書館カード
ストアドバリュー型クーポン
ジムの会員カード
予約

汎用パスは、以下の形式で提示できるあらゆるユースケースに使用できます。

最大 3 行の情報
（省略可）バーコードグラフィック
（省略可）詳細セクション

会議イベント用の Google ウォレットパスのサンプル

Google Wallet API の詳細、またはウェブページに [Google ウォレットに追加] ボタンを追加する方法について詳しくは、Google ウォレットのデベロッパー向けドキュメントをご覧ください。

クラスとオブジェクトを渡す

Google Wallet API は、以下を作成するためのメソッドを公開しています。

タイプ	説明
パスクラス	個々のパスオブジェクトのテンプレート。このクラスに属するすべてのパスオブジェクトに共通する情報が含まれます。
パスオブジェクト	ユーザー ID に固有のパスクラスのインスタンス。

この Codelab について

この Codelab では、次のタスクを行います。

デモモードで新しい発行者アカウントを作成する
パスの発行用のサービスアカウントを作成する
新しい汎用パスクラスを作成する
新しいパスオブジェクトを作成する
パスを保存するための [Google ウォレットに追加] ボタンを作成する
ウェブページにボタンを表示する
パスの保存結果を処理する

前提条件

Git
Google Cloud コンソールにアクセスできる Google アカウント
Node.js バージョン 10 以降

目標

この Codelab を完了すると、次のことができるようになります。

Google ウォレットを使用してパスオブジェクトを作成する
[Google ウォレットに追加] ボタンを作成する

サポート

Codelab の途中で行き詰まった場合は、google-pay/wallet-web-codelab GitHub リポジトリに完全なソリューションが用意されているので、そちらを参照してください。

2. セットアップ

このステップでは、デモモードで発行者アカウントを作成します。これにより、ユーザーのウォレットに追加できるパスクラスとオブジェクトを作成できます。次に、Google Cloud プロジェクトとサービスアカウントを作成します。これらは、バックエンドサーバーと同じ方法で、パスクラスとオブジェクトをプログラムで作成するために使用されます。最後に、Google Cloud サービスアカウントに、Google ウォレット発行元アカウントでパスを管理する権限を付与します。

Google ウォレットのパスを作成して配布するには、発行者アカウントが必要です。登録には、Google Pay & Wallet Console を使用します。最初は、デモモードでパスを作成できます。つまり、作成したパスを追加できるのは、特定のテストユーザーのみです。テストユーザーは Google Pay & ウォレットコンソールで管理できます。

デモモードの詳細については、汎用パスの前提条件をご覧ください。

Google Pay & ウォレットコンソールを開きます。
画面上の手順に沿ってカード発行会社アカウントを作成します。
[Google Wallet API] を選択します。
利用規約とプライバシーポリシーを理解していることを確認する
[Issuer ID] の値をテキストエディタまたは他の場所にコピーします。
[管理] タブで [テスト用アカウントを設定] を選択します。
この Codelab で使用するメールアドレスを追加します

Google Wallet API を有効にする

Google Cloud コンソールにログインします。
Google Cloud プロジェクトがない場合は、ここで作成します（詳細については、プロジェクトの作成と管理をご覧ください）。
プロジェクトで Google Wallet API（Google Pay for Passes API とも呼ばれます）を有効にする

サービスアカウントとサービスアカウントキーを作成する

Google Wallet API を呼び出すには、サービスアカウントとサービスアカウントキーが必要です。サービスアカウントは、Google Wallet API を呼び出す ID です。サービスアカウントキーには、アプリケーションをサービスアカウントとして識別するための秘密鍵が含まれています。この鍵は機密情報であるため、外部に漏れないようにしてください。

サービスアカウントを作成する

Google Cloud コンソールで [サービスアカウント] を開きます。
サービスアカウントの名前、ID、説明を入力します。
[作成して続行] を選択します。
[完了] を選択します。

サービスアカウントキーを作成する

サービスアカウントを選択する
[KEYS] メニューを選択します。
[鍵を追加]、[新しい鍵を作成] の順に選択します。
キータイプとして [JSON] を選択します。
[作成] を選択します。

鍵ファイルをローカルワークステーションに保存するよう求められます。場所を覚えておいてください。

`GOOGLE_APPLICATION_CREDENTIALS` 環境変数を設定する

GOOGLE_APPLICATION_CREDENTIALS 環境変数は、Google SDK がサービスアカウントとして認証し、Google Cloud プロジェクトのさまざまな API にアクセスするために使用します。

Google Cloud サービスアカウントキーのドキュメントの手順に沿って、GOOGLE_APPLICATION_CREDENTIALS 環境変数を設定します。
新しいターミナル（macOS/Linux）またはコマンドライン（Windows）セッションで環境変数が設定されていることを確認します（すでにセッションを開いている場合は、新しいセッションを開始する必要があります）。
```
echo $GOOGLE_APPLICATION_CREDENTIALS
```

サービスアカウントを承認する

最後に、Google ウォレットパスを管理する権限をサービスアカウントに付与する必要があります。

Google Pay & ウォレットコンソールを開きます。
[ユーザー] を選択します。
[ユーザーを招待する] を選択します。
サービスアカウントのメールアドレスを入力します（例: [email protected]）
[アクセスレベル] プルダウンメニューから [開発元] または [管理者] を選択します。
[招待] を選択します。

3. サンプルの Node.js アプリを起動します。

所要時間 10:00

このステップでは、ショッピングウェブサイトとバックエンドサーバーとして機能する Node.js サンプルアプリケーションを実行します。

サンプルリポジトリのクローンを作成する

google-pay/wallet-web-codelab リポジトリには、Node.js ベースのサンプルプロジェクトと、パスクラスとオブジェクトのプロビジョニングに使用されるバックエンドサーバーを模倣したさまざまなスクリプトファイルが含まれています。これらのファイルを編集して、商品の詳細画面に [Google ウォレットに追加] ボタンを追加します。

リポジトリのクローンをローカルワークステーションに作成する

git clone https://github.com/google-pay/wallet-web-codelab.git

プロジェクトの依存関係をインストールする

ターミナルまたはコマンドラインプロンプトでクローンを作成したリポジトリを開きます。
web ディレクトリに移動します（この Codelab の残りの部分で変更するアプリです）。
```
cd web
```
Node.js 依存関係をインストールする
```
npm install .
```
アプリを起動する
```
node app.js
```
http://localhost:3000 で実行されているアプリを開きます。

メールアドレスを入力して [パスを作成] を選択しても、何も起こりません。次のステップでは、新しいパスクラスとオブジェクトを作成するようにアプリを構成します。

4. 汎用パスクラスを作成する

このステップでは、パスのベースクラスを作成します。ユーザーに新しいパスが作成されると、パスクラスで定義されたプロパティが継承されます。

この Codelab で作成するパスクラスでは、汎用パスの柔軟性を活かし、ID バッジとチャレンジポイントトラッカーの両方として機能するオブジェクトを作成します。このクラスからパスオブジェクトを作成すると、次のようになります。

パスクラスは、Google Pay & ウォレットコンソールで直接作成することも、Google Wallet API を使用して作成することもできます。この Codelab では、API を使用して汎用パスクラスを作成します。これは、プライベートバックエンドサーバーがパスクラスの作成に使用するプロセスに沿っています。

web/app.js ファイルを開きます。
issuerId の値を、Google Pay & ウォレットコンソールの発行者 ID に置き換えます。
```
// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID';
```
createPassClass 関数を見つける

関数で、認証済みの HTTP クライアントを作成し、Google ウォレット API を使用して新しいパスクラスを作成します。

// TODO: Create a Generic pass class
let genericClass = {
  'id': `${classId}`,
  'classTemplateInfo': {
    'cardTemplateOverride': {
      'cardRowTemplateInfos': [
        {
          'twoItems': {
            'startItem': {
              'firstValue': {
                'fields': [
                  {
                    'fieldPath': 'object.textModulesData["points"]'
                  }
                ]
              }
            },
            'endItem': {
              'firstValue': {
                'fields': [
                  {
                    'fieldPath': 'object.textModulesData["contacts"]'
                  }
                ]
              }
            }
          }
        }
      ]
    },
    'detailsTemplateOverride': {
      'detailsItemInfos': [
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': 'class.imageModulesData["event_banner"]'
                }
              ]
            }
          }
        },
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': 'class.textModulesData["game_overview"]'
                }
              ]
            }
          }
        },
        {
          'item': {
            'firstValue': {
              'fields': [
                {
                  'fieldPath': 'class.linksModuleData.uris["official_site"]'
                }
              ]
            }
          }
        }
      ]
    }
  },
  'imageModulesData': [
    {
      'mainImage': {
        'sourceUri': {
          'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-2021-card.png'
        },
        'contentDescription': {
          'defaultValue': {
            'language': 'en-US',
            'value': 'Google I/O 2022 Banner'
          }
        }
      },
      'id': 'event_banner'
    }
  ],
  'textModulesData': [
    {
      'header': 'Gather points meeting new people at Google I/O',
      'body': 'Join the game and accumulate points in this badge by meeting other attendees in the event.',
      'id': 'game_overview'
    }
  ],
  'linksModuleData': {
    'uris': [
      {
        'uri': 'https://io.google/2022/',
        'description': 'Official I/O \'22 Site',
        'id': 'official_site'
      }
    ]
  }
};

let response;
try {
  // Check if the class exists already
  response = await httpClient.request({
    url: `${baseUrl}/genericClass/${classId}`,
    method: 'GET'
  });

  console.log('Class already exists');
  console.log(response);
} catch (err) {
  if (err.response && err.response.status === 404) {
    // Class does not exist
    // Create it now
    response = await httpClient.request({
      url: `${baseUrl}/genericClass`,
      method: 'POST',
      data: genericClass
    });

    console.log('Class insert response');
    console.log(response);
  } else {
    // Something else went wrong
    console.log(err);
    res.send('Something went wrong...check the console logs!');
  }
}

コードが実行されると、新しいパスクラスが作成され、クラス ID が出力されます。クラス ID は、発行者 ID とデベロッパーが定義した接尾辞で構成されます。この場合、接尾辞は codelab_class に設定されます（クラス ID は 1234123412341234123.codelab_class に似ています）。出力ログには、Google Wallet API からのレスポンスも含まれます。

5. 汎用パスオブジェクトを作成する

このステップでは、前に作成したクラスを使用して汎用パスオブジェクトを作成するように Node.js アプリを構成します。ユーザーのパスオブジェクトを作成するには、2 つのフローがあります。

バックエンドサーバーでパスオブジェクトを作成する

このアプローチでは、パスオブジェクトがバックエンドサーバーで作成され、署名付き JWT としてクライアントアプリに返されます。ユーザーの利用率が高い場合に適しています。ユーザーがウォレットに追加しようとする前に、オブジェクトが存在することを確認できます。

ユーザーがウォレットに追加したときにパスオブジェクトを作成する

この方法では、パスオブジェクトが定義され、バックエンドサーバーで署名付き JWT にエンコードされます。その後、JWT を参照するクライアントアプリに [Google ウォレットに追加] ボタンが表示されます。ユーザーがボタンを選択すると、JWT を使用してパスオブジェクトが作成されます。これは、パスオブジェクトが作成されても使用されないため、ユーザーの利用状況が変動する場合や不明な場合に最適です。このアプローチは Codelab で使用されます。

web/app.js ファイルを開きます。
createPassObject 関数を見つける

関数で、ユーザーの新しいパスオブジェクトを定義します。

// TODO: Create a new Generic pass for the user
let objectSuffix = `${req.body.email.replace(/[^\w.-]/g, '_')}`;
let objectId = `${issuerId}.${objectSuffix}`;

let genericObject = {
  'id': `${objectId}`,
  'classId': classId,
  'genericType': 'GENERIC_TYPE_UNSPECIFIED',
  'hexBackgroundColor': '#4285f4',
  'logo': {
    'sourceUri': {
      'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/pass_google_logo.jpg'
    }
  },
  'cardTitle': {
    'defaultValue': {
      'language': 'en',
      'value': 'Google I/O \'22'
    }
  },
  'subheader': {
    'defaultValue': {
      'language': 'en',
      'value': 'Attendee'
    }
  },
  'header': {
    'defaultValue': {
      'language': 'en',
      'value': 'Alex McJacobs'
    }
  },
  'barcode': {
    'type': 'QR_CODE',
    'value': `${objectId}`
  },
  'heroImage': {
    'sourceUri': {
      'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-hero-demo-only.jpg'
    }
  },
  'textModulesData': [
    {
      'header': 'POINTS',
      'body': '1234',
      'id': 'points'
    },
    {
      'header': 'CONTACTS',
      'body': '20',
      'id': 'contacts'
    }
  ]
};

// TODO: Create the signed JWT and link
res.send("Form submitted!");

アプリを再読み込みしてメールアドレスを入力し、フォームを送信しても、出力は表示されません。パスオブジェクトはバックエンドアプリケーションによって定義されていますが、出力は返されません。次に、パスを [Google ウォレットに追加] リンクに変換します。

6. [Google ウォレットに追加] ボタンを作成する

最後のステップでは、署名付き JWT を作成し、[Google ウォレットに追加] ボタンで使用できるリンクを返します。ユーザーがボタンを選択すると、パスをウォレットに保存するよう求められます。

JWT クレームを作成し、サービスアカウントの秘密鍵を使用してエンコードし、埋め込まれたリンクを含む [Google ウォレットに追加] ボタンを返します。

// TODO: Create the signed JWT and link
const claims = {
  iss: credentials.client_email,
  aud: 'google',
  origins: [],
  typ: 'savetowallet',
  payload: {
    genericObjects: [
      genericObject
    ]
  }
};

const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
const saveUrl = `https://pay.google.com/gp/v/save/${token}`;

res.send(`<a href='${saveUrl}'><img src='wallet-button.png'></a>`);

ブラウザで実行中のアプリを再読み込みする
フォームにメールアドレスを入力し、[パスを作成] を選択します。
表示された [Google ウォレットに追加] ボタンを選択します。

7. 完了

汎用パスオブジェクトの例

これで、Google Wallet API のウェブへの統合が完了しました。

その他の情報

完全な統合については、google-pay/wallet-web-codelab GitHub リポジトリをご覧ください。

パスを作成し、本番環境へのアクセスをリクエストする

本番環境で独自のパスを発行する準備が整ったら、Google Pay & ウォレットコンソールに移動して本番環境へのアクセスをリクエストします。

詳細については、Web API の前提条件をご覧ください。