Skip to main content

Command Palette

Search for a command to run...

Simplest route to implementing Google's Re-Captcha V3

Published
2 min read
A
I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

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