Googleの「reCAPTCHA」を5分で実装する

公開したサイトについているメールフォームから30分に1度通知が来るようになりました。

残念ながら見込客などといったコンバージョンではありません。ロボットによるスパムの投稿です。

そのままでも良いのですが、せっかくなのでGoogleの「reCAPTCHA」を導入してスパムによる投稿を撃退したいと思います。

本記事はreCAPTCHA v2の実装方法になります。reCAPTCHA v3の実装方法はこちらに記載しています。

Googleの「reCAPTCHA」実装までの3ステップ

Googleの「reCAPTCHA」実装までの3ステップ

１ GoogleへWEBサイトの登録＆APIキー取得

２ Webサイトへの実装

３サーバーサイドでの実装

GoogleへWEBサイトの登録＆APIキー取得方法

まずは、１のGoogleへWEBサイトの登録＆APIキー取得を行ないます。

こちらのGoogleのサイトへアクセスし、右上の「Get reCAPTCHA」をクリックします。

現在のreCAPTCHAは、デフォルトでEnterpriseバージョンが指定されます。

Enterpriseバージョンの場合でも、「最大1,000,000件/月まで料金なしで評価クレジットカードは不要です」となっているので個人でりようする分には無料範囲内で使用できる方がほとんどかと思います。

以下のバナー、右下「Switch to create a classic key」をクリックすることで、本記事と同じ設定画面になります。

猫可愛い(´ε｀ )

どのreCAPTCHAを利用するか選択します。

今回は「私はロボットではありません」をクリックする一番スタンダードなものを選択します。

一番上の「Label」はどのサイトのものか分かるように、任意の文言を記載してください。

選択すると、ドメインの入力項目が出てきますので、ドメインを入力します。

下記の様に入力できたら、「Register」をクリックします。

登録すると以下の情報が手に入ります。利用するには、サイトキーとシークレットキーです。

以上で １ GoogleへWEBサイトの登録＆APIキー取得　は完了です。

Webサイトへの実装

次は１で取得したAPIキーをWEBサイトへ実装していきます。

利用するのはサイトキーとなっているものです。

https://www.google.com/recaptcha/api.js を読込み、「ロボットではありません」のチェックボックスを表示したい場所に次のコードを記載します。

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="ここにサイトキーをいれる"></div>

上記のコードは＜/form＞タグよりも前に入れておく必要があります。

後は「ロボットではありません」のチェックボックス　にチェックを入れていない場合は、送信ボタンが押せないように属性で「disable」を入れておきます。チェックボックスにチェックが入ったら「disable」を外すようJqueryで記載します。

実装例としては以下のコードになります。

<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta charset="UTF-8">
	<title>reCAPTCHAテスト</title>

	<script src='https://www.google.com/recaptcha/api.js'></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>

	<form method="post" action="mail.php">
		<input type="text" name="名前">
		<input type="text" name="email">
		<div class="g-recaptcha" data-callback="clearcall" data-sitekey="ここにサイトキーをいれる"></div>
		<input type="submit" name="button" value="送信" disabled>
	</form>

	<script type="text/javascript">
	function clearcall(code) {
		if(code !== ""){
			$(':submit[name=button]').removeAttr("disabled");
		}
	}
	</script>

</body>
</html>

最後にサーバー側での実装です。

サーバー側での実装をしないと実際のスパムの投稿は防げません。

mailを送信する関数が書いてあるファイルに以下を記述します。

<?

$recaptcha = htmlspecialchars($_POST["g-recaptcha-response"],ENT_QUOTES,'UTF-8');

if(isset($recaptcha)){
	$captcha = $recaptcha;
}else{
	$captcha = "";
	echo "captchaエラー";
	exit;
}
$secretKey = "シークレットキーを記入";

$resp = @file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captcha}");
$resp_result = json_decode($resp,true);

if(intval($resp_result["success"]) !== 1) {
	//認証失敗時の処理をここに書く
}else{
	//認証成功時の処理をここに書く
	//ここにmailsend等の記述をする。
}

?>