デモ ウェブサイトで reCAPTCHA をテストする

このドキュメントでは、reCAPTCHA と統合された サンプル ウェブサイトである Google Cloudにデモ ウェブサイトをデプロイして、reCAPTCHA の仕組みを 理解する方法について説明します。

デモ ウェブサイトでは、次のことを行えます。

  • reCAPTCHA を使用したユーザー エクスペリエンスを理解する。
  • 独自のアプリケーションに reCAPTCHA を統合する際の参照として使用する。
  • サンプル アプリケーションのソースコードを編集して、さまざまなフロントエンドとバックエンドのアプローチを試す。

デモ ウェブサイトを、Java、Node.js、または Python のいずれかの言語でデプロイできます。

プロジェクトの場合、一度にデプロイできるデモ ウェブサイトは 1 つのみです。 Google Cloud

始める前に

  1. コンソールのプロジェクト セレクタページで、プロジェクトを選択または作成します。 Google Cloud Google Cloud

    プロジェクトを選択または作成するために必要なロール

    • プロジェクトを選択する: プロジェクトの選択に特定の IAM ロールは必要ありません。ロールが付与されているプロジェクトを選択できます。
    • プロジェクトを作成する: プロジェクトを作成するには、プロジェクト作成者ロール （roles/resourcemanager.projectCreator）が必要です。これには resourcemanager.projects.create 権限が含まれています。詳しくは、ロールを付与する方法をご覧ください。

    プロジェクト セレクタに移動

  2. reCAPTCHA Enterprise API を有効にします。

    API を有効にするために必要なロール

    API を有効にするには、serviceusage.services.enable 権限を含む Service Usage 管理者 IAM ロール（roles/serviceusage.serviceUsageAdmin）が必要です。詳しくは、ロールを付与する方法をご覧ください。

    API の有効化

  3. プロジェクトに次のロールが割り当てられていることを確認します: reCAPTCHA Enterprise 管理者、reCAPTCHA Enterprise エージェント

    ロールを確認する

    1. コンソールで、[IAM] ページに移動します。 Google Cloud

      IAM に移動
    2. プロジェクトを選択します。

    3. [Principal] 列で、自分または自分が所属するグループの行をすべて確認します。所属するグループについては、管理者にお問い合わせください。

    4. 自分のメールアドレスを含む行の [**ロール**] 列で、ロールのリストに必要なロールが含まれているかどうか確認します。

    ロールを付与する

    1. コンソールで、[IAM] ページに移動します。 Google Cloud

      IAM に移動
    2. プロジェクトを選択します。
    3. [**アクセスを許可**] をクリックします。

    4. [新しいプリンシパル] フィールドに、ユーザー ID を入力します。 これは通常、Google アカウントのメールアドレスです。

    5. [**ロールを選択**] をクリックして、ロールを検索します。
    6. 追加のロールを付与するには、 [Add another role] をクリックして各ロールを追加します。
    7. [保存] をクリックします。

  4. すでにデモウェブサイトをデプロイしている場合は、関連するデモキーを削除します。

デモウェブサイトをデプロイする

  1. コンソールで、デモウェブサイトのページに移動します。 Google Cloud

    デモ ウェブサイトに移動

  2. [言語] リストで言語を選択します。

    デプロイ プロセス全体は 1 分ほどかかります。

  3. プロンプトが表示されたら、認証情報を使用して Cloud Shell に API 呼び出しを実行することを承認します。

  4. 新しいデモの [キーの詳細] ページに移動するには、[サイトを表示] をクリックします。

  5. デモウェブサイトを表示するには、[フロントエンド] カードで [サンプル ウェブページを表示] をクリックします。

    デモ ウェブサイトが別のタブで開きます。

  6. ウェブサイトに reCAPTCHA を統合するパターンを確認するには、例をクリックします。

  7. デモウェブサイトに変更を加える方法は次のとおりです。

    1. [キーの詳細] ページで、[ソースを編集] をクリックします。

    2. Cloud Shell エディタの [エクスプローラ] で必要なファイルを見つけて、必要に応じて編集します。

      ソースコードに対する保存済みの変更がデモウェブサイトに再読み込みされます。

    Cloud Shell エディタは Cloud Shell を閉じてデモウェブサイトを停止するため、閉じないでください。

次のステップ