Google reCAPTCHA V2の認証成功時の処理について

前提・実現したいこと

reCAPTCHA V2（チェックボックス）を現在実装中の画面に入れたいと思っています。
初めて、reCAPTCHAのサービスを使用するので、調査しながらの作業になっています。
チェックをいれて、サーバー側[PHP]の実装までは、とりあえずプログラムを書きましたが、
その認証成功後の処理の記述がわかりません。

具体的にいうと、認証成功時に登録ボタンを非活性から活性に変更したいです。
（いろいろなサイトでよくある仕組みですが、どのように実装すればよいのか・・・）

追記：
認証成功したら「登録」ボタンを活性にして、「登録」ボタンを押下で、メールを送信する流れとなります。

お力を貸してください。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5
6<title>メールアドレス画面</title>>
7<script src="https://www.google.com/recaptcha/api.js" async defer></script>
8</head>
9<body>
10<main>
11	<div>
12		<dl>
13			<dt>メールアドレス入力</dt>
14			<dd>
15				<input name="mail" type="text">
16				<button type="submit" id="registMail">登録</button>
17			</dd>
18		</dl>
19	</div>
20	<form action="?" method="POST">
21		<div class="g-recaptcha" data-sitekey=""></div><br />
22		<input type="submit" value="Submit" />
23	</form>
24</main>
25</body>
26</html>

PHP
1<?php
2    $url = 'https://www.google.com/recaptcha/api/siteverify';
3
4    $post_data = array(
5        'secret'   => 'キー',
6        'response' => $_REQUEST['g-recaptcha-response'],
7        'remoteip' => $_SERVER['REMOTE_ADDR'],
8    );
9    $options = array(
10        'http' => array(
11                'method'  => 'POST',
12                'header'  => 'Content-type: application/x-www-form-urlencoded',
13                'content' => http_build_query($post_data),
14        )
15    );
16
17    $context = stream_context_create($options);
18    $res = json_decode(file_get_contents($url, false, $context));
19
20    if ($res->success == 1) {
21        // 認証成功
22    } else {
23        // 認証失敗
24    }
25
26?>

m.ts10806

2020/09/03 01:54

登録成功したらログイン画面遷移ではダメなのですか？設計はどうなっているのでしょう

entaro12345

2020/09/03 01:58

コメントありがとうございます。追記いたしましたが、登録ボタン押下でメールを送信する流れになります。

行動規範の内容に同意します

回答1件

ベストアンサー

reCAPTCHA認証もメール送信も画面なくてもできるので非同期で実行されては。

ただ、ボタンを非活性にしたところでデベロッパツールから解除できるし、「ユーザー登録したあとユーザーがどうする」を考えると、登録画面にいつまでもとどまらせるメリットはないように思います。

投稿2020/09/03 02:02

m.ts10806

総合スコア80875

entaro12345

2020/09/03 02:22

回答ありがとうございます。懸念としましては、メールアドレス入力前にチェックを入れられてしまった場合を、考慮すると認証⇒ボタン押下の流れがいいのかなと考えています。

m.ts10806

2020/09/03 02:27

reCAPTCHAはあくまでロボットかどうかを判断するためのものなので、メールアドレスの入力とは関連性なくて良いです。 formタグ利用しているとボタンなり入力時のenterで送信できますし、JavaScriptであれこれそこを制御するより、submitボタンを廃止して、サーバーサイドの処理を全て非同期通信(Ajax)で行った方が役割分担も明確になって実装もしやすいのではと。

entaro12345

2020/09/03 02:44

ありがとうございます！整理させてください。ボタンの活性化はどのようにして行えばよいのでしょうか・・・？

m.ts10806

2020/09/03 03:04

ajaxで、true/falseを受け取り、ボタンの状態切り替え。リクエスト送信するところと処理結果を受け取るのはJavaScriptの仕事です

entaro12345

2020/09/03 05:01

ありがとうございます！やってみます！

行動規範の内容に同意します