recaptcha の導入メリットと、具体的な設置方法

recaptcha

お問い合わせフォームからの迷惑メールが増えて、お困りになったことはありませんか。

放置するとセキュリティリスクが高まり、サーバー制限によって重要なメールが届かなくなる事例をよく聞きます。

この記事では、プログラミング知識がなくても手軽に導入できる「reCAPTCHA」の概要と、設置手順について解説していますので、ぜひご活用ください。

reCAPTCHAについて

大量のスパムメールは、自動化されたボットによって生成されます。そのような攻撃からウェブサイトを保護するために、Googleが提供する無料のサービスであるreCAPTCHAが役立ちます。

reCAPTCHAは、ウェブサイトやアプリケーションに簡単に組み込むことができ、スパムボットがフォームを自動的に送信するのを防ぎます。ユーザーが画像認識やテキスト入力などの認証をすることで、人間であることを確認することができます。

reCAPTCHAの設置手順

reCAPTCHAにログイン

Googleアカウントを作成して、reCAPTCHAサイトにログイン(またはサインアップ)します。

reCAPTCHAに登録

reCAPTCHAダッシュボードで、新しいサイトを登録します。

  • ラベル・・・任意のラベル名を設定します
  • reCAPTCHAタイプ・・・v3は煩わしい認証作業がないのでおすすめです
  • ドメイン・・・サイトのドメインを入力します

APIキーの取得

reCAPTCHAダッシュボードから、生成されたAPIキー(サイトキーとシークレットキー)を取得します。

reCAPTCHAを組み込む(自作サイトの場合)

<head>タグ内に下記コードを挿入([サイトキー]は、コピーしたキーと差し替えてください)

<script src="https://www.google.com/recaptcha/api.js?render=[サイトキー]"></script>

<form>タグ内に下記コードを挿入([サイトキー]は、コピーしたキーと差し替えてください)

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="[サイトキー]"></div>

チェックが入っていない時の実装として、下記のjsを挿入します

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

サーバーサイドのphpには、下記コードを挿入します

<?

$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等の記述をする。
}

?>

reCAPTCHAを組み込む(ワードプレスのContactForm7の場合)

WordPressの管理画面から、お問い合わせ>インテグレーション を選択

サイトキーとシークレットキーを入力

表示確認

Recaptchaの保護マークがサイトに表示されてれば設定完了です。

まとめ


今回は、Googleが無料で提供しているスパム対策ツール「reCAPTCHA」についてご紹介しました。スパムメールを放置すると、サーバーに制限がかかったり、悪意のあるプログラムが埋め込まれる危険性が高まります。そのため、自社サイトでのスパム対策は重要です。

当方でもreCAPTCHA設置のご相談を承っておりますので、何かお困りごとがありましたら、無料相談からお気軽にお問い合わせください。