個人・法人を問わず、メールフォームを設置するとスパムがわんさか来て困りますよね。フォームのスパムやBOT対策と言えば「CAPTCHA」が有名ですが、これがまたユーザーに取っては分かり難い・使い難いで、対策したつもりがユーザーに嫌われ、コンバージョンも落ちてしまうという逆効果。そんな戦場に現れたGoogleの「reCAPTCHA」は、クリック・タップだけで認証できるので、PC・スマホのどちらでも利用できる簡単な対策として今人気が上がっているようです。ちなみに有名どころで言えば、ポケモンGOでも導入されていて、見たことがある方も多いと思います。
という訳で今回はこの「reCAPTCHA」をメールフォームに導入してみたいと思います。
Googleアカウントにログインした状態で、APIの管理ページにアクセスして指定項目に入力します。入力項目の説明は以下の通り。登録したAPIキーがあれば上部にリストが表示されます。
| 項目名 | 説明 |
|---|---|
| Label | 識別用のラベル。「memento-mori.jp recaptcha」とか何でもOK |
| Domains | このreCAPTHCAを設置するページのドメインを登録 |
上記項目を入力すると「Site key」「Secret key」が生成され、設定に必要な情報が表示されます。名前の通り「Secret key」は秘密のキーなので公開されるような箇所に表示・記述しないよう注意してください。以下Step1はHTML向け、Step2はサーバサイドのプログラム（php等）向けの記述例です。
reCAPTCHAを埋め込むフォームページに対して、「api.js」を読み込むためのscriptタグを指定通り記述します。
※推奨は</head>前とありますが動作すればどこでもOKです。
<script src='https://www.google.com/recaptcha/api.js'></script>
続いて「Site key」がPOSTされるように</form>前辺りに以下のタグを追加します。
※「SITEKEY」の箇所は取得した「Site key」が入ります
<div class="g-recaptcha" data-sitekey="SITEKEY"></div>
最後にPOSTを受けるサーバサイドのプログラムにてチェック処理を追加します（今回はphpでサンプルコードを記載）。
※先ほどと同様、「SECRETKEY」の箇所は取得した「Secret key」が入ります
// reCAPTCHA対応
$url = 'https://www.google.com/recaptcha/api/siteverify';
// Google側に渡すパラメータを設定
$data = array(
'secret'=>'SECRETKEY',
'response'=>$_POST['g-recaptcha-response'],
'remoteip'=>$_SERVER['REMOTE_ADDR'],
);
// 上記パラメータを含めたURLを作成
$url .= '?' . http_build_query($data);
$header = Array('Content-Type: application/x-www-form-urlencoded');
$options = array('http' =>
array(
'method' => 'GET',
'header' => implode("\r\n", $header),
'ignore_errors' => true
)
);
// GETでリクエストした結果を$resに格納（JSON形式で返るのでデコードする）
$res = file_get_contents($url, false, stream_context_create($options));
$json = json_decode($res, TRUE);
// レスポンスデータのチェック
if ($json['success'] !== TRUE) {
// エラー対応等の、失敗時の処理
} else {
// メールの送信等、成功時の処理
}
フォーム側、サーバサイド側の両方が対応できましたのでこれにて完了。
Photo credit: IntelFreePress via Visualhunt / CC BY-SA
