reCAPTCHA V3の簡単設定メモ

Google reCAPTCHA V3

メール送信フォームのスパム対策で重宝されるGoogle reCAPTCHA。

そのV3では、閲覧者に画像確認ウイジェットが表示されず、バックグラウンドでスパムかどうかの判定をしてくれるスタイリッシュな仕様となっています。

そんな「reCAPTCHA V3」を設定したのでその内容などをメモメモ。

 

reCAPTCHA V3の実装の仕様

「reCAPTCHA V3」の実装の一番シンプルなのは、非同期ajaxとjQueryでごにょごにょしてformの送信ボタンの表示・非表示などで完結させる実装ができると思いますが、それは一般的ではないみたいになので、form側とサーバー側の連携でチェックする方式のをメモしておきます。

送信ボタンを押したらreCAPTCHAのトークンを取得し、フォーム送信プログラム内でそのトークンの判定を行うという感じですね。

なお、実装方法はプログラムをどう組むかの問題なので、パターンはいくらでもあると思います。

Formを表示するhtml側(phpでも可)での設定

 

1 reCAPTCHAのAPIを読み込み

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

2 もともとある入力FORM内のsubmitボタン(input type=”submit”)を非表示か消す ※3のボタンで送信を制御するため

3 reCAPTCHA用の送信ボタンを設置

<button class=”g-recaptcha”
data-sitekey=”サイトキー”
data-callback=’onSubmit’
data-action=’submit’>送信する</button>

3 送信ボタンが押された場合にフォームを送信するスクリプト

<script>
function onSubmit(token) {
document.getElementById(“フォームのID”).submit();
}
</script>

 

メールを送信するスクリプト側での設定

Googleでの説明では、サーバー側での設定という説明になっていますが、要はメールを送信するphpプログラム内でreCaptchaの判定を元に送信するかしないかを制御するスクリプトを追加します。

phpのメール送信プログラムがあることを前提に話しますが、判定→送信の流れはこんな感じになります。

(1) postでreCAPTHCAのトークンを受け取る

(2) そのトークンをreCAPTCHAのAPIに問い合わせて結果をもらう

(3) 結果からメールを送信させるかどうかの条件判定を行う

(4) 条件がOKなら送信プログラムを実行する

自分が利用してる送信プログラムを見て、どこにどうプログラムを入れるかは考えなければなりません。セッションの管理と条件判定の位置などを考えて完璧に組み込もうとするとプログラムの初歩から少し毛が生えた程度の知識が必要かもしれません。

 

サンプルとして、POSTで取得したトークンをAPIに送り、結果のJSONを取得して判定する流れを上げてみます。

 

if ( isset( $_POST[ ‘g-recaptcha-response’ ] ) )
{
$url = ‘https://www.google.com/recaptcha/api/siteverify’;
$data = array(
‘secret’ => シークレットキー, ‘response’ => $_POST[ ‘g-recaptcha-response’ ]
);
$context = array(
‘http’ => array(
‘method’ => ‘POST’,
‘header’ => implode(“\r\n”, array(‘Content-Type: application/x-www-form-urlencoded’,)),
‘content’ => http_build_query($data)
)
);
$api_response = file_get_contents($url, false, stream_context_create($context));
$result = json_decode( $api_response );

if ( $result->success )
{

$score =$result->score;

//スコアによる送信判定処理

if ($score >= 0.5) // 0.5以上なら合格
{

// reCAPTCHAで合格した場合の処理、フラグ立てや送信への流れ

print (“送信前認証に成功しました(スコア$score )”);  // デバッグ用
}
else
{

// reCAPTCHAで不合格判定の場合の処理 エラーフラグ立て等。

print (“スパムと判定されました。”);

}
}

else

{

// 結果の取得ができなかった場合の処理・エラーフラグなど

$error_flag = 1;

}

}

Google reCAPTCHA V3では、スパム判定のスコア(0.0~1.0)を取得できますので、そのスコアで送信するかどうかを決めればいいと思います。

《参考》APIから戻って来るresponse(Site Verify 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
}

なお、余談ではありますが、responseで取得するキーの”success”の値なんですが、デバッグ的に$json -> successを表示させると”1″になりますね。てっきり”true”なのかと思いきや”1”です。バグってるのかと無駄な時間を使いましたが、PHPでは、true=1であってるそうです・・・。ちなみにfalseは””みたいな。

コメント