非表示の reCAPTCHA

このページでは、ウェブページで invisible reCAPTCHA を有効にしてカスタマイズする方法について説明します。

invisible reCAPTCHA を呼び出すには、次のいずれかを行います。

invisible reCAPTCHA をカスタマイズする方法については、構成をご覧ください。たとえば、言語やバッジの場所を指定できます。

ユーザーがキャプチャを正しく解決したかどうかを確認するには、ユーザーの返信を確認するをご覧ください。

チャレンジをボタンに自動的にバインドします

invisible reCAPTCHA ウィジェットをページで使用する最も簡単な方法は、必要な JavaScript リソースを含め、いくつかの属性を html ボタンに追加することです。必要な属性は、クラス名「g-recaptcha」、data-sitekey 属性内のサイトキー、data-callback 属性内のキャプチャの完了を処理する JavaScript コールバックの名前です。

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

スクリプトは、HTTPS プロトコルを使用して読み込む必要があり、ページの任意のポイントから制限なく含めることができます。

チャレンジをプログラムでボタンにバインドするか、チャレンジを呼び出します。

バインディングを延期するには、onload コールバック関数を指定し、JavaScript リソースにパラメータを追加します。これは、通常の reCAPTCHA チャレンジと同じように機能します。

チャレンジをプログラムで呼び出します。

reCAPTCHA 検証をプログラムで呼び出すには、属性 data-size="invisible" を使用して div でチャレンジをレンダリングし、プログラムで実行を呼び出します。

  1. data-size="invisible" を使って div を作成します。

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. JavaScript メソッドから grecaptcha.execute を呼び出します。

    grecaptcha.execute();

    コールバックの実行時に、JavaScript API から grecaptcha.render メソッドを呼び出すことができます。

設定

JavaScript リソース（api.js）パラメータ

パラメータ 値 説明
onload （省略可）すべての依存関係が読み込まれると実行されるコールバック関数の名前。
レンダリング 明示的
onload		 （省略可）ウィジェットを明示的にレンダリングするかどうか。デフォルトは onload で、検出された最初の g-recaptcha タグでウィジェットがレンダリングされます。
hl 言語コードをご覧ください （省略可）ウィジェットを特定の言語で強制的にレンダリングします。指定されていない場合はユーザーの言語を自動検出します。

g-recaptcha タグの属性と grecaptcha.render パラメータ

g-recaptcha タグの属性 grecaptcha.render パラメータ 値 デフォルト 説明
データのサイトキー サイトキー サイトキー。
データバッジ バッジ bottomright bottomleft inline bottomright （省略可）reCAPTCHA バッジの位置を変更します。「inline」を使用すると、CSS を使用して要素を配置できます。
data-size size invisible （省略可）div にバインドされ、プログラムによって実行される非表示のウィジェットを作成するために使用します。
data-tabindex tabIndex 0 （省略可）チャレンジの tabindex。ページ内の他の要素が tabindex を使用する場合、ユーザー ナビゲーションを容易にするために設定する必要があります。
データ コールバック callback 省略可。ユーザーが成功の応答を送信したときに実行されるコールバック関数の名前。g-recaptcha-response トークンがコールバックに渡されます。
データ期限切れのコールバック expired-callback （省略可）コールバック関数の名前。reCAPTCHA レスポンスの有効期限が切れ、ユーザーが再確認する必要があるときに実行されます。
データエラー コールバック エラー コールバック （省略可）reCAPTCHA がエラー（通常はネットワーク接続）を検出し、接続が復元されるまで続行できないときに実行されるコールバック関数の名前。ここで関数を指定すると、ユーザーに再試行を促す通知を行う必要があります。
孤立 false （省略可）プラグインの所有者が、ページ上での既存の reCAPTCHA のインストールを妨げないようにします。true の場合、この reCAPTCHA インスタンスは個別の ID 空間の一部になります。

JavaScript API

メソッド 説明
grecaptcha.render（
コンテナ
パラメータ、
継承
） 		コンテナを reCAPTCHA ウィジェットとしてレンダリングし、新しく作成されたウィジェットの ID を返します。
コンテナ
reCAPTCHA ウィジェットをレンダリングするための HTML 要素。コンテナの ID（文字列）または DOM 要素自体を指定します。
パラメータ
パラメータを Key-Value ペアとして含むオブジェクト（例: {"sitekey": "your_site_key", "theme": "light"}）。grecaptcha.render パラメータをご覧ください。
継承
対応するパラメータが指定されていない場合は、要素で既存の data-* 属性を使用します。パラメータは属性よりも優先されます。
grecaptcha.execute(
opt_widget_id
） 		reCAPTCHA チェックをプログラムで呼び出します。invisible reCAPTCHA がボタンではなく div 上にある場合に使用されます。
opt_widget_id
  オプションのウィジェット ID。指定されていない場合のデフォルトは最初に作成されたウィジェット。
grecaptcha.reset（
opt_widget_id
） 		reCAPTCHA ウィジェットをリセットします。
opt_widget_id
  オプションのウィジェット ID。指定されていない場合のデフォルトは最初に作成されたウィジェット。
grecaptcha.getResponse（
opt_widget_id
） 		reCAPTCHA ウィジェットのレスポンスを取得します。
opt_widget_id
  オプションのウィジェット ID。指定されていない場合のデフォルトは最初に作成されたウィジェット。

例

onload コールバック後の明示的なレンダリング

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

クライアントサイドの検証後に invisible reCAPTCHA チャレンジを呼び出す。

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>