マーケットプレイスからゲームを追加する

BananaSeed の問い合わせフォームには、前のレッスン からすでに動くウィジェットがあります。この最後のレッスンでは、素のチェックボックスを、すべての訪問者がクリアしなければならない本物の遊べるゲームに置き換えます。

チェックボックスがもう動くのに、なぜわざわざ？チェックボックスは静かな最低限です。ゲームは、避けられない「人間であることを証明する」瞬間を、訪問者が耐え忍ぶものから楽しむものへと変えます。そしてそれは、洗練された攻撃者に対して持ちこたえる部分でもあります。今日の AI はチェックボックスにチェックを入れ、画像グリッドを解けますが、本物のゲームはそれがズルできない唯一のチャレンジです。なぜなら、人間のように遊ぶ機械はないからです。💪

このレッスンは、ウィジェットを置くよりも少し手が込んでいます。ゲームを選び、サイトキーにインストールし、それを必須にするゲートをオンにします。その見返りは、ゲームが、ボットとあなたのフォームの間に実際に立つものになることです。すり抜けて飛ばせる飾りではありません。下にあるトークンの仕組みは同一なので、バックエンドはまったく変わりません。ここでのすべては無料プランで動きます。

最後にあなたが手にするもの

• サイトキーにインストールされた、マーケットプレイスのゲーム 1 つ。
• 検証に必須とされたそのゲーム。素のチェックボックスではもう通れません。
• 同じ問い合わせフォーム。今やゲームに守られ、バックエンドの確認は変わっていません。

1. マーケットプレイスからゲームを選ぶ

マーケットプレイス は、あなたが選ぶための公開カタログです。開いて見て回りましょう。カテゴリで、あるいはゲームが何に対応しているか（タッチ、キーボード、スクリーンリーダー、サウンド）で絞り込めるので、ゲームをあなたの観客に合わせられます。各ゲームには、プレビューと caputchin/games/leaf-memory のような id が載った専用のページがあります。

閲覧は自由で、承認待ちの行列はありません。カタログのすべてのゲームが使える状態です。1 つ選んでその id をコピーしましょう。このレッスンの残りでは Leaf Memory（caputchin/games/leaf-memory）を使います。

2. サイトキーにゲームをインストールする

ゲームがキーを守れるようになる前に、そのキーにゲームをインストールします。インストールは Caputchin に、固定された検証済みのゲームのスナップショットを取るよう指示します。これにより、あなたの訪問者が遊ぶまさにそのバージョンが、Caputchin が後で結果を確認するときに再実行できるものになります。

ダッシュボードでチームを開き、サイトキーを開き、その ゲーム ページへ行きます。ゲームを追加 パネルの マーケットプレイスのゲーム ボックスでゲームを検索し、一覧から選びます（または 開く をクリック）。

Caputchin はゲームを登録し、そのスナップショットを取り、ゲームの設定ページにあなたを降ろします。ゲームは今や、ゲームページに戻ると 登録済みのゲーム の下に現れ、キーを守る準備ができています。ほとんどすべてのマーケットプレイスゲームは、登録した途端に準備完了です。ファーストパーティのものは常にそうです。万一どこかのゲームがここで リプレイ不可 バッジを表示する場合、作者がリプレイ可能なビルドを出荷するまで、それはゲートできません。

ゲームは 2 つ以上追加できます。1 つのサイトキーに追加してもよいし、チームに一度追加して、その中のすべてのキーで同じセットを共有してもかまいません。

サイトキーにゲームがインストールされ、検証されました。次はそれを必須にします。🎉

3. 検証にゲームを必須にする

ゲームをインストールすると、それが使える状態になります。まだ誰にもそれを遊ぶよう強制はしません。それをするのがゲートです。

サイトキーで、その セキュリティ ページを開き、検証にゲームを必須にする をオンにします。これ以降、このキーへのすべての訪問者は、通るためにインストール済みのゲームのどれか 1 つを遊ばなければならず、素のチェックボックスをクリアするだけではもう十分ではありません。（少なくとも 1 つゲームがインストールされるまでゲートはオンにできません。だからこそステップ 2 が先に来ます。）

ゲートがオンだと、Caputchin はどのインストール済みゲームを各訪問者に渡すかを選び、一度きりの署名付きチケットを通じてそれを配ります。訪問者も、ボットも、ゲームを選ぶことも、飛ばすことも、もっと簡単なものに入れ替えることもできません。選択は Caputchin 側で、セッションごとに新しく行われます。それが、ゲームを気のきいた添え物から本物の保護へと変えるものです。

キーのセット全体を管理していますか？チームには、すべてのサイトキーでゲームを必須にする を備えた独自の セキュリティ ページがあり、チーム内のすべてのキーに対して一度にゲートをオンにします。

4. 要素を差し替える

次はページです。ゲームは別の要素 <caputchin-game> 上にレンダリングされます。すでに追加した import "@caputchin/widget" がこれも登録するので、新しくインストールするものはありません。キーが今やゲームを必須にしているため、チェックボックスだけの <caputchin-widget> はその上でもう通れません。なので、この差し替えが最後の必須ステップです。

問い合わせフォームで、その 1 行を変えます：

// before
<caputchin-widget sitekey="cpt_pub_..." />

// after
<caputchin-game sitekey="cpt_pub_..." />

ゲームの id は渡しません。キーがゲームを必須にしているため、Caputchin はあなたのインストール済みゲームの 1 つを提供し、訪問ごとにそれを選びます。特定の 1 つを固定したい、あるいはローテーションを一部に絞りたい場合は、それらを名前で指定します（各キーにインストール済みである必要があります）：

// always Leaf Memory
<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" />

// a random one of these two per visit
<caputchin-game
  sitekey="cpt_pub_..."
  games="caputchin/games/leaf-memory,caputchin/games/dino-runner"
/>

キーにインストールされていないゲームを名前で指定しても、それは読み込まれません。ウィジェットは、訪問者を通すのではなく、ゲートにそのようなゲームがないと報告します。

5. 試す

アプリを再読み込みします。チェックボックスは消えています。訪問者は今や、サンドボックス化された iframe の中でゲームを遊びます。勝つと、ウィジェットは同じ隠しの caputchin-token フィールドをフォームに追加するので、あなたの FormData の読み取りも、バックエンドの /siteverify の確認も、どちらも前のレッスンから変わりません。

サイトキーの統計を開くと、セッションが前と同じファネルを流れていくのが見えます。ビュー全体を 1 つのゲームに絞り込んで、ゲーム同士を比較できます。

BananaSeed の問い合わせフォームは今や、すべての訪問者がクリアしなければならない本物の遊べるゲームに守られ、すべての送信は引き続きサーバーで検証されます。出荷しました。🎉

空のアカウントから、検証済みでゲームに守られたフォームまでたどり着きました。

たった今起きたこと

次は何か

ここから最も手を伸ばしそうな領域はこれらです：

• ゲームをカスタマイズする：ゲームの言語、スキン、難易度を設定します。
• セキュリティ：ゲームゲート、proof-of-work の難易度、オリジン、そしてキーの保護の残り。
• 統計とセッション：ファネルを読み、ゲーム同士を比較します。
• アカウント管理：サインイン、アクセストークン、請求、シート。
• チーム：サイトキーを整理し、有料プランでは、チームを招きます。