勉強したことのメモ

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

  関連記事

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

jQueryのdatetimepickerでスクロールを無効

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...

PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...

javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

GASで祝日一覧(年月日と祝日名)データをJSON出力するAPIを作成

PHPのシステム案件で祝日を取得し、処理を行う箇所があった。Googleカレンダ ...

GASとLINEを連携させて通知を送る

Google Apps ScriptとLINEを連携させ、LINEに何らかの通知 ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

Advanced Custom FieldsでGoogleMapの使用

Advanced Custom FieldsでGoogleMapを使用したかった ...

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...