“reCAPTCHA リキャプチャ” は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、最新のクリックが必要の無いタイプ (reCAPTCH V3) の設置方法を記していきます。
Google reCAPTCHA に登録してAPIキーを入手する
- まず始めに http://www.google.com/recaptcha/intro/
Google reCAPTCHA ページにアクセス、右上の青ボタン Get reCAPTCHA をクリック。Google アカウントをお持ちの方はそのまま次へ、無い方は登録して頂く必要があります。 - 次に各情報を入力します。
Label には任意の情報を (登録するウェブサイトのコンタクトフォーム等) 、
Choose the type of reCAPTCHA では、ウェブサイトの場合はreCAPTCHA V3 を選択。
するとドメインが入力される様になるので、ドメインを入力。こちらは基本は1つでいいはずです。最後に Terms of Service をクリックして登録。 - その後 Site Key Secret Key の2つが生成されていると思います。
Site Key は後に貼り付けるJavascript に使います、
Secret Key はサーバー側に使用する PHPコード (PHPの場合) に使用します。Secret Key は表に出さない様に気おつけて下さい。
コンタクトフォーム内に以下のコードを貼り付け
<script src="https://www.google.com/recaptcha/api.js?render=生成された Sitekey をこちらに貼り付け"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('生成された Sitekey をこちらに貼り付け', {action: 'homepage'}).then(function(token) {
var recaptchaResponse = document.getElementById('g-recaptcha-response');
recaptchaResponse.value = token;
});
});
</script>
次に、フォームの Submit ボタンに以下のコードを設置
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response"> <button type="submit"> 送信 </button>
これで自分のフォームに reCAPTCHA が設置されたはずです。（必ず入手したAPIがドメインと符号しているのを確認して下さい。違うドメインの物だと表示されません。）しかしこのままでは動きませんので、次はサーバー側の設定に移ろうと思います。
PHPの設定をする
次はサーバー側の設定。Ajaxやその他の言語の設定方法もあるそうなのですが、今回はPHPでの設定を説明したいと思います。今回は、メールの受取側のスクリプトに以下のコードを設置。
<?php
$secretKey = '生成された Scecret Key をこちらに貼り付け';
$captchaResponse = $_POST['g-recaptcha-response'];
// APIリクエスト
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");
// APIレスポンス確認
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
// echo '<h1 class="text-center"><span class="no_wrap">ありがとうございました。</span></h1>'; // 成功（ロボットではない）
if (mail($to,"題名をこちらへ入力", $message, $headers)) {
echo '<h1 class="text-center"><span class="no_wrap">ありがとうございました。</span></h1>';
}
} else {
echo '<h1 class="text-center">Sorry unexpected error occurred, please try again later.</h1>'; // 失敗
}
?>
=受け取りに失敗した場合、のメッセージは必要に応じて書き換えて下さい。
いかがでしたでしょうか？実際 PHP コードに組み込むと、なると多少のコード書き換え知識が必要になります。今回は、reCAPTCHA 部分のみの公開にさせて頂きますが、これで基本的な Google reCAPTCHA リキャプチャ設置 はお分かりになったと思います。
前のバージョンの物より大分シンプルな設置方法になったと思います。