チェックボックスキー（チェックボックスチャレンジ）をウェブサイトにインストールする

このページでは、[私はロボットではありません] のチェックボックスによる本人確認を使用してチェックボックスキーをウェブサイトにインストールする方法について説明します。チェックボックスキーの作成時にチャレンジセキュリティオプションを構成した方法によっては、reCAPTCHA Enterprise では有効なトークンを生成する前に、CAPTCHA チャレンジを解決する必要があります。

準備

reCAPTCHA Enterprise の環境を準備します。
チェックボックスキーを作成します。

別の方法としては、次のいずれかの手順で、既存のチェックボックスキーの ID をコピーできます。
- Google Cloud コンソールから既存のチェックボックスのキーの ID をコピーするには、次の操作を行います。
  1. [reCAPTCHA Enterprise] ページに移動します。
    
    [reCAPTCHA Enterprise] に移動
  2. reCAPTCHA キーのリストで、コピーするキーの上にポインタを置き、[] をクリックします。
- REST API を使用して既存の鍵の ID をコピーするには、projects.keys.list メソッドを使用します。
- gcloud CLI を使用して既存の鍵の ID をコピーするには、gcloud recaptcha keys list コマンドを使用します。

フロントエンドで reCAPTCHA ウィジェットをレンダリングする

ウェブページに reCAPTCHA ウィジェットを表示するには、次のいずれかの方法を使用します。

このメソッドにより、g-recaptcha クラスの任意のオブジェクト（div や span など）のウィジェットをレンダリングできます。

ウェブページに、必要な JavaScript リソースと g-recaptcha クラスの HTML 要素を含めます。

g-recaptcha クラスの要素にも、data-sitekey 属性を含め、チェックボックスのキーと同等に設定します。

アクションを指定するには、data-action 属性を含め、アクション名に設定します。詳しいガイダンスについては、アクションをご覧ください。

このスクリプトは、HTTPS プロトコルを使用して読み込む必要があります。スクリプトは、ページの任意の場所から、制限なしで指定できます。

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

次のサンプルコードは、サンプルコードのスニペットです。

    <html>
      <head>
        <title>reCAPTCHA demo: Simple page</title>
        <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
      </head>
      <body>
        <form action="?" method="POST">
          <div class="g-recaptcha" data-sitekey="KEY_ID" data-action="LOGIN"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

このメソッドにより、grecaptcha.enterprise.render() メソッドを使用して既存の JavaScript スクリプトを介してウィジェットをレンダリングできます。このメソッドを使用して、競合状態を回避し、必要な場合は既存の JavaScript ロジックに基づいてウィジェットを表示します。

ウィジェットを明示的にレンダリングするときに競合状態が発生しないように、次の点を確認します。

最初にコールバック関数でスクリプトをオーダーし、次に reCAPTCHA Enterprise API をオーダーします。
script タグで async および defer パラメータを使用します

ウィジェットを明示的にレンダリングする手順は次のとおりです。

ウィジェットのレンダリングを延期する手順は次のとおりです。
1. reCAPTCHA Enterprise API や他の依存関係が読み込まれる前に、onload コールバック関数を指定します。
```
 <script type="text/javascript">
 var onloadCallback = function() {
    alert("grecaptcha is ready!");
 };
 </script>
```
2. コールバック関数の実行後、JavaScript API で次のパラメータを使用する grecaptcha.enterprise.render() メソッドを呼び出します。
  - コンテナ: reCAPTCHA ウィジェットをレンダリングするための HTML 要素。コンテナの ID（文字列）または DOM 要素自体を指定します。
  - パラメータ: パラメータを key=value ペアとして含むオブジェクト。例: {"sitekey"、"KEY_ID"、"theme"、"light"}
  - アクション: 保護された要素に関連付けられたアクション名を指定します。
    
    重要: 指定したアクションは評価の一部として返されます。評価の JSON レスポンスに含まれるアクションが、評価の作成時に指定した、想定されるアクションと一致していることを確認する必要があります。たとえば、ログインページでログインアクションが返されます。不一致が存在する場合は、攻撃者が操作を偽装しようとしていることを示しています。
```
grecaptcha.enterprise.render('html_element', {
   'sitekey' : ' KEY_ID',
   'action': 'LOGIN',
 });
```
ウィジェットをレンダリングするには、JavaScript リソースを挿入します。onload を onload コールバック関数の名前に設定し、render=explicit を含めます。

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

例 1

次のサンプルコードは、onload コールバックの後に明示的なレンダリングを示します。

<html>
   <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
     <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : ' KEY_ID',
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
      <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

例 2

次のコードサンプルは、複数のウィジェットの明示的なレンダリングを示します。

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
        <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.enterprise.render('example1', {
          'sitekey' : 'KEY_ID',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

次のステップ

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

チェックボックス キー（チェックボックス チャレンジ）をウェブサイトにインストールする

準備

フロントエンドで reCAPTCHA ウィジェットをレンダリングする

ウィジェットを自動的にレンダリングする

ウィジェットを明示的にレンダリングする

次のステップ

チェックボックスキー（チェックボックスチャレンジ）をウェブサイトにインストールする