コンテンツ
reCAPTCHA とは
Webサイトのお問い合わせフォームや、コメントフォームなどにおいて、通常のユーザーではなくプログラムなどで不正に投稿を行われることを防ぐサービスです。
不正な投稿・送信を放置するとどうなるか
reCAPTCHAなどをもちいて不正なプログラム(bot等)からの攻撃に対応しない場合、
- 無駄な問い合わせデータが増加し、正規のデータを見失う
- メールアドレスへの返信が含まれる場合、不正なメールを送信してしまう
特に上記２のような、問い合わせに対し自動返信などを行う場合は、サイトが不正なメールを多数送信しているとみなされ、悪意のあるサイトと認識される危険性もあります。
reCAPTCHA導入手順
- GoogleからreCAPTCHAを取得
- ブラウザ（クライアント）側にreCAPTCHAのウィジェットを設置
- サーバ側でreCAPTCHAが送信したトークンをチェック
Google reCaptchaにアクセス
Google reCaptcha にアクセスし、Admin Console をクリックします。
reCaptchaを設置するサイトを登録
- ラベル：設置するサイトのURLを入力します。
- reCaptchaタイプ：「v3」はサイトアクセス時に自動で判定する機能、「v2」はユーザーの操作(「私はロボットではありませんチェック等」)で判定する機能になっています。
- ドメイン：設置するサイトのURLを入力します。
- オーナー：自身のメールアドレスを入力します。
サイトキーを取得します。
reCaptcha V2の実装方法
クライアント側実装
お問い合わせフォームなど、ブラウザ側の実装方法です。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="6Ldtc9MZAAAAAF0dGFqmfeLTyzQLIKbUGy2rR_rp" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
<p id="warning">送信する際はチェックを入れてください。</p>
<input type="text" class="email" value="" name="email" placeholder="email" />
<input type="submit" id="btn-submit" class="button-submit" value="送信する" />
<script>
window.onload = function() { //初期状態はdisabled
document.getElementById("btn-submit").disabled = true;
document.getElementById("btn-submit").style.background = "#bfbfbf";
}
var verifyCallback = function(response) { //チェック時のコールバック関数
document.getElementById("warning").textContent = "";
document.getElementById("btn-submit").disabled = false;
document.getElementById("btn-submit").style.background = "#06bda6";
};
var expiredCallback = function() {
document.getElementById("warning").textContent = "送信する際はチェックを入れてください。";
document.getElementById("btn-submit").disabled = true;
};
</script>
</body>
</html>
サーバー側実装（PHP）
<?php
function reCaptchaV2Check(){
$site_key = [サイトキー];
$secret_key = [シークレットキー];
//reCAPTCHA トークン
$token = "";
if (!empty($_POST[ 'g-recaptcha-response' ])) {
$token = $_POST[ 'g-recaptcha-response' ];
}
if ( !empty($token) ) {
//cURLでrecaptchaにアクセス
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, true );
//POSTパラメタ
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array(
'secret' => $secret_key,
'response' => $token
)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // curl_exec() 経由で応答データを直接取得(文字列)できるようにする
//結果取得
$res = curl_exec($ch);
curl_close($ch);
//レスポンスのjsonをデコードし取得
$result = json_decode( $res );
if ( $result->success ) {
//成功
return true;
} else {
//失敗(不正検知)
return false;
}
}
}
$result_data = "";
if(reCaptchaV2Check()){
$result_data = "成功しました:".$_POST["text"];
}else{
$result_data = "失敗しました:".$_POST["text"];
}
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<?php echo $result_data; ?>
<br>
<br>
<a href="https://choppydays.com/static/recaptcha/">戻る</a>
</body>
</html>
実装デモ