最近仕事で管理しているWebサイトの問い合わせフォームに「reCAPTCHA v3」を導入したので、その手順を備忘録としてまとめておく。

仕様について

導入について様々な方法があるが、今回は以下の仕様にて実装していく。

  • formのsubmitボタンをクリック
  • JSでトークンを発行し、AjaxでPHPファイルにトークンを渡す
  • PHPでreCAPTCHAのAPIにトークンを送信し、レスポンスをJSに返す
  • レスポンスの結果、認証に成功したらsubmit処理をおこない、失敗したら処理終了

サイトを登録する

まずGoogle reCAPTCHAの公式サイトでドメインを登録する。
reCAPTCHAタイプは「v3」を選択しよう。

登録後、サイトキーとシークレットキーが発行されるので控えておく。

HTMLの用意

HTMLでreCAPTCHAのAPIを読み込むため、まずは下記の1行を追記する。

この時{サイトキー}の部分を、先に取得しておいたサイトキーに置き換える。

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

そしてjQuery、自作JSファイルを読み込み、formタグのコーディングをおこなう。

完成したHTMLファイルがこちら。

<script src="https://www.google.com/recaptcha/api.js?render={サイトキー}"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="/js/recaptcha_token_check.js"></script>

<form id="form_recaptcha" action="" method="post">
  ...

  <input id="submit_button" type="submit" value="送信">
</form>

JavaScriptの用意

今回はjQueryを使った例を紹介する。

recaptchaTokenCheck関数のsiteKey変数に、取得したサイトキーを代入する。

$(function(){
  $('#form_recaptcha #submit_button').click(function(e){
    // recaptchaスパムチェック		 
    $.when(recaptchaTokenCheck(e)).done(function(result){
      if(result !== 'OK') {
        return false;
      } else {
        if(!$('#form_recaptcha')[0].reportValidity()) {
          return false;
        }
        $('#form_recaptcha').submit();
      }
    });
  });
  
  function recaptchaTokenCheck(e) {
    var siteKey = 'サイトキー';
    var deferred = new $.Deferred();
    
    e.preventDefault();
    grecaptcha.ready(function() {
      grecaptcha.execute(siteKey, {action: 'submit'}).then(function(token) {
        var result = 'NG';
        $.ajax({
            type: 'POST',
            url: '/php/recaptchaTokenCheck.php',
            data: {recaptchaToken: token},
            dataType: 'text'
        }).done(function(res) {
            if(res === 'OK') {
                result = 'OK';
            }
        }).fail(function(){
            console.log('error!!');
        }).always(function(){
            deferred.resolve(result);
        });
      });
    });
    
    return deferred.promise();
  }
});

submitボタンをクリックすると、recaptchaTokenCheck関数が呼び出され、Ajax通信の処理がおこなわれる。

recaptchaTokenCheck.phpに対し、POSTで発行されたトークンを渡しているので、今度はPHPファイルの用意をしていく。

PHPファイルの用意

下記のコードもそのまま使えるが、一点$secretKeyの値だけ取得しておいたシークレットキーに置き換える必要がある。

<?php
header("Content-type: text/plain; charset=UTF-8");

if($_SERVER['REQUEST_METHOD'] == 'POST') {
  $secretKey = 'シークレットキー';
  $url = 'https://www.google.com/recaptcha/api/siteverify';
  
  $verifyResult = file_get_contents($url.'?secret='.$secretKey.'&response='.$_POST['recaptchaToken']);
  
  $verifyResult = json_decode($verifyResult);
  
  if($verifyResult->success == false) {
    // スパム判定されたとき
    echo "NG";
  } else {
    echo "OK";
  }
}

ここではreCAPTCHAのAPIに、JSからPOSTされたトークンを投げてレスポンスを得ている。

スパム判定された場合はNGを、認証に通った場合はOKを文字列で返す処理をおこなっている。

ここで紹介した3つのファイルを用意するだけで簡単にreCAPTCHA v3を実装することができる。