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

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

この Codelab について

subject最終更新: 1月 19, 2023
account_circle作成者: Nick Alteen

1. はじめに

概要

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

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

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

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

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

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

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

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

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

タイプ

説明

パスクラス

個々のパス オブジェクトのテンプレート。このクラスに属するすべてのパス オブジェクトに共通する情報が含まれます。

パス オブジェクト

ユーザー ID に固有のパスクラスのインスタンス。

この Codelab について

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

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

前提条件

目標

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

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

サポート

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

2. セットアップ

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

Google ウォレット発行者アカウントを登録する

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

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

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

Google Wallet API を有効にする

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

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

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

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

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

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

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

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

GOOGLE_APPLICATION_CREDENTIALS 環境変数を設定する

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

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

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

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

  1. Google Pay & ウォレット コンソールを開きます。
  2. [ユーザー] を選択します。
  3. [ユーザーを招待する] を選択します。
  4. サービス アカウントのメールアドレスを入力します（例: test-svc@myproject.iam.gserviceaccount.com）
  5. [アクセスレベル] プルダウン メニューから [開発元] または [管理者] を選択します。
  6. [招待] を選択します。

3. サンプルの Node.js アプリを起動する

所要時間 10:00

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

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

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

  1. リポジトリのクローンをローカル ワークステーションに作成する
    git clone https://github.com/google-pay/wallet-web-codelab.git

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

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

メールアドレスを入力するフィールドと [パスを作成] ボタンがあるウェブアプリの例

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

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

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

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

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

  1. web/app.js ファイルを開きます。
  2. issuerId の値を、Google Pay & ウォレット コンソールの発行者 ID に置き換えます。
    // TODO: Define Issuer ID
    const issuerId = 'ISSUER_ID';
  3. createPassClass 関数を見つける
  4. 関数で、認証済みの 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 で使用されます。

  1. web/app.js ファイルを開きます。
  2. createPassObject 関数を見つける
  3. 関数で、ユーザーの新しいパス オブジェクトを定義します。
    // 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 ウォレットに追加] ボタンで使用できるリンクを返します。ユーザーがボタンを選択すると、パスをウォレットに保存するよう求められます。

  1. 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>`);
  2. ブラウザで実行中のアプリを再読み込みする
  3. フォームにメールアドレスを入力し、[パスを作成] を選択します。
  4. 表示された [Google ウォレットに追加] ボタンを選択します。

[Google ウォレットに追加] ボタンがアプリのフロントエンドに正常にレンダリングされる

7. 完了

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

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

その他の情報

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

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

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

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

bug_report 誤りを報告