うーんと昔に作ったシステムで、スパム投稿に困ってる！というSOSを受けて、Googleの「reCAPTCHA」を導入することにしました。導入はとっても簡単でしたが、一点つまづいたので、ここに記入しておきます。
Google reCAPTCHAのページからサイトを登録して、APIキーを取得します。Googleアカウントを持っていない人は、Googleアカウントの取得からになります。
「Get reCAPTCHA」のリンクから登録画面に飛びます。
【Label】は管理用の名前を記入します。日本語でも大丈夫です。
【Choose the type of reCAPTCHA】は使いたいキャプチャの種類を選択します。今回はベーシックな「reCAPTCHA V2」を選びました。
【Domains】は利用するドメイン名を記入します。https://ippaiattena.co.jp/contact で利用するなら、イッパイアッテナ.co.jp です。改行で複数サイトを登録できます。
記入が終わったら「Register」で登録です。画面が変わりAPIキーが表示されます。
【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に向けてsecretとresponseをセットして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つが必要だったなんて・・・。
