技術資料

error この記事は最終更新日から3年以上が経過しています。

問い合わせフォームとかにスパムbotが大量に送信してくるケースがよくあるので、 Google reCAPTCHA v3 の実装方法をメモ。

reCAPTCHA管理画面でサイトを登録

Google reCAPTCHA管理画面でサイトを登録。

サイトキーとシークレットキーが発行されるので、コピーしておく。

HTMLにreCAPTCHAのコードを埋め込む

まず、 head タグ内に以下の script タグを追加。

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

続いて、 form タグ内に以下の input 要素を追加。

<input type="hidden" name="recaptchaToken" id="recaptchaToken">

フォーム送信をトリガーとする、以下の JavaScript を記述。

<script>
document.getElementById('contact_form').addEventListener('submit', onClick);
	
function onClick(e) {
	e.preventDefault();
	grecaptcha.ready(function() {
		grecaptcha.execute('[サイトキー]', {action: 'submit'}).then(function(token) {
			var recaptchaToken = document.getElementById('recaptchaToken');
					recaptchaToken.value = token;
					document.getElementById('contact_form').submit();
		});
	});
}
</script>

上記は、フォームに id="contact_form" を指定している場合の例。

プログラムにreCAPTCHA照合処理を追加

問い合わせフォームの受付プログラムなどに、以下のようなコードを追加。

// recaptchaTokenが送られているかどうか
if(!isset($_POST['recaptchaToken']) || $_POST['recaptchaToken'] == ''){
    // エラー処理
}

$secretKey = 'ここにシークレットキーを入れる';
$verify_result = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['recaptchaToken']);
$verify_result = json_decode($verify_result);
if(!isset($verify_result->success) || $verify_result->success == false || !isset($verify_result->score)){
    // reCAPTCHA認証に失敗。エラー処理
}
// reCAPTCHAから送られてくるscoreの値をチェック
// 0に近いほどbotらしく、1に近いほど人間らしい
// 概ねあからさまなbotのscoreは0.1 あからさまな人間のscoreは0.9として送られてくる
if($verify_result->score < 0.2){
    // bot認定 何らかの処理
}

これだけで結構しっかり弾いてくれるっぽい。