Slide 1

Slide 1 text

PHPでGoogle Walletにチケットを追加する 2023/10/25 第157回 PHP勉強会@東京 muno92 1

Slide 2

Slide 2 text

自己紹介 X (旧Twitter): @muno_92 色々なカンファレンスでスタッフ をしています PHPerKaigi 2020、2022〜 iOSDC Japan 2023 PHP Conference Japan 2023 PHPカンファレンス小田原 2024 2

Slide 3

Slide 3 text

(宣伝) PHPerKaigi 2024 日程: 2024年3月7日(木)〜9日(土) 会場: 中野セントラルパークカンファレンス & ニコニコ生放送 現在スポンサー募集中! https://phperkaigi.jp/2024/ 3

Slide 4

Slide 4 text

(宣伝) PHPカンファレンス小田原 2024 日程: 2024年4月13日(土) 会場: おだわら市民交流センター 「UMECO」 参加人数:100名前後(予定) 現在スポンサー募集中! https://phpcon-odawara.jp/ 4

Slide 5

Slide 5 text

カンファレンスによって様々な受付方法 各種カンファレンスの受付にQRコードを使用する場合があるが、その表示方法は様々 専用アプリ Webサイト メール添付 参加者目線: 少し手間 運営目線: 全ての参加者がスッとQRコードを提示出来るとは限らない 中にはQRコードを表示するためのログインで引っかかってしまう人も 5

Slide 6

Slide 6 text

こんなチケットをGoogle Walletに 追加出来たら カンファレンス情報 名前 ロゴ バナー 参加者名 イベント種別(本編、懇親会な ど) チケット番号 受付用QR 便利では? (なによりテンションが上がる) 6

Slide 7

Slide 7 text

Google Walletにチケットを追加するには どんな種類のチケットを作りたいか決める Google WalletのコンソールやGoogle Cloudのプロジェクトで事前準備 実装 7

Slide 8

Slide 8 text

チケットの種類 https://developers.google.com/wallet? hl=ja クレジットカード、ポイントカー ドなど様々 イベントチケット(右図)だと座 席番号など様々な情報を記載出来 るらしい が、一番欲しいのは「チケット番 号」と「受付用QRコード」 -> 汎用パスを選択 Apple Wallet対応も考えてシ ンプルに収めた (2023/11/3 追記) イベント向けな らイベントチケットの選択必須 8

Slide 9

Slide 9 text

(2023/11/3 追記) 汎用パスの使用用途 Google Wallet API を使用すると、あらかじめ定義されたさまざまなタイプのパス(ポ イントカード、クーポン、ギフトカード、イベント チケット、乗車券、搭乗券、ワクチ ンカード)でユーザーにアプローチできます。それぞれのパスには、ユースケース別の フィールドや機能が含まれています。 Google は、既存の 7 つのパスタイプがすべてのユースケースに適しているとは限らな いことを理解しており、汎用パスタイプを作成しました。汎用パスタイプは、その名前 が示すように、ユースケースが他の専用タイプに当てはまらない場合に使用します。 https://developers.google.com/wallet/generic?hl=ja イベント用途ならイベントチケットを使用しなければいけない (Googleの審査で指摘あり) 9

Slide 10

Slide 10 text

事前準備 https://developers.google.com/wallet/generic/web/prerequisites?hl=ja に記載されている1〜4番。5番は実際に実装して、開発環境で動かせばOK 1. Google Wallet API 発行者アカウントの登録 初期状態ではデモモードとして指定したGoogleアカウント限定で使用可能 本番運用時はビジネスプロフィールを入力して審査を通す必要あり 2. Google Cloudの任意のプロジェクトでGoogle Wallet APIを有効化 3. 2番のプロジェクトでサービスアカウント(アプリケーション用のアカウント)を作成 4. Google Pay and Wallet Consoleで3番のアカウントを承認 10

Slide 11

Slide 11 text

実装の大まかな流れ 1. 事前準備で作成した情報を使用して認証 2. Google Walletの「クラス」を作成し、登録 3. 各参加者情報を元にGoogle Walletの「パスオブジェクト」を作成し、登録 4. Google Walletに追加するためのURL https://pay.google.com/gp/v/save/{JWT} の JWTを生成 5. ブランドガイドラインからダウンロードした画像を使って「Add to Google Wallet」ボ タンを設置 ※ 独自にボタンを作ってはいけない 11

Slide 12

Slide 12 text

「クラス」と「オブジェクト」 https://developers.google.com/wallet/generic/overview/how-classes-objects-work?hl=ja クラス: 参加者共通の情報を保持 オブジェクト: 参加者固有の情報を保持 12

Slide 13

Slide 13 text

汎用パスクラスの作成・登録 汎用パスなら一意なクラスID以外の指定は不要 (むしろ、テンプレートとして項目を指定しても特に反映されず) // 自分は` 発行者アカウントの発行者ID(Issuer ID). アプリケーション名` を使用しました $classId = " 一意な値"; $newClass = new Google_Service_Walletobjects_GenericClass([ // クラス名・・・? 'id' => $classId ]); try { $this->service->genericclass->get($classId); return $newClass; } catch (\Google\Service\Exception $ex) { // なぜtry-catch で分岐・・・? if (empty($ex->getErrors()) || $ex->getErrors()[0]['reason'] != 'classNotFound') { // 何かしらのエラー処理 } } $this->service->genericclass->insert($newClass); 13

