勉強したことのメモ

webプログラマが勉強したことのメモ。

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

   

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたものの、これだとチェックボックスへのチェックの有無に関わらず送信自体はできてしまう。どの道フォーム送信時にreCAPTCHA認証状況をチェックするのでこれでもいいのだけれど、どうせならフォームページでチェックボックスにチェックが入った時点で送信ボタン的なものを表示させたい。また、AjaxでreCAPTCHA認証状況をチェックして云々というのは面倒くさそうなので、Ajaxを使わない方法で何とかしたい。以下に方法をメモ。

 

サンプル

https://taitan916.info/sample/recaptcha/index2.php

上記サンプルページだと「私はロボットではありません」にチェックを入れることで送信ボタンが表示される点が確認できる。

 

ソース

<?php
$r_site_key = 'xxxxxxxxxxxx'; //reCAPTCHA サイトキー
$r_secret_key = 'xxxxxxxxxxxx'; //reCAPTCHA シークレットキー

if( isset($_POST['name']) ){
	$res = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $r_secret_key . '&response=' . $_POST['g-recaptcha-response']);
	$result = json_decode($res);
	if( $result->success ){ 
		//認証成功時の処理
	}else{
		//認証失敗時の処理
	}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Recaptcha サンプルページ</title>
</head>
<body>
	<form class="form" method="post">
		<input type="text" name="name"><br>
		<div id="recaptcha_area" data-callback="recaptchaCallback" data-sitekey="<?php echo $r_site_key;?>"></div><br>
		<input type="submit" value="送信" id="submit" style="display: none;">
	</form>
	<script type="text/javascript">
	var onloadCallback = function() {
		grecaptcha.render('recaptcha_area', {
			 'sitekey' : '<?php echo $r_site_key;?>'
		});
	};
	</script>
	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
	<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
	<script>
	function recaptchaCallback(){
		$('#submit').show();
	}
	</script>
</body>
</html>

チェックボックスにチェックが入っているとrecaptchaCallback関数が呼び出されるので、そのタイミングで送信ボタンを表示させている。

 

所感

やりたいことはできたが、よくよく考えるとテキストボックスのところでエンターキーを押すとそのままフォームが送信される。また、あまり無いとは思うがデベロッパーツールなどで送信ボタンを表示状態に変更されるとこれまたフォームが送信されてしまう。なのであまり意味は無いかも。

尚、コールバックオプションではなく、フォーム送信時にチェック状況を取得できれば良いがその方法が分からなかった。

 

参考サイト

https://www.it-swarm-ja.com/ja/javascript/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8Cgoogle-recaptcha%E3%81%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8%E3%82%92js%E3%81%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/1051344554/

 - JavaScript, Google

  関連記事

jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

バニラJavaScriptのDOMContentLoadedとは?

jQuery等を用いない素のJSで書かれたプログラムを触る機会があり、そのソース ...

javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

jQuery Nice Selectを特定ページのみ無効にしたい

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...