KH-WEBLOG TOP > WEBメモ > JavaScript > Google reCAPTCHA V3の導入方法

Google reCAPTCHA V3の導入方法

最終更新日:

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

コーディング・WordPress化作業を代行します

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。
シークレットキーの箇所にシークレットキーを入れます。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/25 02:06時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事