迷惑メール対策でフォームにGoogle reCAPTCHA v2を導入する方法
2024/03/27
お問い合わせフォームのスパムメール対策としてreCAPTCHAを導入したいという案件があった。WordPressだとプラグイン等で簡単に入れられた気がするものの、本件はバニラPHPで作成されたフォームだった。そのためバニラPHPでreCAPTCHA設置方法をメモ。
Google reCAPTCHAでサイト登録を行う
以下ページにGoogleアカウントでログインし、reCAPTCHAを導入したいサイトを登録する。
https://www.google.com/recaptcha/admin/
v2とv3の2つバージョンあり、今回はv2を使用した。
尚、v2だとセキュリティ設定というものが行えるようで「セキュリティ重視」にするとフォーム送信前に毎回画像認証を迫られるようになる。
スパム対策と通常ユーザーの利便性を考慮し適宜設定を変更する。
サンプル
https://taitan916.info/sample/recaptcha/
ソース
サイトを登録するとサイトキー及びシークレットキーが発行されるので、そちらの情報を元に以下ソースで対応が可能。
<?php
$r_site_key = ''; //reCAPTCHA サイトキー
$r_secret_key = ''; //reCAPTCHA シークレットキー
if( isset($_POST['name']) ){
$res = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $r_secret_key . '&response=' . $_POST['g-recaptcha-response']);
$result = json_decode($res);
if( $result->success ){
//認証成功時の処理
}else{
//認証失敗時の処理
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Recaptcha サンプルページ</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('recaptcha_area', {
'sitekey' : '<?php echo $r_site_key ?>'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</head>
<body>
<form class="form" method="post">
<input type="text" name="name"><br>
<div id="recaptcha_area"></div><br>
<input type="submit" value="送信">
</form>
</body>
バージョンの違い
v2はよく見かける画像認証だがv3は認証が入らず、また、Google側が判断した上でスコアと呼ばれる指標を返してくれるといった流れになる。
最初はv3の方が新しいバージョンで通常ユーザーの利便性を損なわない為、こちらを実装しようと思い検証したもののどうもスコアの基準がよく分からない。
まず、特に何も意識せずにフォーム送信を行ったところ「0.9」というスコアが返ってきた。
次にユーザーエージェント偽装、同じページで何度もフォーム送信、テキストエリア内にjavascriptタグを入力等を行ったがいずれも「0.9」というスコアとなった。
reCAPTCHA実装後、すぐにスパム対策として動作するか微妙に思えたので今回はv2を選択した。
尚、v3を導入するとページ右下にロゴのようなものが表示される。割と目立つのでデザイン重視のサイトだとあまりよろしくないかもしれない。
関連記事
-
-
CodeIgniter4 & reCAPTCHA でお問い合わせフォームを作成する方法
以前CodeIgniter4.4.4で簡易的なお問い合わせページを作成したが、今 ...
-
-
reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法
reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...
-
-
formにGoogle reCAPTCHA v3を組み込み、PHPでスコア判定する方法
だいぶ前にGoogle reCAPTCHA v2をformに組み込むという記事を ...