reCAPTCHA v2

このページでは、reCAPTCHA v2 ウィジェットをウェブページに表示し、カスタマイズする方法について説明します。

ウィジェットを表示するには、次のいずれかを行います。

ウィジェットをカスタマイズする方法については、設定をご覧ください。たとえば、ウィジェットの言語またはテーマを指定できます。

ユーザーが CAPTCHA を正常に解決したかどうかを確認するには、ユーザーのレスポンスを確認するをご覧ください。

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

reCAPTCHA ウィジェットをページにレンダリングする最も簡単な方法は、必要な JavaScript リソースと g-recaptcha タグを含めることです。g-recaptcha タグは、クラス名が g-recaptcha であり、data-sitekey 属性にサイトキーが設定されている div 要素です。

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

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

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

レンダリングの延期は、onload コールバック関数を指定し、JavaScript リソースにパラメータを追加することで実現できます。

  1. onload コールバック関数を指定します。この関数は、すべての依存関係が読み込まれたときに呼び出されます。

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. JavaScript リソースを挿入し、onload パラメータを onload コールバック関数の名前に設定し、render パラメータを explicit に設定します。

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

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

構成

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

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

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

g-recaptcha タグの属性 grecaptcha.render パラメータ 値 デフォルト 説明
データのサイトキー サイトキー サイトキー。
data-theme テーマ ダークライト ライト （省略可）ウィジェットのカラーテーマ
データサイズ サイズ コンパクト ノーマル ノーマル （省略可）ウィジェットのサイズ
data-tabindex tabIndex 0 （省略可）ウィジェットとチャレンジの tabindexページ内の他の要素が tabindex を使用する場合、ユーザー ナビゲーションを容易にするために設定する必要があります。
データ コールバック callback 省略可。ユーザーが成功の応答を送信したときに実行されるコールバック関数の名前。g-recaptcha-response トークンがコールバックに渡されます。
データ期限切れのコールバック expired-callback （省略可）コールバック関数の名前。reCAPTCHA レスポンスの有効期限が切れ、ユーザーが再確認する必要があるときに実行されます。
データエラー コールバック エラー コールバック （省略可）reCAPTCHA がエラー（通常はネットワーク接続）を検出し、接続が復元されるまで続行できないときに実行されるコールバック関数の名前。ここで関数を指定すると、ユーザーに再試行を促す通知を行う必要があります。

JavaScript API

メソッド 説明
grecaptcharender（
コンテナ
パラメータ
）		 コンテナを reCAPTCHA ウィジェットとしてレンダリングし、新しく作成されたウィジェットの ID を返します。
コンテナ
reCAPTCHA ウィジェットをレンダリングするための HTML 要素。コンテナの ID（文字列）または DOM 要素自体を指定します。
パラメータ
Key-Value ペアとしてパラメータを含むオブジェクト（例: {"sitekey": "your_site_key", "theme": "light"}）。grecaptcha.render パラメータをご覧ください。
grecaptchareset（
opt_widget_id
）		 reCAPTCHA ウィジェットをリセットします。
opt_widget_id
  オプションのウィジェット ID。指定されていない場合のデフォルトは最初に作成されたウィジェット。
grecaptchagetResponse（
opt_widget_id
）		 reCAPTCHA ウィジェットのレスポンスを取得します。
opt_widget_id
  オプションのウィジェット ID。指定されていない場合のデフォルトは最初に作成されたウィジェット。

例

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

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

複数のウィジェットの明示的なレンダリング

<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.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>