Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 & ウォレットコンソールを使用して登録できます。最初は、デモモードでパスを作成できます。つまり、作成したパスを追加できるのは、特定のテストユーザーのみです。テストユーザーは Google Pay &ウォレットコンソールで管理できます。

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

Google Pay & ウォレットコンソールを開く
画面上の手順に沿って発行者アカウントを作成する
[Google Wallet API] を選択する
利用規約とプライバシーポリシーに同意する
[発行者 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、説明を入力する
[作成して続行] を選択する
[完了] を選択する

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

サービスアカウントを選択する
[鍵] メニューを選択する
[鍵を追加]、[新しい鍵を作成] を選択する
[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 & ウォレットコンソールを開く
[ユーザー] を選択する
[ユーザーを招待] を選択する
サービスアカウントのメールアドレスを入力する（例: test-svc@myproject.iam.gserviceaccount.com）
[アクセスレベル] プルダウンメニューから [開発元] または [管理者] を選択する
[招待] を選択する

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 Wallet 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://codelabs.developers.google.com/static/add-to-wallet-web/images/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://developers.google.com/static/wallet/site-assets/images/pass-builder/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://developers.google.com/static/wallet/site-assets/images/pass-builder/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 & ウォレットコンソールに移動して製品版へのアクセスをリクエストします。

詳しくは、ウェブ API の前提条件をご覧ください。