Implementing Google Recaptcha V3 - Methods to implement - recaptcha-v3

Question

I am planning to use Google invisible Recaptcha V3 in my application. I want the suggestion by which method I can go. In the developer document, I could see 2 ways,
Automatically bind the challenge to a button (https://developers.google.com/recaptcha/docs/v3)
Programmatically invoke the challenge
for the 2nd option, I know we are doing the server-side validation to check the token from my site and we are getting the scores.
I want to know if I am going to use the 1st option, and how it gets validated from the ReCaptcha server.

Answer 1

If you want to use the 1st option, you just include a submit button inside your form, and you will receive the reCaptcha token in the 'g-recaptcha-response' key from the POST field (e.g.: $_POST['g-recaptcha-response'], if you're using php).
<script src="https://www.google.com/recaptcha/api.js"></script>
<form method="post" action="login" id="loginForm">
<label for="password">Password:</label>
<input type="password" name="password" value="">
<!--Recaptcha button-->
<button class="g-recaptcha"
data-sitekey="#your_site_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
</form>
<script>
function onSubmit(token)
{
document.getElementById("loginForm").submit();
}
</script>
Then, validate the token submiting it to "https://www.google.com/recaptcha/api/siteverify" as you would do with the 2nd option.
If you are on php, login page from the form's action attribute, would look like this:
<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, 1);
curl_setopt($ch,CURLOPT_POSTFIELDS, http_build_query([
"secret"=>"#yourSecretKey"
, "response"=>$_POST['g-recaptcha-response']
, "remoteip"=>$_SERVER['REMOTE_ADDR']
]));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$recaptcha = json_decode(curl_exec($ch), true);
/** $recaptcha:
Array
(
[success] => 1 // or 0
[challenge_ts] => 2022-07-16T12:34:38Z
[hostname] => host // hostname
[score] => 0.9 // 0.0 to 1.0
[action] => submit // data-action attribute from reCaptcha button
)
*/
if ($recaptcha["score"] >= 0.5 && $recaptcha["action"] === 'submit')
{
// action on success
} else {
// action on false
}
?>
About which one to use, I don't know how to answer that... But I guess that both options work similarly, so go with the one that is easier for you to implement.