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. 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 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. It rather runs quietly in the background and assigns a score (from 0.0 to 1.0). Where 0.0 indicates very likely a bot and 1.0 indicates 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

First of all, we need 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 the HTML, we can now render the Google invisible reCAPTCHA on the web page using a JavaScript code snippet. For a demo, we are listening to events on all forms on 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.execute() method. Use the site key from the reCAPTCHA console as a parameter.
  • Finally, 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;  and has the value 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)){
    // The website 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']
    ];

    // Send a POST request using cURL
    $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 and we can process the form
        echo 'reCAPTCHA verification successful!!!';
    } else {
        // reCAPTCHA has failed and need to handle the error accordingly
        echo 'reCAPTCHA verification failed!!!';
    }
}

A human form submission can also be determined using the score parameter in the response. We can consider it to be a form submission made by a human if the score is above 0.5 like in the code snippet below:

$score = $result['score'];

if ($score >= 0.5) {
    // User is likely human and we can proceed with the form processing
} else {
    // User might be a bot and we need to take a different action(e.g., challenge, flag for review)
}

We just integrated a 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