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

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

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

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

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

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

始める前に

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

    Roles required to select or create a project

    • Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
    • Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

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

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

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

    API の有効化

  3. プロジェクトに次のロール（複数の場合あり）が割り当てられていることを確認します。 reCAPTCHA Enterprise Admin, reCAPTCHA Enterprise Agent

    ロールを確認する

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

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

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

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

    ロールを付与する

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

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

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

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

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

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

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

    デモ ウェブサイトに移動

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

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

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

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

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

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

  6. ウェブサイトに reCAPTCHA を統合するパターンについては、例をご覧ください。

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

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

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

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

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

次のステップ