Post

How to Add Google reCAPTCHA v3 to Your Project

Posted
By Bruce Renner
3 min read

Image

In this tutorial, we’ll walk you through the steps to integrate Google reCAPTCHA v3 into your website or application using both PHP and JavaScript. Google reCAPTCHA helps protect your site from spam and abuse by using advanced risk analysis techniques.

What is Google reCAPTCHA v3?

Google reCAPTCHA v3 is an invisible reCAPTCHA that runs in the background to detect abusive traffic on your website without user interaction. Unlike v2, it doesn’t interrupt the user’s experience with challenges like “I’m not a robot” checkboxes or image selections.

Prerequisites

  • A Google account to access the Google reCAPTCHA Admin Console.
  • Basic knowledge of HTML, PHP, and JavaScript.
  • Access to your website’s codebase and server.

Step 1: Register Your Site on Google reCAPTCHA

  1. Go to the Google reCAPTCHA Admin Console.
  2. Sign in with your Google account.
  3. Fill out the registration form:
    • Label: Enter a name for your site.
    • reCAPTCHA Type: Select reCAPTCHA v3.
    • Domains: Add the domain(s) where you will use reCAPTCHA.
    • Owners: Your email should already be listed.
    • Accept the reCAPTCHA Terms of Service.
  4. Click on Submit.
  5. You will receive a Site Key and a Secret Key. Keep these handy.

Step 2: Add the reCAPTCHA Script to Your HTML

Add the following script tag to the <head> section of your HTML code:

1

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

Replace YOUR_SITE_KEY with the Site Key you obtained from Google.

Step 3: Add the reCAPTCHA Action to Your Form

Inside your form, add a hidden input field to store the reCAPTCHA token:

1
2
3
4
5

<form action="submit.php" method="post">
    <!-- Your form fields here -->
    <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
    <button type="submit">Submit</button>
</form>

Then, add the following JavaScript code before the closing </body> tag to execute reCAPTCHA and get the token:

1
2
3
4
5
6
7
8

<script>
grecaptcha.ready(function() {
    grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
        var recaptchaResponse = document.getElementById('recaptchaResponse');
        recaptchaResponse.value = token;
    });
});
</script>

Again, replace YOUR_SITE_KEY with your actual Site Key.

Step 4: Verify the reCAPTCHA Response on the Server

In your PHP script (e.g., submit.php), add the following code to verify the reCAPTCHA response:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'YOUR_SECRET_KEY';
    $recaptcha_response = $_POST['recaptcha_response'];

    // Make and decode POST request:
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Take action based on the score returned:
    if ($recaptcha->score >= 0.5) {
        // Verified - proceed with form processing
        echo "reCAPTCHA verification passed.";
        // Your form processing code goes here
    } else {
        // Not verified - show form error
        echo "reCAPTCHA verification failed.";
    }
}
?>

Replace YOUR_SECRET_KEY with the Secret Key you obtained from Google.

Step 5: Testing Your Implementation

To test if reCAPTCHA is working:

  • Open your form in a browser and fill it out as a normal user would.
  • Submit the form and observe the server response.
  • If everything is set up correctly, you should see “reCAPTCHA verification passed.” message.
  • To simulate a bot or spam activity, you can try manipulating the token or sending invalid data to see if the verification fails.

Troubleshooting Tips

  • Ensure that you have replaced YOUR_SITE_KEY and YOUR_SECRET_KEY with the actual keys provided by Google.
  • Check that the domain registered with reCAPTCHA matches the domain you’re testing on.
  • Make sure your server can make outgoing HTTPS requests to Google’s API.
  • Review any error messages returned in the $recaptcha object for clues.

Conclusion

You’ve successfully integrated Google reCAPTCHA v3 into your project! This will help protect your site from spam and abuse while providing a seamless user experience.

For more information, you can refer to the official Google reCAPTCHA v3 documentation.

Security, Web Development
reCAPTCHA PHP JavaScript Form Validation
This post is licensed under CC BY 4.0 by the author.