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

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

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

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

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

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

準備

  1. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    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 (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

    Go to project selector

  2. Enable the reCAPTCHA Enterprise API.

    Roles required to enable APIs

    To enable APIs, you need the Service Usage Admin IAM role (roles/serviceusage.serviceUsageAdmin), which contains the serviceusage.services.enable permission. Learn how to grant roles.

    Enable the API

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

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

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

    デモ ウェブサイトに移動

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

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

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

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

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

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

  6. reCAPTCHA をウェブサイトに統合するパターンについては、サンプルをクリックしてください。

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

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

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

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

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

次のステップ