reCAPTCHA v2

みるくあいらんどっ! > 和訳 > google関係 > reCAPTCHA > docs


  • この記事は、reCAPTCHAに関する記事を和訳したものです。
  • 原文: reCAPTCHA v2
  • 元記事のライセンスは CC-BYで、この和訳記事のライセンスは CC-BYです。
  • 自己責任でご利用ください。
  • 和訳した時期は 2019年6月ころです。

このページでは、あなたのウェブページ上で 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メソッドを呼び出すことができます。

    備考: あなたの onloadコールバック関数は、reCAPTCHA APIが読み込む前に、定義されなければなりません。 競合状態がないことを保証するには:

    • まず、コールバックを伴うあなたのスクリプト、それから reCAPTCHAをオーダーする
    • scriptタグにて、asyncおよび deferパラメータを使用する

構成

JavaScriptリソース(api.js)のパラメータ

パラメータ 値 説明
onload オプション。 ひとたびすべての依存関係が読み込まれたならば実行される、あなたのコールバック関数の名前。
render explicit
onload		 オプション。 ウィジェット明示的にレンダリングするかどうか。 デフォルトは onloadで、それは、それを見つけた最初の g-recaptchaタグ内のウィジェットをレンダリングするでしょう。
hl 言語コードを参照してください オプション。 ウィジェットを、特定の言語にてレンダリングするよう強制します。 もし指定されていなければ、ユーザの言語を自動検出します。

g-recaptchaタグ属性および grecaptcha.renderパラメータ

g-recaptchaタグ属性 grecaptcha.renderパラメータ 値 デフォルト 説明
data-sitekey sitekey あなたのサイトキー。
data-theme theme dark light light オプション。 ウィジェットのカラーテーマ。
data-size size compact normal normal オプション。 ウィジェットのサイズ。
data-tabindex tabindex 0 オプション。 ウィジェットおよびチャレンジの tabindex。 もしあなたのページ内の他の要素が tabindexを使用しているならば、ユーザのナビゲーションをより簡単に行うようセットされる必要があります。
data-callback callback オプション。 ユーザが、成功した応答を送信したときに実行される、あなたのコールバック関数の名前。 g-recaptcha-responseトークンが、あなたのコールバックに渡されます。
data-expired-callback expired-callback オプション。 reCAPTCHAの応答が失効し、ユーザが再検証する必要があるときに実行される、あなたのコールバック関数の名前。
data-error-callback error-callback オプション。 reCAPTCHAがエラー(通常はネットワーク接続)に遭遇し、接続が回復されるまで続行することができないときに実行される、あなたのコールバック関数の名前。 もしここに関数を指定したならば、それらがリトライする必要があることをユーザに通知する必要があります。

JavaScript API

メソッド 説明
grecaptcha.render(
container,
parameters
) 		reCAPTCHAウィジェットとしてコンテナをレンダリングし、新しく作成されたウィジェットの IDを返します。
container
  reCAPTCHAウィジェットをレンダリングするための HTML要素。 コンテナ(文字列)、あるいは DOM要素自体のいずれかを指定します。
parameters
  キー = 値のペアとしてパラメータを含んでいるオブジェクト、例えば、{"sitekey": "your_site_key", "theme": "light"} 。 grecaptcha.renderパラメータを参照してください。
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 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>