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関数が呼び出されるので、そのタイミングで送信ボタンを表示させている。
所感
やりたいことはできたが、よくよく考えるとテキストボックスのところでエンターキーを押すとそのままフォームが送信される。また、あまり無いとは思うがデベロッパーツールなどで送信ボタンを表示状態に変更されるとこれまたフォームが送信されてしまう。なのであまり意味は無いかも。
尚、コールバックオプションではなく、フォーム送信時にチェック状況を取得できれば良いがその方法が分からなかった。
参考サイト
関連記事
-
-
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使ったこと無かったけど、 配列のキーが連番じ ...