Googleの「reCAPTCHA v3」を実装する

Tweet

Category webservice 2019/07/23

問題

GoogleのreCAPTCHA v3 を使いたいです。

スパムコメント、いたずらログイン対策に。

答え

準備

https://www.google.com/recaptcha/intro/v3.html

・右上「Admin console」

・ログインしていなかったらログイン

・「新しいサイトを登録する」

・reCAPTCHA v3 を選択

・サイトキー、シークレットキーが発行されるので控えておく

ブラウザ側実装

https://developers.google.com/recaptcha/docs/v3

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
//jqueryのdocument.readyを使うと
$(function(){
  grecaptcha.ready(function() {
    grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
      // token を hidden にでも入れておく
      $('#hoge').val(token);
    });
  });
});
</script>

<form method="post" action="test.php">
    <button type="submit">送信</button>
    <input type="hidden" id="hoge">
</form

サーバー側実装

ブラウザ側で実装した通りフォームからtokenが送られてくるので、それを
https://www.google.com/recaptcha/api/siteverify に渡して検証してもらう。

<?php
$url = 'https://www.google.com/recaptcha/api/siteverify';
$post_data = array(
        'secret' => 'シークレットキー',
        'response' => $_REQUEST['token'],
        'remoteip' => $_SERVER['REMOTE_ADDR'], // 任意
);
$options = array(
        'http' => array(
                'method' => 'POST',
                'header' => 'Content-type: application/x-www-form-urlencoded',
                'content' => http_build_query($post_data),
        )
);
$context = stream_context_create($options);
$r = json_decode(file_get_contents($url, false, $context));

var_dump($r->success);
var_dump($r->score);

if ($r->success == 1) {
    // 認証成功の処理
} else {
    // 認証失敗の処理
}

Googleからの検証のレスポンスで、successやscoreなどが取得できるので、あとはこちら側で判断する。

メモ（課金について）

料金が発生するのか気になる方もいると思います。

Googleのヘルプによると無料サービスです。

What is reCAPTCHA?（reCAPTCHAとは？）

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse.

（reAPTCHAはGoogleの無料サービスです。ウェブサイトをスパムや不正利用から守ります。）

https://support.google.com/recaptcha/?hl=en