(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法

(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法

(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法

“reCAPTCHA リキャプチャ” は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、最新のクリックが必要の無いタイプ (reCAPTCH V3) の設置方法を記していきます。

Google reCAPTCHA に登録してAPIキーを入手する

  1. まず始めに http://www.google.com/recaptcha/intro/
    Google reCAPTCHA ページにアクセス、右上の青ボタン Get reCAPTCHA をクリック。Google アカウントをお持ちの方はそのまま次へ、無い方は登録して頂く必要があります。 (新) Google reCAPTCHA V3 リキャプチャ設置、設定方法
  2. 次に各情報を入力します。
    Label には任意の情報を (登録するウェブサイトのコンタクトフォーム等) 、
    Choose the type of reCAPTCHA では、ウェブサイトの場合はreCAPTCHA V3 を選択。
    するとドメインが入力される様になるので、ドメインを入力。こちらは基本は1つでいいはずです。最後に Terms of Service をクリックして登録。
  3. その後 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 リキャプチャ設置 はお分かりになったと思います。
前のバージョンの物より大分シンプルな設置方法になったと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です