このページは 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] を選択します。
利用規約とプライバシーポリシーを理解したことを確認する
発行者 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 & ウォレットコンソールを開きます。
[ユーザー] を選択します。
[ユーザーを招待] を選択します。
サービスアカウントのメールアドレス（例: test-svc@myproject.iam.gserviceaccount.com）を入力します。
[アクセスレベル] プルダウンメニューから [開発元] または [管理者] を選択します。
[招待] を選択します。

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

Duration 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://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 & Wallet Console に移動して本番環境へのアクセスをリクエストします。

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