- この記事は、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リソースにパラメータを追加することによって、達成される可能性があります。
-
あなたの onloadコールバック関数を指定します。
この関数は、すべての依存関係が読み込まれたときに読み出されるでしょう。
<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
-
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>