Google reCAPTCHA V3の導入方法

2022-04-20 JavaScript , PHP

TAGreCAPTCHA

最終更新日：2023-09-28

Google reCAPTCHA V3を問い合わせフォームに導入する方法をご紹介します。

Google reCAPTCHA V3のサイトキー・シークレットキーの取得

まず、reCAPTCHAのサイトキー・シークレットキーを取得するために下記からgoogleにドメインの登録をします。

google recAPTCHA管理画面

取得方法はrecAPTCHA管理画面の「新規登録」からサイト情報を登録します。
登録後、サイトキーとシークレットキーが表示されますのでそれをメモします。

HTMLへreCAPTCHAを埋め込む

次に、HTMLのhead内もしくはfooterに

<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
<script>
document.getElementById("フォームのID").addEventListener('submit', onSubmit);
 
function onSubmit(e) 
{
	e.preventDefault();
	grecaptcha.ready(function() 
	{
		grecaptcha.execute('サイトキー', {action: 'submit'}).then(function(token)
		{
			var recaptchaToken = document.getElementById('recaptchaToken');
			recaptchaToken.value = token;
			document.getElementById("フォームのID").submit();
		});
	});
}
</script>

を追加します。

サイトキーとなっている箇所に取得したサイトキーを
フォームのIDの箇所に＜form id=”●●”＞の●●のID名を入れます。

フォームの送信ボタンの直前等に

<input type="hidden" name="recaptchaToken" id="recaptchaToken">

を追加します。

これで基本的には導入完了です。

チェックを行う

具体的にチェックを行う場合は

mail.php等のフォームの送信先php、もしくはフォームのphpに

 $secretKey =  'シークレットキー';
 $captchaResponse = $_POST['recaptchaToken'];
 
 // 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 'OK';　// 成功（ロボットではない）
   
 } else {
	 echo = 'NO'; //失敗
 }

を追加でOK。
シークレットキーの箇所にシークレットキーを入れます。