ポリシーベースのチャレンジキーをウェブサイトにインストールする

このページでは、ポリシーベースのチャレンジキーをウェブサイトにインストールする方法について説明します。ポリシーベースのチャレンジ キーを使用すると、reCAPTCHA はスコアのしきい値とチャレンジの難易度に基づいて CAPTCHA チャレンジを決定論的にトリガーできます。

始める前に

  1. reCAPTCHA 用に環境を準備します。

  2. ポリシーベースのチャレンジ キーを作成します。

    あるいは、次のいずれかの手順で、既存のポリシーベースのチャレンジ キーの ID をコピーできます。

    • Google Cloud コンソールから既存のキーの ID をコピーするには、次の操作を行います。

      1. [reCAPTCHA] ページに移動します。

        [reCAPTCHA] に移動

      2. reCAPTCHA キーのリストで、コピーするキーの上にポインタを置き、[] をクリックします。
    • REST API を使用して既存のキーの ID をコピーするには、projects.keys.list メソッドを使用します。
    • gcloud CLI を使用して既存のキーの ID をコピーするには、gcloud recaptcha keys list コマンドを使用します。

ポリシーベースの確認キーを構成する

ポリシーベースのチャレンジキーでは、CAPTCHA チャレンジの複雑さと頻度を決定するチャレンジの難易度を指定し、デフォルトのしきい値をオーバーライドする特定のアクションのカスタム スコアしきい値を定義する必要があります。

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

    [reCAPTCHA] に移動

    [reCAPTCHA] ページには、[テーブル] ビューと [カード] ビューの 2 つのビューがあります。プロジェクトに reCAPTCHA キーが多数ある場合は、[テーブル] ビューのみを使用できます。

  2. ページの上部にあるリソース セレクタにリソース名が表示されていることを確認します。

    プロジェクトの名前が表示されない場合は、リソース セレクタをクリックしてプロジェクトを選択します。

  3. [reCAPTCHA キー] セクションで、構成するポリシーベースのチャレンジキーを特定し、そのキーをクリックします。

  4. [キーの詳細] ページで、[概要] タブに移動します。

  5. [構成] セクションで、[チャレンジの設定] の [構成] をクリックします。

  6. [チャレンジ設定を構成する] ページで、チャレンジの難易度を選択します。

  7. CAPTCHA チャレンジをトリガーするには、スライダーを使用してデフォルトのしきい値を指定します。

    デフォルトのしきい値 0.0 では、チャレンジはトリガーされません。1.0 は、リクエストごとにチャレンジをトリガーします。

  8. 個々のアクションのカスタムスコアのしきい値を構成して、デフォルトのしきい値をオーバーライドするには、次の操作を行います。

    1. アクション名を入力します。

    2. カスタム スコアしきい値を指定するには、[アクションしきい値を設定] スライダーを使用します。

    3. [完了] をクリックします。

  9. [保存] をクリックします。

HTML ボタンに reCAPTCHA を追加する

  1. ウェブページに reCAPTCHA を読み込むには、ポリシーベースのチャレンジキーを使用して JavaScript API をウェブページの <head></head> 要素内に追加します。

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    reCAPTCHA は、デフォルトでブラウザの言語を使用します。別の言語を指定する場合は、スクリプトで hl=LANG 属性を使用します。たとえば、フランス語を使用するには、<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script> で指定します。サポートされている言語については、reCAPTCHA の言語コードをご覧ください。

  2. 単純な HTML ボタンに reCAPTCHA を追加する手順は次のとおりです。

    1. トークンを処理するコールバック関数を定義します。

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      詳細については、requestSubmit() メソッドをご覧ください。

    2. html ボタンに属性を追加します。

      <button class="g-recaptcha"
data-sitekey="KEY_ID"
data-callback="onSubmit"
data-action="submit">Submit</button>

      バッジの位置を指定する場合は、class=g-recaptcha を持つ要素の data-badge=LOCATION 属性を使用します。デフォルトの場所は bottomright に設定されています。その他の可能な値は inline と bottomleft です。

    3. サイトでのフォームの送信にこのボタンを使用すると、g-recaptcha-response POST パラメータにレスポンス トークンが含まれます。

  3. トークンが生成された後、reCAPTCHA トークンをバックエンドに送信し、2 分以内に評価を作成します。

次のステップ

  • reCAPTCHA の応答トークンを評価するため、評価を作成する。