reCAPTCHA v3を試してみた

赤い実

reCAPTCHAの導入からほぼ1年・・。
なんと去年の10月末にreCAPTCHA v3が公開されてた\(^o^)/

公式サイト:https://www.google.com/recaptcha/intro/v3.html
デベロッパーサイト:https://developers.google.com/recaptcha/docs/v3

reCAPTCHA v3はすごいです!なんとあの地味〜に大変だった画像選択がないのです!
閲覧者のページ内での動きをスコアとして算出して、人かbotか判断するという・・すごい。賢い。
設置したページにはアイコンが表示されるだけ。実にシンプル。

設置方法もreCAPTCHA v2とほぼ変わりません。

Step 1:サイトを登録しキーを取得する

公式サイトで利用するサイトを登録して、APIキーを取得します。
キーは、Site key(サイトキー)とSecret key(シークレットキー)の2つが必要になります。

Step 2:フロントエンド

トークンをサーバー側に渡す必要があります。なので、トークンを取得したら「g-recaptcha-response」名でセットし、submitします。
※例ではjQueryを利用しています。

<script src='https://www.google.com/recaptcha/api.js?render=サイトキー'></script>
<script>
$(function(){
    $('.button_send').click(function(e) {
        grecaptcha.ready(function() {
            grecaptcha.execute('サイトキー', {action:'アクション名'}).then(
                function(token) {
                    $('#gToken').val( token );
                    $('#form1').submit();
                },
                function() {
                    console.log( 'token error!' );
                }
            );
        });
    });
});
</script>

<form id="form1" action="./app.php" method="POST">
    <input type="hidden" name="g-recaptcha-response" id="gToken" value="">
    <input type="button" value="Submit" class="button_send">
</form>

アクションは4種類です。利用するものを指定してください。

Recommendation
See a cohesive view of your traffic on the admin console while filtering scrapers.

login
With low scores, require 2-factor-authentication or email verification to prevent credential stuffing attacks.

social
Limit unanswered friend requests from abusive users and send risky comments to moderation.

e-commerce
Put your real sales ahead of bots and identify risky transactions.

Step 3:バックエンド

今回もPHPで受け取ります。scoreの値が人かbotかの判定値です。0.0〜1.0で値が低いほどbot判定になるそうです。ちょうどbotと人との境目が0.5ということなので、0.5以下は弾くようにします。

<?php
$gres = isset( $_POST['g-recaptcha-response'] ) ? $_POST['g-recaptcha-response'] : '';
$ip      = isset( $_SERVER['REMOTE_ADDR'] )      ? $_SERVER['REMOTE_ADDR'] : '';

$data = array(
    'secret'   => 'シークレットキー',
    'response' => $gres,
    'remoteip' => $ip
);

$curl = curl_init();
curl_setopt( $curl, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify' );
curl_setopt( $curl, CURLOPT_POST, true );
curl_setopt( $curl, CURLOPT_POSTFIELDS, http_build_query( $data ) );
curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true );
$res = curl_exec( $curl );

$captcha = json_decode( $res );

if ( $captcha->success == false )
{
    echo '認証に失敗しました。';
}
else if ( $captcha->score <= 0.5 )
{
    echo '認証に失敗しました。';
}
else
{
    echo '認証に成功しました。';
}
?>

scoreの値について色々試した方がいらっしゃいました。ご参考にどうぞ。
reCAPTCHA v3 入れてみた