最近仕事で管理しているWebサイトの問い合わせフォームに「reCAPTCHA v3」を導入したので、その手順を備忘録としてまとめておく。
Contents
仕様について
導入について様々な方法があるが、今回は以下の仕様にて実装していく。
- 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を実装することができる。