Slide 14

Slide 14 text

汎用パスオブジェクトの作成 (ソースコード) $newObject = new Google_Service_Walletobjects_GenericObject([ 'id' => ' オブジェクトID', 'classId' => ' クラスID', 'heroImage' => new Google_Service_Walletobjects_Image(['sourceUri' => new Google_Service_Walletobjects_ImageUri([ 'uri' => ' カンファレンスバナーのURL', ])]), 'barcode' => new Google_Service_Walletobjects_Barcode(['type' => 'QR_CODE', 'value' => ' 受付用QR に埋め込む文字列']), 'cardTitle' => new Google_Service_Walletobjects_LocalizedString([ 'defaultValue' => new Google_Service_Walletobjects_TranslatedString([ 'language' => 'ja-JP', 'value' => ' カンファレンス名' ]) ]), 'header' => new Google_Service_Walletobjects_LocalizedString([ 'defaultValue' => new Google_Service_Walletobjects_TranslatedString([ 'language' => 'ja-JP', 'value' => ' 参加者名' ]) ]), 'subheader' => new Google_Service_Walletobjects_LocalizedString([ 'defaultValue' => new Google_Service_Walletobjects_TranslatedString([ 'language' => 'ja-JP', 'value' => " イベント種別 チケット番号" ]) ]), 'hexBackgroundColor' => ' チケット上部の背景色', // 未指定の場合はロゴの主要な色が自動設定される 'logo' => new Google_Service_Walletobjects_Image(['sourceUri' => new Google_Service_Walletobjects_ImageUri([ 'uri' => ' カンファレンスロゴのURL', ])]) ]); // 登録の流れはクラスと同じ 14

Slide 15

Slide 15 text

汎用パスオブジェクトの作成 (図解) 15

Slide 16

Slide 16 text

(2023/11/3 追記) イベントパスクラ ス・オブジェクトの作成 汎用パスとは違い、クラスでテン プレートを組んでオブジェクトの 情報を埋め込む形 サンプルコードは長いのでGist参 照 16

Slide 17

Slide 17 text

JWTの生成 $serviceAccount = json_decode(file_get_contents('JSON 形式で作成したサービスアカウントの鍵ファイル'), true); $claims = [ 'iss' => $serviceAccount['client_email'], 'aud' => 'google', 'origins' => [], 'typ' => 'savetowallet', 'payload' => [ 'genericClasses' => [ // 作成したクラス ], 'genericObjects' => [ // 作成したオブジェクト ] ] ]; return JWT::encode( $claims, $serviceAccount['private_key'], 'RS256' ); 17

Slide 18

Slide 18 text

あとはボタンを追加するだけ ボタンを設置 https://pay.google.com/gp/v /save/{JWT} のリンクを設定 ボタンクリックでGoogle Walletへ の追加画面に 18

Slide 19

Slide 19 text

まとめ Google Walletには色々なチケット(パス)の種類があるが、チケット番号やQRコード を表示するだけなら汎用パスで十分 (2023/11/3 追記) 用途にあったパスを使用しなければいけない どれにも一致しなかったら汎用パスを使う (実装上は)結構簡単にチケットをGoogle Walletに追加できる 他にも色々出来そうなので、自分の求めているものがあるか探してみると良いかも 19

Slide 20

Slide 20 text

ご清聴ありがとうございました 20

Slide 21

Slide 21 text

補足1: 使用ライブラリ https://github.com/google-wallet/rest-samples/tree/main/php compsoerで以下のライブラリを追加 { "require": { "google/auth": "^1.18", "guzzlehttp/guzzle": "*", "google/apiclient": "^2.12" } } Google Wallet API クライアント をダウンロード・任意のパスに設置(!) JavaやC#も同様だったので、Google社内で何か事情があるのかも 1ファイルにWallet関係のクラスが詰まっている・・・ それ以外の言語のサンプルは素のテキスト・オブジェクトを使っているので、その 方式を選択するのもアリ 21

Slide 22

Slide 22 text

補足2: チケットの変更・削除 チケットの変更・削除時はオブジェクトのpatchメソッドを使用 削除はないので、stateをINACTIVEなどに変更する https://developers.google.com/wallet/generic/use-cases/expired-passes?hl=ja 22

Slide 23

Slide 23 text

補足3: クラス・オブジェクトの存在確認 try { $this->service->genericclass->get($classId); return $newClass; } catch (\Google\Service\Exception $ex) { // なぜtry-catch で分岐・・・? if (empty($ex->getErrors()) || $ex->getErrors()[0]['reason'] != 'classNotFound') { // 何かしらのエラー処理 } } ↑コレ getメソッドの結果 存在する -> クラスやオブジェクトが返ってくる 存在しない -> 例外発生 なので、try-catchでの分岐が必要 23

Slide 24

Slide 24 text

参考情報 https://codelabs.developers.google.com/add-to-wallet-web#0 Node.jsで実装するチュートリアル https://github.com/google-wallet/rest-samples サンプルコード Java, C#, JavaScript(Node.js), PHP, Python, Go 24