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

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

始める前に

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

別の方法としては、次のいずれかの手順で、既存のチェックボックスキーの ID をコピーできます。
- Google Cloud コンソールから既存のチェックボックスのキーの ID をコピーするには、次の操作を行います。
  1. [reCAPTCHA] ページに移動します。
    
    [reCAPTCHA] に移動
  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 は、デフォルトでブラウザの言語を使用します。別の言語を指定する場合は、スクリプトで hl=LANG 属性を使用します。たとえば、フランス語を使用するには、<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script> で指定します。サポートされている言語については、reCAPTCHA の言語コードをご覧ください。

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

    <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 API でスクリプトを並べ替えます。
script タグで async および defer パラメータを使用します

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

ウィジェットのレンダリングを延期する手順は次のとおりです。
1. reCAPTCHA 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 は、デフォルトでブラウザの言語を使用します。別の言語を指定する場合は、スクリプトで hl=LANG 属性を使用します。たとえば、フランス語を使用するには、<script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script> で指定します。サポートされている言語については、reCAPTCHA の言語コードをご覧ください。
```
 <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 ウィジェットをレンダリングする

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

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

次のステップ

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