Google reCAPTCHA V3の導入方法 | KH-WEBLOG

Google reCAPTCHA V3の導入方法

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の箇所に

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

 $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'; //失敗
 }