reCAPTCHAの導入

うーんと昔に作ったシステムで、スパム投稿に困ってる!というSOSを受けて、Googleの「reCAPTCHA」を導入することにしました。導入はとっても簡単でしたが、一点つまづいたので、ここに記入しておきます。

Google reCAPTCHAのページからサイトを登録して、APIキーを取得します。Googleアカウントを持っていない人は、Googleアカウントの取得からになります。

「Get reCAPTCHA」のリンクから登録画面に飛びます。

reCAPTCHAの導入

Label】は管理用の名前を記入します。日本語でも大丈夫です。
Choose the type of reCAPTCHA】は使いたいキャプチャの種類を選択します。今回はベーシックな「reCAPTCHA V2」を選びました。
Domains】は利用するドメイン名を記入します。http://momomo.co.jp/contact で利用するなら、momomo.co.jp です。改行で複数サイトを登録できます。

記入が終わったら「Register」登録です。画面が変わりAPIキーが表示されます。

reCAPTCHAの導入

Site key】サイトキー。フォームに埋め込むキーです。
Secret key】シークレットキー。フォームに埋め込んだreCAPTCHAが出力した値が正しいか検証する為に必要なキーです。

その下に手順が書いてありますね。親切。

Step 1: Client side integration(手順 1: クライアント側の統合)

「reCAPTCHA」を使うフォームの準備です。マニュアルを参考に、こんな風にしました。

<html>
<head>
	<title>reCAPTCHA demo</title>

	<script type="text/javascript">
		var verifyCallback = function(response) {
			$('#onsubmit').prop('disabled', false);
		};            
		var onloadCallback = function() {
			grecaptcha.render('example', {
				'sitekey'  : 'サイトキー',
				'callback' : verifyCallback,
				'theme'    : 'light',
				'size'     : 'compact',
			});
		};
	</script>
</head>
<body>
	<form action="./app.php" method="POST">
		<div id="example"></div>
		<br>
		<input type="submit" value="Submit" id="onsubmit" disabled>
	</form>
	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
	</script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</body>
</html>

テーマはdarkもしくはlightを選べ、サイズはcompactもしくはnormalを選べます。今回は、テーマはlight。サイズはcompactにしてみました。コールバックを利用して、キャプチャが認証されたら、送信ボタンが有効になる処理を追加しました。

Step 2: Server side integration(手順 2: サーバー側の統合)

フォームから受け取ったreCAPTCHAの値が正しいか検証し、正しければ実際の動作を実行します。PHPからhttps://www.google.com/recaptcha/api/siteverifyに向けてsecretresponseをセットしてPOSTします。remoteipは任意です。

app.php

<?php

$data = array(
	'secret'   => 'シークレットキー',
	'response' => $_POST['g-recaptcha-response'],
	'remoteip' => $_SERVER['REMOTE_ADDR']
);

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$res = curl_exec($curl);

$captcha = json_decode($res);

if ( $captcha->success == false ){
	echo '認証に失敗しました。';
} else {
	// 実際の動作を記入する。
	echo '認証に成功しました。';
}

?>

最初に作ったとき、app.phpでキャプチャの認証がどうしてもFALSEになってしまって非常に困りました。ええ、まさかAPIキーがサイトキーとシークレットキーの2つが必要だったなんて・・・。