Anjanesh Lekshminarayanan
Anjanesh

Anjanesh

Simplest route to implementing Google's Re-Captcha V3

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·Feb 6, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

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']);
}
 
Share this