In this article, I’m going show you how to add Google reCAPTCHA v3 to a form on your PHP website. The latest reCAPTCHA is different than the previous versions—it doesn’t require user interaction at all. In this post, we'll see how it works and we’ll build a real-world example for demonstration purposes.

As a website owner, you’re always looking for a strong anti-spam solution which can prevent spamming on your website and only allows the legitimate content to come through. Gone are the days when you integrate a simple text based CAPTCHA solution and it’s enough to stop the naughty bots.

• 

  Comparing the 5 Best PHP Form Builders

  Looking for a PHP form builder for your website? Today, we compare the five best PHP form generators available at CodeCanyon. This post will help you decide...
  
  


• 

  12 Best Contact Form PHP Scripts

  Contact forms are a must have for every website, and whether your need is for a simple three-line contact form or a more complex one that offers loads of...
  
  


• 

  Create a Contact Form in PHP

  This tutorial will teach you how to create your own basic contact form in PHP. You will also learn how to validate and sanitize user input to make the form...
  
  


• 

  20 Best PHP Email Forms

  Here are some of the best PHP email forms you'll find on CodeCanyon that will make your website more awesome.
  
  

On the other hand, if you have used third-party anti-spam solutions for your website, it’s likely that you're aware of the reCAPTCHA solution provided by Google. With each versions of reCAPTCHA, Google has strengthened its capabilities to detect and filter out spam. Specifically, reCAPTCHA v2 is one of the best among the different third-party anti-spam solutions.

You can integrate the reCAPTCHA v2 on your website in two different ways. The first is the famous "I’m not a robot" checkbox. And the other one is the invisible method in that the user interaction is required only in suspicious cases. In this post, we’ll discuss reCAPTCHA v3 which is invisible and doesn’t require user interaction at all!

In the next section, I’ll explain how reCAPTCHA v3 works and later on we’ll build a real-world example to demonstrate it.

How Google reCAPTCHA v3 Works

It’s said that a picture is worth a thousand words! So let’s have a look at the following screenshot to understand what exactly is going on underneath when you integrate the reCAPTCHA v3 on your website.

Let’s try to understand the overall flow in detail:

1. The end user requests a web page.


2. The web app or server returns the requested page, which includes reCAPTCHA v3 code.


3. Next, the user fills the form and clicks on the submit button.


4. Before submitting the form data to server, the reCAPTCHA v3 code on the client makes an AJAX call to the Google server and obtains a token. The important thing here is that we have to pass the action attribute with an appropriate value during the AJAX call. You should pass the value which identifies your form. This is the value which you'll use for  verification on the server side, along with other parameters.


5. The token obtained in the previous step is submitted along with the other form data. In most cases, we append two hidden variables to the form, token and action, before the form is submitted.


