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

仕様について

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

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

サイトを登録する

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

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

HTMLの用意

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

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

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

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

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

1
2
3
4
5
6
7
8
9
<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変数に、取得したサイトキーを代入する。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(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の値だけ取得しておいたシークレットキーに置き換える必要がある。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<?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を実装することができる。