WEB/システム/IT技術ブログ

GoogleのreCAPTCHA(v3)を利用してフォームのスパム対策

最近の世界情勢の影響なのかスパムが多くなった気がするので、reCAPTCHAを使ってフォームのスパム対策を実装してみます。

reCAPTCHAとはGoogleが提供するスパム対策サービスです。
reCAPTCHA  |  Google Developers

お問い合わせフォームや、会員登録フォームなどに設置される「私はロボットではありません」チェックボックスや、9枚ほど画像が表示されて「この中から車の画像を全て選択してください」というやつですね。
これらはreCAPTCHA v2で、ユーザの操作や判断の手間が1つ増えることになります。人によっては、この手間が不快に感じる方もいらっしゃるはずです。コンバージョン率低下の懸念がありますね。
それに対して、reCAPTCHA v3はプログラム側(AI)でスパムかどうかを判断するので、ユーザへの影響はほとんどありません。

サイト登録

Goolgeアカウントでサインインした状態で、以下のページにアクセスします。
reCAPTCHA
メニュー「v3 Admin Console」をクリックして、サイトを登録します。

  • ラベルには任意で分かりやすいラベル名をセットします
  • reCAPTCHAタイプは「reCAPTCHA v3」を選択します
  • ドメインにはAPIを使用するドメインをセットします。ローカルで開発、テストなどする場合は「localhost」も有効です。

利用条件に同意して送信します。送信時に発行される「サイトキー」と「シークレットキー」を控えておきます。

フロント側の実装

対象となるページに以下のスクリプトを埋め込みます。パラメータ「render」には取得したサイトキーをセットします。

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

例えば「id=”form”」のformタグ内に取得したトークンを保持するためのhiddenタグを用意しておきます。

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

次にフォーム送信ボタン押下時に、トークンを取得し、上のhiddenタグにセットするスクリプトを実装します。こちらにもサイトキーをセットします。

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

フロントの実装は以上です。

サーバ側の実装

フロントからのリクエストをキャッチしたサーバサイドのPHP処理です。
フロントで取得したトークンとシークレットキーをパラメータに、APIに認証をリクエストします。

if(isset($_POST["recaptchaResponse"]) && !empty($_POST["recaptchaResponse"])){
	$res_json = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . (シークレットキー) . "&response=" . $_POST["recaptchaResponse"]);
	$res = json_decode($res_json);
	if($res->success){	// 認証成功
		if($res->score > 0.5){
			// 0.5点より上は正常処理
		}else{
			// スパム判定
		}
	}else{
		// 認証エラー
	}
}

認証に成功するとsuccessにtrueがセットされます。
同時に、0~1点のスコアが返ってくるので、このスコアを元にスパムかどうかを判定します。
0点に近いほど、スパムである疑いが強いです。判定基準は任意で、この例では0.5点より大きければ「スパムではない」と判断しています。

ちなみに、先ほどのreCAPTCHA管理画面で、何件アクセスがあったのか、各スコアがどうだったのかななど、解析レポートを確認することができます。

B!

Comment

コメントはありません

コメントする

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives