Simplest route to implementing Google's Re-Captcha V3
So, there's a lot of sample code out there for implementing Google's reCaptcha V3's (invisible) system.
Most of them are using some extra code before Google updated their documentation for data attributes to the button
tag.
In most implementations, grecaptcha.execute
is used which is required only when creating a page wholly via AJAX using React or similar SPA frameworks.
For regular webpages on vanially code or like in WordPress etc the documentation on Automatically Bind the Challenge to a Button works well.
<script src="https://www.google.com/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<form id="frm-registration" action="" method="post">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" maxlength="200" placeholder="First Name"/>
</div>
<div>
<label>Last Name:</label>
<input type="text" id="lastname" name="lastname" maxlength="200" placeholder="Last Name"/>
</div>
<div>
<label>Email:</label>
<input type="text" id="username" name="email" maxlength="100" placeholder="Email"/>
</div>
<div>
<label>Create Password:</label>
<input type="password" id="password1" name="password1" maxlength="200" placeholder="Create Password"/>
</div>
<div>
<label>Repeat Password:</label>
<input type="password" id="password2" name="password2" maxlength="200" placeholder="Repeat Password"/>
</div>
<div>
<button type="submit" id="btn-submit" class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-callback='onSubmit' data-action='submit'>
Sign Up / Register
</button>
</div>
</form>
Here's the JavaScript code for form processing :
function onSubmit(token)
{
document.getElementById("recaptchaResponse").value = token;
document.getElementById("frm-registration").submit();
}
Here's the PHP code for server-side processing :
define("RECAPTCHA_V3_SECRET_KEY", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, TRUE);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(['secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $_POST["recaptcha_response"], 'remoteip' => $_SERVER["REMOTE_ADDR"]]));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json', 'Content-type: application/x-www-form-urlencoded']);
$response = curl_exec($ch);
$json_response = json_decode($response, TRUE);
if ($json_response['success'] == 1 && $json_response['score'] >= 0.5)
{
// Cool
}
else
{
print_r($json_response['error-codes']);
}