勉強したことのメモ

webプログラマが勉強したことのメモ。

迷惑メール対策でフォームにreCAPTCHAを導入する方法

      2020/06/09

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件があった。WordPressだとプラグイン等で簡単に入れられた気がするものの、WPで製作されたサイトではなかった。以下に設置方法のメモ。

 

Google reCAPTCHAでサイト登録を行う

以下ページにGoogleアカウントでログインし、reCAPTCHAを導入したいサイトを登録する。

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

v2とv3の2つバージョンあり、今回はv2を使用した。

尚、v2だとセキュリティ設定というものが行えるようで「セキュリティ重視」にするとフォーム送信前に毎回画像認証を迫られるようになる。

スパム対策と通常ユーザーの利便性を考慮し適宜設定を変更する。

 

ソース

サイトを登録するとサイトキー及びシークレットキーが発行されるので、そちらの情報を元に以下ソースで対応が可能。

<?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>

 

以下がサンプルページとなる。

https://sample.taitan916.info/recaptcha/

 

バージョンの違い

v2はよく見かける画像認証だがv3は認証が入らず、また、Google側が判断した上でスコアと呼ばれる指標を返してくれるといった流れになる。

最初はv3の方が新しいバージョンで通常ユーザーの利便性を損なわない為、こちらを実装しようと思い検証したもののどうもスコアの基準がよく分からない。

まず、特に何も意識せずにフォーム送信を行ったところ「0.9」というスコアが返ってきた。

次にユーザーエージェント偽装、同じページで何度もフォーム送信、テキストエリア内にjavascriptタグを入力等を行ったがいずれも「0.9」というスコアとなった。

reCAPTCHA実装後、すぐにスパム対策として動作するか微妙に思えたので今回はv2を選択した。

尚、v3を導入するとページ右下にロゴのようなものが表示される。割と目立つのでデザイン重視のサイトだとあまりよろしくないかもしれない。

 - PHP, JavaScript

  関連記事

JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

PHPでdatetime型を分割する

datetime型を年月日時分秒でそれぞれに 分割させたい時に、今まではいちいち ...

URLのクエリを取得

<? /* 通常であれば$_GETとかで取得するが、 http://tes ...

ガラケーorスマフォ判別

ガラケーとスマフォの判別。 やりたい事はガラケーorスマフォで条件分岐させたい。 ...

さくらvpsでPHPのエラーログ設定

PHPのエラーログを設定した際のメモ。 vi /etc/php.ini で設定フ ...

jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

CKEditor(WYSIWYGエディタ)の設置方法と日本語化

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...