reCAPTCHAの設定方法

PR

reCAPTCHAを使いたいという声をいただき、reCAPTCHAの設置方法、設定方法のリファレンスです。

reCAPTCHAの公式ウェブサイト(wesite)であるdevelopers.google.com/recaptcha/もありますが、こちらの方がわかりやすいと思います。
reCAPTCHAの公式ウェブサイト(wesite)です。
google.com/recaptcha

reCAPTCHA API keys
HTMLテンプレートの終了タグ</head>の前にこのスニペットを貼り付けます。

<script src='https://www.google.com/recaptcha/api.js'></script>

reCAPTCHAをフォームに入れ込みたい場合は<form>の最後にこのスニペットを貼り付けます。

<div class="g-recaptcha" data-sitekey="サイト用のAPIキー"></div>

When your users submit the form where you integrated reCAPTCHA, you’ll get as part of the payload a string with the name “g-recaptcha-response”.
In order to check whether Google has verified that user, send a POST request with these parameters:
URL: https://www.google.com/recaptcha/api/siteverify
secret (required) 秘密のキー
response (required) The value of ‘g-recaptcha-response’.
remoteip The end user’s ip address.

Invisible reCAPTCHA(見えないリキャプチャorリカプチャ)というものを選択すれば、ユーザーなどに見えない感じでreCAPTCHAがバックグランドで動きます。

リファレンスはグーグル(google)reCAPTCHAの公式ウェブサイト(wesite)よりそのまま貼り付けます。

Frontend integration

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
...
});
});
</script>

Actions

<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'});
});
</script>

API Response

{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}

ちなみにツイッター(Twitter)などのSNSにもreCAPTCHAを設置できたりもします。

reCAPTCHA v3 Betaで、将来変更される場合などがありますが、ご興味のある方はどうぞ。

reCAPTCHA: Tough on Bots, Easy on Humans Google Webmasters

Since the launch of the no CAPTCHA reCAPTCHA, a simple checkbox has helped identify humans from even the sneakiest bots, stopping billions of attacks on websites around the world. Now we're taking reCAPTCHA a step further and making it invisible. Sign up at https://g.co/recaptcha/invisible for future updates and set-up instructions.

reCAPTCHA