Botからのスパム投稿を防ぐGoogleプラグイン「 reCAPTCHA v2」の導入方法まとめ

コンテンツ

1 reCAPTCHA とは
2 不正な投稿・送信を放置するとどうなるか
3 reCAPTCHA導入手順
- 3.1 Google reCaptchaにアクセス
- 3.2 reCaptchaを設置するサイトを登録
4 reCaptcha V2の実装方法
- 4.1 クライアント側実装
- 4.2 サーバー側実装（PHP）

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>

実装デモ