November 07, 2020

Add Google reCAPTCHA V3 to Website

As technology advances website security become more important than ever to protect website against most common threat known as spam bots. Learn how to integrate google reCAPTCHA V3 to website in easy steps.

Add Google reCAPTCHA V3 to Website
Download

Spam and abuse are everyday problem to handle for website owners and developers. Spam bots are automated scripts designed to perform malicious actions such as spamming forms, fake signups or scrapping data. To counter this issue google offers a free yet powerful tool google reCAPTCHA V3 to protect against spam bots. In this post we are going to walk through steps required to implement google invisible reCAPTCHA V3 with example code snippets.

 

How to Integrate Google Invisible reCAPTCHA V3 to Website

Google reCAPTCHA V3 is latest version of reCAPTCHA technology which google offers for free. Unlike its previous version google reCAPTCHA V2 it does not require user to complete a challenge for human verification. Instead it runs quietly in background and assigns a score (from 0.0 to 1.0) where 0.0 indicating very likely a bot and 1.0 indicating very likely to be human. Following are the steps to integrate google reCAPTCHA V3 to website.

 

Step 1: Create a Google reCAPTCHA Account

First and most basic step is to create an account on google reCAPTCHA console to retrieve site key and secret key to render and verify reCAPTCHA token and response:

  • Go to google reCAPTCHA register a new site page.
  • Enter the Label for website and fill out other fields.
  • Choose reCAPTCHA V3 score based checkbox.
  • Enter the domain names which are allowed to use this reCAPTCHA service.
  • Select the project and click "Submit" button.
  • Google will display site key and secret key on next page. Save these keys for use in website.

 

Step 2: Add Invisible reCAPTCHA to HTML Page

After retrieving site key and secret key from google reCAPTCHA console it is time to create an HTML with form that needs to be protected by google reCAPTCHA as below:

  • Create and HTML page.
  • Add an HTML form with all fields. For sake of demo we are adding only one field to form.
  • Add google reCAPTCHA API script tag along with render=YOUR_SITE_KEY query parameter.

index.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Add Google reCAPTCHA V3 to Website - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />

        <script src="https://www.google.com/recaptcha/api.js?render=GOOGLE_RECAPTCHA_V3_SITE_KEY" async defer></script>
        <script type="text/javascript" src="js/javascript.js"></script>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <section class="section py-4">
            <div class="container">
                <form class="captcha-form" method="POST" action="process-form.php">
                    <div class="mb-4">
                        <label class="inline-block mb-1">Name: <span class="text-red">*</span></label>
                        <input type="text" name="name" class="form-control" required="required" placeholder="Enter name..." />
                    </div>

                    <button type="submit" class="btn btn-blue btn-recaptcha-v2">
                        <i class="fa fa-save"></i>
                        Submit
                    </button>
                </form>
            </div>
        </section>
    </body>
</html>
 

Step 3: Render reCAPTCHA V3 on Form Submit

After adding an HTML, we can now render the google invisble reCAPTCHA on web page using a javascript code snippet. For demo we are listening to event on all forms of current page it can be modified to fit the application requirement.

  • Add DOMContentLoaded event listener to document to ensure the DOM tree is ready.
  • Select all form elements and attach submit event listener to form.
  • Prevent the form submission using e.preventDefault() to render the reCAPTCHA before form submission.
  • Render the hidden reCAPTCHA token field using grecaptcha.execut() method providing it the site key retrieved from reCAPTCHA console page.
  • Finally after populating the hidden field submit the form using form.submit() function.

javascript.js 

document.addEventListener("DOMContentLoaded", function() {
    [].slice.call(document.querySelectorAll("form")).forEach(function (form) {
        form.addEventListener("submit", function (e) {
            e.preventDefault();

            grecaptcha.execute("GOOGLE_RECAPTCHA_V3_SITE_KEY", {
                action: "submit"
            }).then(function (token) {
                // Add the token to the form
                let input = document.createElement("input");

                input.type = "hidden";
                input.name = "recaptcha_token";
                input.value = token;

                form.appendChild(input);

                form.submit();
            });
        });
    });
});
 

Step 4: Verify reCAPTCHA Token on Server Side (PHP)

After the form is submitted we need to handle the form processing on server side and before using any form data we need to verify google reCAPTCHA token with reCAPTCHA verification API endpoint.

  • First thing is to filter the $_POST array using filter_input_array() function.
  • Check if form data is not empty in $_POST request.
  • The rest of the process is same as google reCAPTCHA V2 verification.
    • Prepare an array of $data to send it to google reCAPTCHA verification API.
    • Initialize a cURL request and set required options for API request.
    • Execute the cURL request and JSON decode response using json_decode() method.
    • Check if response has parameter success it was true/1 indicating a successful verification.
  • After verifying the reCAPTCHA token form data can be processed.

process-form.php 

<?php
// Sanitize input array
$post = filter_input_array(INPUT_POST, [
    'name' => FILTER_SANITIZE_FULL_SPECIAL_CHARS,
    'recaptcha_token' => FILTER_SANITIZE_FULL_SPECIAL_CHARS,
]);

if(!empty($post)){
    // Your secret key
    $secret_key = 'GOOGLE_RECAPTCHA_V3_SECRET_KEY';
    $recaptcha_token = $post['recaptcha_token'];

    // Verify the reCAPTCHA response with Google
    $verify_url = 'https://www.google.com/recaptcha/api/siteverify';

    $data = [
        'secret' => $secret_key,
        'response' => $recaptcha_token,
        'remoteip' => $_SERVER['REMOTE_ADDR']
    ];

    // Use curl to send POST request
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $verify_url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);

    curl_close($ch);

    $result = json_decode($response, true);

    if ($result['success']) {
        // reCAPTCHA verified – process form
        echo 'reCAPTCHA verification successful!!!';
    } else {
        // reCAPTCHA failed, redirect back or handle error as needed
        echo 'reCAPTCHA verification failed!!!';
    }
}

In addition to above code snippet it is also possible to handle the verification using the score parameter in response. If score is above 0.5 then it should be considered as human form submission like in code snippet below:

$score = $result['score'];

if ($score >= 0.5) {
    // User is likely human, proceed with the form submission
} else {
    // User might be a bot, take additional action (e.g., challenge, flag for review)
}

We demonstrated how to integrate google invisible reCAPTCHA V3 in simple and easy steps. Using google reCAPTCHA not only provides improved security for website but also provides a better experience as it runs in background and user is not required to complete any challenge on page.

Home