reCAPTCHA v3の導入方法 - tapitapi’s blog

f:id:kayo445:20201024163601j:plain

f:id:kayo445:20201024163626j:plain

f:id:kayo445:20201024163805j:plain

というわけで、今回はreCAPTCHA V3の導入方法を紹介していきます

1. reCAPTCHA v2とv3の違い

2. v3の導入方法：概要

3. v3の導入方法：2つのKey取得

4. v3の導入方法：フロントエンドのコーディング(JS)

5. v3の導入方法：バックエンドのコーディング(PHP)

1. reCAPTCHA v2とv3の違い

v2はこんな感じで、クリックしたり、「電車の画像を選べ」みたいな、めちゃむずな問題に答えないとダメだった、、、

f:id:kayo445:20201024164001g:plain

v3はユーザのサイト内の動きを見て、勝手にスコアをつけてくれる！

（仕組みはよくわかんないけど、googleさんすごい！！）

スコアは０から１の範囲でつけてくれる。

f:id:kayo445:20201024164425p:plain

ドキュメントはこちら

developers.google.com

ローカルでやってみたところ、0.9がつきました！

本番環境じゃないとフルスコアは出ないのかも、、？

f:id:kayo445:20201024171019p:plain

2. v3の導入方法：概要

大まかにreCAPTCHAのスコア判定方法はこんな感じ

＊フロントで、reCAPTCHAでスコア判定を入れたいformに、下記のinputを追加して、一緒にPOST送信する

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<input type="hidden" name="action" value="validate_captcha">

＊この時、name="g-recaptcha-response"のinputのvalue(以降トークンと呼ぶ)は、JSで動的に取得する。

そのために、事前にgoogleアカウントで取得していたKey1(以降サイトキーと呼ぶ)を使用

＊formのsubmitで情報を受け取ったバックで、受け取ったトークンと、事前にgoogleアカウントで取得していたKey2(以降シークレットキーと呼ぶ)を使用して、https://www.google.com/recaptcha/api/siteverify

宛にAPI通信し、スコアを取得する

以降、具体的な方法を紹介します

3. v3の導入方法：2つのKey取得

下記にアクセス

https://www.google.com/recaptcha/admin/create

ラベルや、ドメインを指定して「送信」

f:id:kayo445:20201024170733p:plain

二つのKeyが取得できるので、メモっておく

（後から確認できないので、この時にメモるの忘れないでーー）

f:id:kayo445:20201024171137p:plain

4. v3の導入方法：フロントエンドのコーディング(JS)

＊reCAPTCHAでスコア判定を入れたいformに、下記のinputを追加

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<input type="hidden" name="action" value="validate_captcha">

＊ヘッダとかに、下記を追加（トークン発行のため）

<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>

＊Bodyの最後とかに、下記を追加（これで、g-recaptcha-responseのvalueに、トークンが設定される）

<script>
grecaptcha.ready(function() {
　grecaptcha.execute('サイトキー', {action: 'submit'}).then(function(token) {
　var recaptchaResponse = document.getElementById('g-recaptcha-response');
　recaptchaResponse.value = token;
　});
});
</script>

5. v3の導入方法：バックエンドのコーディング(PHP)

今回はPHP のコードを紹介します。

ですが、やっていることは、

＊送られてきたトークンと、シークレットキーを使って

https://www.google.com/recaptcha/api/siteverify

宛にAPIリクエスト（POST）を送信

＊返ってきたレスポンス(JSON)に含まれているスコアをみて、0.5以下ならアクセス拒否する。レスポンスはこんな感じ

{
"success": true|false,
"score": number
"action": string
"challenge_ts": timestamp,
"hostname": string,
"error-codes": [...] // optional
}

なので、他の言語でも同様に実装可能です

phpのコード例

// トークンが空ではないか判定
if (isset($_POST["g-recaptcha-response"]) && !empty($_POST["g-recaptcha-response"])) {
$token =$_POST["g-recaptcha-response"];
} else {
echo "トークンが空です";
exit;
}

$secretKey = "シークレットキー";

//API Request URL
$url = 'https://www.google.com/recaptcha/api/siteverify';

//パラメータを指定
$data = array(
'secret' => $secretKey,
'response' => $token
);

$context = array(
'http' => array(
'method' => 'POST', // 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));

//レスポンス（JSON形式）をデコード
$result = json_decode($api_response);

if (!$result->success) {
// リキャプチャの認証に失敗したらBotと判定。
echo '<h2>認証失敗しました。</h2>';

} else if ($result->success==true && $result->score <= 0.5) {
// リキャプチャの認証に成功しても、スコアが一定以下であればBotと判定。
echo '<h2>認証失敗しました。</h2>';

} else {

// リキャプチャの認証に成功したときの処理

}