Comment intégrer "No CAPTCHA reCAPTCHA" sur votre site

() translation by (you can also view the original English article)

Les champs CAPTCHA sont probablement l'expérience la plus frustrante sur le net. Ils sont assez douloureux pour la majorité des utilisateurs, alors imaginez ce qu'il en est pour les personnes atteintes de déficience visuelle ou ceux utilisant les technologies fonctionnelles comme les lecteurs d'écran. Cependant, malheureusement, les CAPTCHA sont vital dans la lutte contre le spam.

A necessary evil thanks spammers — Un mal nécessaire (merci aux spammers)

Paradoxalement, même si les CAPTCHA traditionnels de type "texte déformé" sont difficiles à lire par les humains, pour les intelligences artificielles modernes c'est assez simple. Google utilise ce genre de technologie pour lire les numéros de maison et les panneaux de signalisation pour valider les emplacements sur Google Street View!

Les robots Google peuvent correctement lire ceux ci.

C'est donc logique que les développeurs de Google aient fourni le meilleur CAPTCHA jusqu'à présent, depuis la fin 2014. No CAPTCHA reCAPTCHA ne demande rien de plus qu'une touche du doigt, un clique de souris ou mettre le focus sur le champ et appuyer sur la touche espace.

Dans la plupart des cas c'est aussi simple que ça, mais si l'analyse des risques de Google n'est pas sûr que vous soyez humain une seconde fenêtre apparaitra.

Vous pouvez le voir en action partout sur internet comme sur la page de soumission de @materialup.

Obtenir No CAPTCHA reCAPTCHA

Ne tournons pas autour du pot et configurons No CAPTCHA.

Étape 1

Premièrement, il nous faut une clé API, rendez-vous sur https://www.google.com/recaptcha/admin. Pour accéder à cette page il faudra vous connecter avec un compte Google. Vous devrez enregistrer votre site, donnez lui un nom correct puis listez les domaines (par exemple tutsplus.com) sur lesquels ce reCAPTCHA sera utilisé. Les sous-domaines (comme webdesign.tutsplus.com et code.tutsplus.com) sont automatiquement pris en compte.

Étape 2

Une fois cette étape faite vous obtiendrez un clé pour le site ainsi que sa clé secrète :

Étape 3

Sous les clés vous pourrez voir quelques exemple pour inclure reCAPTCHA sur votre site. Tout d'abord en JavaScript :

1	<script src='https://www.google.com/recaptcha/api.js'></script>

Vous pouvez aussi définir quelle langue parmi les 40 disponibles en ajoutant un paramètre. Ici nous ajoutons es qui nous donnera un reCAPTCHA en espagnol :

1	<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>

Mettez cette balise script en bas de votre page (ou juste sous le formulaire dans lequel le reCAPTCHA apparaitra, suivant comment vous priorisez le chargement de vos resources).

Étape 4

En suite il faut ajouter le placeholder dans votre formulaire à l'endroit o^vous souhaitez faire apparaitre le reCAPTCHA :

1	<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

Note : l'attribut data-sitekey contiendrala valeur de votre clé, pas cet exemple.

Il existe d'autres attributs que vous pouvez ajouter pour personnaliser l'apparence et les fonctionnalités de votre reCAPTCHA. Par exemple, ajouter data-theme="dark" à cet élément div affichera une version sombre qui pourrait mieux correspondre à votre interface :

Pour plus de détails sur la configuration de votre reCAPTCHA consultez developers.google.com.

Application

Maintenant que nous avons les ingrédients il est temps de les mettre en place dans un environnement de test.

Étape 1

Mettons notre balise script et notre placeholder dans un formulaire :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

      <input type="submit" value="Submit" />

    </form>

    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>

  </body>
</html>

Ici nous avons utilisé une structure de page classique avec un formulaire qui contient un champ name, un champ email et un bouton de soumission. Il n'y a pas le moindre style parce que ce n'est pas vraiment nécessaire dans le cadre de ce tutoriel.

our captcha form — Vous devez avoir quelque chose qui ressemble à ceci

Pour démontrer que le test reCAPTCHA a été un succès nous devons ajouter des controles coté serveur. Dans ce cas nous allons le faire en PHP, enregistrez ce fichier dans un nouveau projet en tant que index.php.

Étape 2

Vous avez remarqué que la méthode du formulaire est post, donc lorsque nous soumettrons le formulaire les valeurs seront retournées sur cette page dans un tableau. On peut afficher ces variables en itérant dessus, ajouter le code suivant dans votre page :

    <?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

Ce code affiche les paires de clé/valeur présentent dans le tableau $_POST avec un peu de formatage. Lorsque vous soumettez le formulaire vous devriez voir quelque chose que ça :

Vous voyez les valeurs pour name et email, mais aussi une valeur pour g-recaptcha-response. Si vous échouez au test CAPTCHA cette valeur sera vide, mais si vous avez coché la case "Je ne suis pas un robot" vous verrez une énorme chaine de caractères.

C'est cette valeur qu'il faut envoyer à Google pour qu'elle soit vérifiée, faisons le.

Étape 3

Heureusement, l'équipe de développement de Google a fait tout le travail pour nous, consultez le projet Github de ReCAPTCHA et obtenez une copie de la librairie recaptchalib.php. Placez le à la racine de votre projet et incluez le en haut de votre fichier index.php :

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

Étape 4

Cette libraire contient une collection de fonctions qui envoie le g-recaptcha-response (ainsi que votre clé secrète) à Google via une requête HTTP. Puis elle recoit la réponse et vérifie si le CAPTCHA est valide ou non. Pour l'utiliser nous devons d'abord définir quelques variables avant la balise de fermeture de PHP :

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

ReCaptcha() vérifie si votre clé secrète est présente. Sinon elle arrète le processus et nous demande d'en obtenir une. Puis nous continuons avec :

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

Étape 5

Supposons que tout a fonctionné pour notre formulaire, la variable $response retournera "success" et nous pouvons continuer à le traiter. Voici à quoi cela peut ressembler : supprimer la boucle d'affichage des données brutes et ajouter le contrôle suivant avant le formulaire :

    <?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

Enfin, ajouter une balise de fermeture de PHP après le formulaire :

1	<?php } ?>

Ce qui permet d'afficher le formulaire, tant qu'il n'a pas été soumis avec succès, auquel cas une notification de remerciement est affichée. La démonstration finale.

Conclusion

C'est une implémentation PHP rudimentaire de No CAPTCHA reCAPTCHA. Ce code est ouvert à toutes les améliorations mais vous fourni une bonne base qui couvre les fondamentaux. Nous devons la librairie à l'équipe de développement de Google et je voudrais remercier Matt Aussaguel pour me l'avoir montré.

Ressources utiles

ReCAPTCHA 1.0.0 sur Github
Documentation ReCAPTCHA
Êtes-vous un robot? Introducing “No CAPTCHA reCAPTCHA” sur le Google Security Blog
WordPress ReCaptcha Integration plugin reCaptcha pour formulaire de connexion, d'inscription et de commentaires, Ninja Forms et Contact Form 7