6. Once the form is submitted, we have to perform the verification step to decide if the form is submitted by a human. As a first step, we’ll make a POST request to verify the response token. The POST request passes the token along with the Google secret to the Google server (https://www.google.com/recaptcha/api/siteverify).


7. The response is a JSON object, and we’ll use it to decide if the form is submitted by a human. The format of the JSON object is shown in the following snippet.

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

There are three checks that we must do to make sure that it’s safe to go ahead with processing the form. The response score should be greater than 0.5 and the success property should be TRUE. Along with that, you must compare the response action value with the value of the action hidden variable which is submitted along with the form.

So that's the overview of the process. In the next section, we'll see how to register your site with Google to get a site key and site secret.

Register reCAPTCHA v3 Key and Secret

The Google reCAPTCHA library requires you to register keys for your domain before you can actually use it. In this section, we’ll see how you can register it.

First, go to the reCAPTCHA admin panel to create a link which presents you the form which asks you a few details as shown in the following screenshot.

In the reCAPTCHA Type field, select the reCAPTCHA v3 option. Fill in Domains and Owners information as needed. Next, read and accept the reCAPTCHA Terms of Service. Finally, click on the Submit button to save the settings.

Upon form submission, Google generates a site key and site secret for your domain as shown in the following screenshot.

Please copy and note these down it as we’ll need them later on when we build our real-world example.

Build a Real-World Example

In the previous section, we created the necessary credentials which we could use while setting up the reCAPTCHA v3. In this section, we’ll create an example to demonstrate how to integrate it in your PHP web page.

We’ll create two PHP files: subscribe_newsletter_form.php and subscribe_newsletter_submit.php.

• The subscribe_newsletter_form.php file is used to display the newsletter subscribe form which allows the user to enter the email address and subscribe for newsletters.


• The subscribe_newsletter_submit.php file handles the form submission and does necessary validation.

Create the Newsletter Subscribe Form

Go ahead and create the subscribe_newsletter_form.php file with the following contents.

<html>
  <head>
    <title>Subscribe to Newsletter</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>

    <script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>
  </head>
  <body>
    <div>
      <b>Subscribe Newsletter</b>
    </div>

    <form id="newsletterForm" action="subscribe_newsletter_submit.php" method="post">
      <div>
          <div>
              <input type="email" id="email" name="email">
          </div>
          <div>
              <input type="submit" value="submit">
          </div>
      </div>
    </form>

    <script>
    $('#newsletterForm').submit(function(event) {
        event.preventDefault();
        var email = $('#email').val();

        grecaptcha.ready(function() {
            grecaptcha.execute('6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y', {action: 'subscribe_newsletter'}).then(function(token) {
                $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
                $('#newsletterForm').unbind('submit').submit();
            });;
        });
  });
  </script>
  </body>
</html>

Let’s go through the important snippets in this file.

First, we loaded the reCAPTCHA JavaScript library in the <head> section. It’s important to note that you have to pass your site key as a render=YOUR_SITE_KEY query string parameter. Also, we’ve loaded the jQuery library as well so that we can use form-related utility methods. It’s not necessary to use jQuery—you can use any other library of your choice or you even vanilla JavaScript.

Next, we created a basic form which includes the email textbox and submit button—nothing fancy here.

Finally, there’s the JavaScript snippet at the end of the file which is the key part for implementing reCAPTCHA. We’ve created the jQuery submit handler for the form so when the user submits the form, we catch that event and do necessary processing before the actual form submission. We use the event.preventDefault() function to stop the form submission from taking place when it normally would.

Next, the grecaptcha object calls the execute method which obtains the token from the Google server by performing an AJAX call. It’s important to note that you have to pass the site key and action name while calling the execute method. The action name allows you to have a detailed break-down of data in the Google admin console. It’s also used to verify the reCAPTCHA response on the server side which we’ll see a bit later.

When the execute method receives the token response, it passes the token to the anonymous function supplied in the then method. Next, we append two new hidden variables to the form, token and action, along with their values. Finally, we submit the form by calling the submit method of jQuery.

Handle Form Submission and Validation

Go ahead and create the subscribe_newsletter_submit.php file with the following code to handle form submission.

<?php
define("RECAPTCHA_V3_SECRET_KEY", 'YOUR_SECRET_HERE');

if (isset($_POST['email']) && $_POST['email']) {
    $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
} else {
    // set error message and redirect back to form...
    header('location: subscribe_newsletter_form.php');
    exit;
}

$token = $_POST['token'];
$action = $_POST['action'];

// call curl to POST request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$arrResponse = json_decode($response, true);

// verify the response
if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {
    // valid submission
    // go ahead and do necessary stuff
} else {
    // spam submission
    // show error message
}

The most important part after form submission is to verify the token which is submitted along with the other form values. For that, you need to make a POST request to the https://www.google.com/recaptcha/api/siteverify URL. Also, you need to pass the secret key and token as the POST data. In the above example, we’ve used PHP cURL functions to make the POST request.

As a response, you’ll get a JSON object which contains the necessary information which you could used to verify. As discussed earlier, you should at least check three things to make sure the form is submitted by a human: success, action and score.

So in this way, you can use the Google reCAPTCHA v3 in your PHP web pages to detect and prevent spamming.

Conclusion

Today, we discussed how you can use one of the most popular anti-spam solutions on the web: Google reCAPTCHA v3. We created a real-world example to demonstrate how you can integrate it in a PHP website.

• 
  PHP
  
  
  Comparing the 5 Best PHP Form Builders
  
  
  Nona Blackman


• 
  PHP
  
  
  12 Best Contact Form PHP Scripts
  
  
  Nona Blackman


• 
  PHP
  
  
  Create a Contact Form in PHP
  
  
  Monty Shokeen


• 
  PHP
  
  
  20 Best PHP Email Forms
  
  
  Monty Shokeen


• 
  PHP
  
  
  Create a PHP Email Script and Form
  
  
  Monty Shokeen


• 
  PHP
  
  
  Create a PHP Login Form
  
  
  Monty Shokeen


• 
  PHP
  
  
  Create a Google Login Page in PHP
  
  
  Sajal Soni


• 
  PHP
  
  
  Create a PHP Contact Form With ContactMe
  
  
  Sajal Soni