November 07, 2020

Add Google reCAPTCHA V3 to Website

Adding reCAPTCHA acts as an extra layer for HTML form submissions and protects websites against the most common threat known as spambots. Learn how to integrate Google reCAPTCHA V3 into a website in easy steps.

Add Google reCAPTCHA V3 to Website
Download

Spambots are automated scripts designed to perform malicious actions such as spamming forms, fake signups or scraping data. To counter this issue, Google offers a free yet powerful tool, Google reCAPTCHA V3 to protect against spambots. In this post, we are going to walk through the steps required to implement google invisible reCAPTCHA V3 with example code snippets.

 

How to Integrate Google Invisible reCAPTCHA V3 into a Website

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

 

Step 1: Create a Google reCAPTCHA Account

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

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

 

Step 2: Add Invisible reCAPTCHA to HTML Page

After retrieving the site key and secret key from google reCAPTCHA console, it is time to create an HTML form that will be protected by google reCAPTCHA as follows:

  • Create an HTML page.
  • Add an HTML form with all fields. For demo purposes, we are adding only one field to the form.
  • Add the google reCAPTCHA API script tag along with the 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" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://www.google.com/recaptcha/api.js?render=GOOGLE_RECAPTCHA_V3_SITE_KEY" async defer></script>
        <script src="js/javascript.js" type="text/javascript"></script>
    </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 the web page using a JavaScript code snippet. For demo, we are listening to events on all forms of the current page; it can be modified to fit the application requirement.

  • Add a DOMContentLoaded event listener to the document to ensure the DOM tree is ready.
  • Select all form elements and attach the submit event listener to the 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 with the site key retrieved from the reCAPTCHA console page.
  • Finally, after populating the hidden field, submit the form using the 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 the server-side and before using any form data, we need to verify the google reCAPTCHA token with the reCAPTCHA verification API endpoint.

  • First thing is to filter the $_POST array using the filter_input_array() function.
  • Check if the form data is not empty in the $_POST request.
  • The rest of the process is the same as google reCAPTCHA V2 verification.
    • Prepare an array of $data to send to google reCAPTCHA verification API.
    • Initialize a cURL request and set required options for the API request.
    • Execute the cURL request and JSON decode response using the json_decode() method.
    • Check if the response has a 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);

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 the above code snippet, it is also possible to handle the verification using the score parameter in the response. If the score is above 0.5, then it should be considered as a human form submission like in the 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 another 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 the website but also provides a better experience as it runs in the background, and the user is not required to complete any challenge on page.

Home