この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:atom
更新日時:2018-11-09 17:33:22

タイトル: reCAPTCHA v3 使い方（サンプル付き）

本稿はreCAPTCHA v3 使い方について説明します。

 

前提

公式ドキュメントは以下のURLを参照。

https://developers.google.com/recaptcha/intro

 

reCAPTCHA v3を使用するにはキー登録が必要となる。

以下のURLからキー登録ができる。

https://g.co/recaptcha/v3

 

headタグ

headタグ内に以下の記述をする。

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

Site keyは自身のものを入力する。

 

formの作成


<form id="test_form" method="POST" action="testAction">

    <!-- 適当な入力値 -->
    <input id="user_name" type="text" name="user_name" />

    <!-- 送信ボタン -->
    <input type="button" value="送信" onclick="commentSubmitFunc()"/>

</form>

<!-- reCAPCTHA -->
<script>
function commentSubmitFunc() {
    grecaptcha.ready(function() {
        grecaptcha.execute('Site Key', {action: 'Action Name'})
        .then(function(token) {
            $('#test_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
            $('#test_form').submit();
        });
    });        
}</script>

formの送信ボタンを押したらgrecaptcha.executeを呼び出すようにする。

その際にtokenをサーバーサイドに渡してやる必要がある。

Action Nameには以下のものが指定できる。（公式サイトより抜粋）

homepage 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.

※どなたか適切な日本語訳をお願いします。

本稿のサンプルではhomepageを指定する。

 

サーバサイドの実装

$gRecaptchaResponse = $_POST["g-recaptcha-response"];
$reCaptchaUrl = "https://www.google.com/recaptcha/api/siteverify?secret=Secret key&response=" . $gRecaptchaResponse;
$response = @file_get_contents($reCaptchaUrl);
$response = json_decode($response,true);

if ($response['success'] != true or $response['score'] < 0.5 ){
    //エラー処理
}

Secret keyは自身のものを入力する。

APIにSecret keyとtokenを渡すことでレスポンスを取得できる。

以下、レスポンスの内容。（公式サイトより抜粋）

{
  "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
}

ポイントはsuccessとscoreの値。

scoreの幅は1.0～0.0で低いほどbotである可能性が高くなる。

この値を見てbotかどうかを判断する必要がある。

※どの程度の値を設定することがベストなのか情報求む。人が操作するとだいたい0.9になることが多いらしい。