How to add Google reCAPTCHA to your website for extra security

What is Google reCAPTCHA?

Before we dive into the technical details, it is good to understand what exactly Google reCAPTCHA is. Google reCAPTCHA is a free security service that helps keep unwanted bots out of your website through tests that are easy for humans but difficult for bots. Examples include recognising images or simply checking a checkbox that says "I am not a robot".

Why should you use reCAPTCHA?

Bots are increasingly sophisticated these days, and if you don't have proper security, they can abuse your website to send spam, create accounts or even spread malware. Google reCAPTCHA prevents these attacks and keeps your website safe and secure for real visitors. Moreover, it helps improve the user experience by avoiding uncomfortable forms of authentication (such as entering hard-to-read codes).

Step 1: Create Google reCAPTCHA API keys

The first step to adding reCAPTCHA to your website is to create an API key. Follow these steps:

• Go to the Google reCAPTCHA website.
• Log in with your Google account (or create one if you don't already have one).
• Click on "Admin Console" at the top right of the screen.
• Click on the "Register a new site" button.
• Enter a label to identify your site. This is especially useful if you manage multiple websites.
• Choose the type of reCAPTCHA you want to add:reCAPTCHA v2: Users must click on a checkbox or solve a puzzle.
  reCAPTCHA v3: No user interaction required; works on a score basis.
• Enter the domain names on which you want to use reCAPTCHA.
• Accept the terms of service and click "Submit".

Once you have done this, you will be given two keys: the "Site Key" and the "Secret Key".

Step 2: adding reCAPTCHA to your HTML form

Now that you have the keys, it's time to actually add reCAPTCHA to your website. Let's start by integrating it into an HTML form.

Open the HTML file of the page where you want to add reCAPTCHA.
Add the following script tag in the section of your HTML document, replacing 'site key' with the key you just created:

<script src=”https://www.google.com/recaptcha/api.js” async defer></script>

Now locate the form in which you want to add the reCAPTCHA. Place the reCAPTCHA widget within the form by using the following code:

<div class="”g-recaptcha”" data-sitekey="”JE_SITE_KEY_HIER”"></div>

Replace "JE_SITE_KEY_HIER" with your own site key, of course.

Make sure your form looks something like this:

<form action=”/verwerk_formulier” method=”POST”>
<!– andere formuliervelden hier –>
<div class="”g-recaptcha”" data-sitekey="”JE_SITE_KEY_HIER”"></div>
Send
</form>

Step 3: Server-side validation

Now that you have added the reCAPTCHA to the frontend, it is important to also check on the server side that the reCAPTCHA is valid. You do this by using the "secret key". The validation is done via a POST request to the Google API. Here is an example in PHP, but it can also be done in other programming languages:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$secret = 'JE_SECRET_KEY_HERE';
$response = $_POST['g-recaptcha-response'];
$remoteip = $_SERVER['REMOTE_ADDR'];

$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}&remoteip={$remoteip}");
$captcha_success = json_decode($verify);

if ($captcha_success->success) {
// The reCAPTCHA is valid
echo "reCAPTCHA successful!";
} else {
// The reCAPTCHA is invalid
echo "reCAPTCHA failed, please try again.";
}
}
?>

This script checks whether the reCAPTCHA has been successfully completed by the user. If so, you can continue processing the form data. If not, you give an error message and ask the user to try again.

Step 4: Testing

It is always wise to test your reCAPTCHA installation before putting it live. Try filling in your form and see if reCAPTCHA works correctly. Make sure you run both a successful and a failed test to make sure everything is working properly.

Step 5: Optimising for your users

Now that Google reCAPTCHA is installed on your website, you can further optimise the user experience. For example, consider customising the language of the reCAPTCHA widget or setting up custom notifications if validation fails. Google offers several configuration options to customise the widget exactly to your needs.

Conclusion

Adding Google reCAPTCHA to your website is a simple and effective way to strengthen your security and protect your website from bots and spam. By following these steps, you will have successfully integrated reCAPTCHA in no time. Want help implementing or have other questions about website security? Feel free to contact us! We are ready to help you further.