不可視の reCAPTCHA

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


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

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

不可視の reCAPTCHAを呼び出すには、次のいずれかを行うことができます:

不可視の reCAPTCHAをカスタマイズする方法について学ぶには、構成を参照してください。 例えば、言語あるいはバッジの位置を指定したいかもしれません。

ユーザが正常に CAPTCHAを解決したかどうかをチェックするために、ユーザの応答を検証するを参照してください。

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

あなたのページ上に不可視の reCAPTCHAウィジェットを使用するための最も簡単な方法は、必要な JavaScriptリソースをインクルードし、あなたの HTMLボタンに幾つかの属性を追加することです。 必要な属性は、クラス名 'g-recaptcha'、data-sitekey属性にあるあなたのサイトキー、および、data-callback属性にて CAPTCHAの完了を処理するための 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にてチャレンジをレンダリングし、プログラム的に execute を呼び出すことによって、実現することができます。

  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メソッドを呼び出すことができます。

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

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

構成

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

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

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

g-recaptchaタグ属性 grecaptcha.renderパラメータ 値 デフォルト 説明
data-sitekey sitekey あなたのサイトキー。
data-badge badge bottomright bottomleft inline bottomright オプション。 reCAPTCHAバッジを再配置します。 'inline' は、それを CSSを用いて配置させます。
data-size size invisible オプション。 divにバインディングされ、プログラム的に実行される不可視のウィジェットを作成するために使用されます。
data-tabindex tabindex 0 オプション。 ウィジェットおよびチャレンジの tabindex。 もしあなたのページ内の他の要素が tabindexを使用しているならば、ユーザのナビゲーションをより簡単に行うようセットされる必要があります。
data-callback callback オプション。 ユーザが、成功した応答を送信したときに実行される、あなたのコールバック関数の名前。 g-recaptcha-responseトークンが、あなたのコールバックに渡されます。
data-expired-callback expired-callback オプション。 reCAPTCHAの応答が失効し、ユーザが再検証する必要があるときに実行される、あなたのコールバック関数の名前。
data-error-callback error-callback オプション。 reCAPTCHAがエラー(通常はネットワーク接続)に遭遇し、接続が回復されるまで続行することができないときに実行される、あなたのコールバック関数の名前。 もしここに関数を指定したならば、それらがリトライする必要があることをユーザに通知する必要があります。
isolated false オプション。 プラグインの所有者が、ページ上の既存の reCAPTCHAインストールに干渉しないようにします。 もし trueであるならば、この reCAPTCHAインスタンスは、個別の ID空間の一部となるでしょう。

JavaScript API

メソッド 説明
grecaptcha.render(
container,
parameters
inherit
) 		reCAPTCHAウィジェットとしてコンテナをレンダリングし、新しく作成されたウィジェットの IDを返します。
container
  reCAPTCHAウィジェットをレンダリングするための HTML要素。 コンテナ(文字列)、あるいは DOM要素自体のいずれかを指定します。
parameters
  キー = 値のペアとしてパラメータを含んでいるオブジェクト、例えば、{"sitekey": "your_site_key", "theme": "light"} 。 grecaptcha.renderパラメータを参照してください。
inherit
  対応するパラメータが指定されていない場合には、要素上に既存の data-* 属性を使用してください。 パラメータの値は、属性よりも優先されるでしょう。
grecaptcha.execute(
opt_widget_id
) 		プログラム的に reCAPTCHAチェックを呼び出します。 不可視の 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 type="text/javascript">
      
        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>

クライアント側の検証後に、不可視の 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>