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