195
protect your website against spam

Are you having trouble protecting your website from spam? Via this article, we will see how to use Google Captcha V3 to achieve this end. The goal of our article will be to see how to add a captcha on a form. We will also see how the Captcha V3 works. Finally, we will discuss the types of captcha and why V3 is better than other versions.

Prerequisites to be able to use this article

If you are a curious reader, you can read this article for general knowledge. However, if you are a developer and would like to apply our advice on your project, you must have the skills below:

  • Basic knowledge of HTML.
  • Have some knowledge in PHP.
  • Knowing JavaScript could be a plus.

Protect your website against spam in just 3 steps

To be able to protect your website, you only have to take a few steps. In this part, we will see the different steps to follow.

Home Captcha V3

Step 1 – Registering your website on the Google reCAPTCHA platform

To be able to use the Google captcha, you must first register your site on the platform Google reCAPTCHA . Please note that in order to register a site, it should be published on the net. Here are the steps to follow:

  • Visit the site Google reCAPTCHA – and click on admin console. The site will redirect you to the login page.
  • If you have a Gmail or G-Suite account, you must log in to access the Captchas management panel. Otherwise, you need to create a Gmail account.
  • Click on the plus in the upper right corner of the admin panel and a website registration form will appear.
  • Via this form, you must enter the name of your site, the type of reCAPTCHA and the domain names (
  • After saving the form, the platform will generate a site key and a secret key. Copy the keys for the following steps.

captcha V3 - form

Step 2 – Adding parameters to the form and managing data on the client side.

We will be using an HTML contact form for illustration. Please note that you may be able to add catcha on any type of form.

Addition of hidden fields on the contact form

On our HTML contact form, we’ll add a hidden field called “reponsecaptcha”. The purpose of this field is to detect whether the user is a human or a robot.

Here’s what the code for the initial form might look like.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Envoyer un message</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Send an SMS</h2>
  <form action="envoyer.php" method="POST">
    <div class="form-group">
      <label for="email">Nom et Prénom</label>
      <input type="tel" class="form-control"  placeholder="Nom et Prénom" name="firstlastname">
    </div>
    <div class="form-group">
      <label for="pwd">Email</label>
      <input type="email" class="form-control"  placeholder="Adresse Courriel" name="youremail">
    </div>
    <div class="form-group">
      <label>
         Votre Message
      </label>
      <textarea  class="form-control" placeholder="your message" name="yourmessage"></textarea>
    </div>
    <button type="submit" class="btn btn-primary form-control">Envoyer le message</button>
  </form>
</div>
</body>
</html>

Code 1 – Initial code without the captcha field

After adding the hidden field and the other parameters, we will have a form similar to the one below

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Envoyer un message</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Send an SMS</h2>
  <form action="envoyer.php" method="POST">
    <div class="form-group">
      <label for="email">Nom et Prénom</label>
      <input type="tel" class="form-control"  placeholder="Nom et Prénom" name="firstlastname">
    </div>
    <div class="form-group">
      <label for="pwd">Email</label>
      <input type="email" class="form-control"  placeholder="Adresse Courriel" name="youremail">
    </div>
    <div class="form-group">
      <label>
         Votre Message
      </label>
      <textarea  class="form-control" placeholder="your message" name="yourmessage"></textarea>
    </div>
     <input type="hidden" name="reponsecaptcha" id="recaptcha">

    <button type="submit" class="btn btn-primary form-control" name="envoie">Envoyer le message</button>
  </form>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=LA_CLE_DE_VOTRE_SITE"></script>
    <script>
        grecaptcha.ready(function () {
            grecaptcha.execute('LA_CLE_DE_VOTRE_SITE', { action: 'contact' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptcha');
                recaptchaResponse.value = token;
            });
        });
    </script>
</body>
</html>

Code 2 – Final code with the captcha field v3

Code comments

  • If you pay attention to Code 1 and Code 2, you will find that we have added a hidden field to line 28 of code 2. We have also added JavaScript code starting at line 33.
  • To activate reCAPTCHA V3 on your site, you must replace LA_CLE_DE_VOTRE_SITE with the key obtained in step 1.
  • On line 36, you will notice a parameter called “action:”. You can vary this setting depending on your goals. The action is the name of the action you would like to perform. To learn more about the different options available to you, please refer to the documentation for the different options.

If you were able to follow the instructions, you should see the Google reCAPTCHA icon appear on your site in the right corner and bottom of your site. It simply means that the captcha is activated; but not yet functional. We will see in the next step how to manage the sending of information.

Step 3 – Managing Server-Side Information

Managing data on the server side will simply consist of:

  • retrieve the information sent by the user,
  • check if its score is above average (usually 0.5)
  • Block the sending of the message if it appears suspicious.

Creation of the data reception file – send.php

We will create a PHP file that will allow us to retrieve the data submitted by the user. The file could have information similar to the data below:

<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {

    // Connecter à Google avec les clés
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'VOTRE_CLE_SECRETE';
    $recaptcha_response = $_POST['reponsecaptcha'];

    // Décoder les informations récupérées
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Effectuer une action en fonction du score obtenu.
    if ($recaptcha->score >= 0.5) {
        // Envoyer le couriel
    } else {
        // Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Affichez le message d'erreur.
    }

} ?>

Note

Please note that the PHP code uses the file_get_contents function which is not necessarily supported by all servers for security reasons or any other reasons. In this case, an alternative could be CURL which is highly recommended. By replacing file_get_contents with CURL, the above code will become:

<?php // Vérifier si le formulaire a été soumis
if(isset($_POST['envoie']) && isset($_POST['reponsecaptcha'])) {

    // Connecter à Google avec les clés
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'VOTRE_CLE_SECRETE';
    $recaptcha_response = $_POST['reponsecaptcha'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$recaptcha_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => $recaptcha_secret, 'response' => $recaptcha_response)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$capcharespo = curl_exec($ch);
curl_close($ch);
$Reponse = json_decode($capcharespo, true);

    // Effectuer une action en fonction du score obtenu.
    if ($Reponse['score'] >= 0.5) {
        // Envoyer le couriel
    } else {
        // Vous n'avez pas vérifier si l'utilisateur est un humain ou un robot. Afficher le message d'erreur.
    }

} ?>

Other forms of captcha that can help protect your website against spam

There are several other types of Captcha that can help fight spam. You might be interested in this article,

“Are you constantly receiving junk e-mail through your website?”

The article gives some examples of types of captchas.

Why the captcha v3

ReCAPTCHA v3, is the latest version offered by Google to help protect websites against unwanted emails. As a difference from the “I am not a robot” version, it does not add an additional field on the form. Therefore, this has the effect of reducing the loss of the number of customers. The “I’m not a robot” version can sometimes be frustrating if the visitor fails to solve the puzzle for some reason.

Conclusion

Captchas are a great way to protect websites from spam. Indeed, spam has quite harmful consequences on websites.

Thank you for taking the time to read our post. If you have any questions, please let us know leave a message . You can also contact us if you need help adding a captcha to your website.

 

Leave a Reply

Do you want a quality website, ecommerce or tools?

Please leave us a message, and an expert will contact you within the next few hours for a free 15 min consultation

  Free Estimate