22
Mai

[TUTO] : Je ne suis pas un robot ! ReCaptcha de Google

Voilà quelques semaines maintenant que le nouveau « ReCaptcha » de Google est sorti. Et si on regardait ensemble comment l’implémenter ?

recaptcha

1 – Préparation

Pour implémenter ReCaptcha vous allez avoir besoin de clés privées et publiques afin de communiquer de façon sécurisée avec les services de Google.

Pour ça rien de plus simple. Vous vous rendez là : https://www.google.com/recaptcha/admin. Et vous enregistrez votre nom de domaine, pour enfin récupérer la clé publique et la clé secrète.

2 – Le formulaire

Vous devez maintenant implémenter le bouton. Pour cela vous devez insérer ce script dans votre site :

Google préconise de le mettre juste avant la balise fermante </head> .

Ensuite dans votre formulaire donc entre les balises <form>  et </form>  vous devez insérer ce bout de code à l’endroit où vous voulez faire apparaitre le bouton :

N’oubliez pas d’y ajouter votre clé publique obtenue précédemment.

3 – Validation du formulaire

Il reste encore une étape à effectuer, c’est de pouvoir valider si oui ou non, vous avez à faire avec un robot ou non. J’utilise ici PHP, mais vous pouvez bien entendu adapter le code à vos besoins.

Lors de la réception des données, vous avez un champ nommé « g-recaptcha-response », vous devez le récupérer et faire un appel en POST à l’API de Google ReCaptcha qui vous retournera la réponse. Vous avez donc plusieurs possibilités pour effectuer cette requête POST. Je vous livre ici une fonction toute prête utilisant cURL.

Cette fonction (reprise entièrement du tutoriel de grafikart) n’est pas bien compliquée à comprendre. Elle prend en premier paramètre le code de retour obtenu « g-recaptcha-response », et l’adresse IP de l’utilisateur en option. Elle exécute la requête cURL (ou un file_get_contents()  si pas dispo) et retourne « true » ou « false » selon la réponse de l’API de Google.

Le seul point de détail de cette fonction à améliorer, c’est l’utilisation de file_get_contents() car il faudrait ici lui préciser de faire une requête en POST.

Vous l’aurez compris, il vous suffit maintenant d’appeler cette fonction pour savoir s’il s’agit d’un robot ou non.

Conclusion

Et voilà, votre captcha anti-méchant est maintenant en place. On se demande toujours comment Google fait pour s’assurer de savoir si c’est un robot ou non, mais en tout cas, ça à l’air efficace !

[MàJ 25/05] Voici une proposition (appétissante) de google lorsqu’il n’est pas certain que vous êtes un humain.

sushiGoogle

Top

19 Commentaires

  1. Bonjour. Mille mercis Thomas pour ces lumineuses informations. J’ai eu pour ma part beaucoup de chance : après avoir obtenu mes deux clés chez Google, je me suis aperçu que mon thème premium supportait l’option reCAPTCHA ! Il m’a suffi de renseigner les deux clés dans leurs options générales. Le plus fou c’est que deux clés Google (la publique et la secrète) étaient déjà renseignées (les concepteurs du thème ont sûrement fait le nécessaire). Je donne ces infos à toutes fins utiles, sait-on jamais, si ça peut mettre la puce à l’oreille à d’autres utilisateurs en leur évitant des manips …

    Cela dit j’ai été très heureux d’apprendre comment tout cela fonctionne 🙂

    1. Bonjour Bernard,

      d’abord merci pour votre retour !

      En effet aujourd’hui cette option est souvent incorporée dans les thèmes ou différents plugins.
      Par exemple, le plugin très répandu « Contact Form 7 » intègre lui aussi le reCaptcha de Google (https://contactform7.com/recaptcha/)

  2. Pauline Fillâtre dit :

    UPDATE :
    Je viens de comprendre comment ça marche ! 😉
    Merci

    1. Mikado dit :

      Bonjour Pauline,
      Je suis dans la meme situation que vous.
      Comment avez vous résolu le probleme?

      Merci

    2. Pauline Fillâtre dit :

      Salut Mikado, contente d’apprendre que vous avez résolu le problème 😉

      1. Mikado dit :

        Non justement je ne l’ai pas résolu.
        Comme vous dans mon formulaire, le message s’envoie lorsque je clique sur « ENVOYER » meme si le captcha n’a pas été vérifié.

        Comment avez vous résolu le problème?

        Merci

        1. Pauline Fillâtre dit :

          En fait, je me compliquais la vie. Je pensais qu’il y avait plusieurs codes à insérer mais en fait c’est assez simple.
          Dans votre formulaire de contact (Contact Form 7), il faut ajouter le tag [recaptcha] à l’endroit souhaité.
          Puis dans l’onglet « Intégration » du menu Contact sous WordPress, il faut configurer les clés (clé du site et clé secrète). Pour avoir ces informations, il faut avoir un compte Google et y renseigner le site web.
          Le mieux est peut-être de recommencer la manipulation pour refaire ces différentes étapes. C’est ce que j’avais fait
          J’ai suivi les différentes étapes de cette page : https://contactform7.com/recaptcha/
          J’espère que vous allez réussir à résoudre votre problème 😉

          1. Mikado dit :

            Merci pour votre réponse.
            Je vais voir si j’y arrive car je n’utilise pas WordPress.
            Merci pour l’aide en tout cas. Je suis photographe donc pour vous remercier si vous êtes de passage dans la région parisienne je vous ferais une remise 😉
            Bonne journée
            http://www.photos-abricot.fr

          2. Pauline Fillâtre dit :

            Merci Mikado 😉

  3. Pauline Fillâtre dit :

    Bonjour, je viens de lire votre article. Je souhaite installer un Captcha dans mon formulaire de contact sur mon blog WordPress. J’ai utilisé Contact Form 7 pour créer mon formulaire de contact. J’ai réussi la première partie de l’installation, à savoir, faire apparaître le captcha dans mon formulaire. J’ai fait un test mais que le captcha soit coché ou pas, le message est envoyé, il n’y a pas de vérification.

    Il faut donc que je passe à la deuxième partie, la vérification du formulaire. Le problème, c’est que je ne sais pas où mettre le code php en question. Je ne suis pas douée en php, ce n’est pas ma partie préférée.
    J’utilise le template Willow dans WordPress. Pensez-vous que je dois copier/coller le code php dans mon fichier header.php ? Ou un autre fichier peut-être ?

    Merci d’avance pour votre réponse 😉

    1. Bonjour Pauline,

      Tout d’abord, ce tuto pour installer un captcha n’est destiné qu’à une implémentation « en dur ». Hors ici vous indiquez que vous utiliser le plugin contact form 7.

      Pour installer un captcha avec contact form 7, vous n’avez normalement aucun code à écrire. Pour ce faire, je vous conseille de suivre cette page d’aide officielle : http://contactform7.com/recaptcha/

      1. Pauline Fillâtre dit :

        Merci Thomas d’avoir pris le temps de répondre à mon commentaire. J’ai déjà essayé en suivant les explications de la page http://contactform7.com/recaptcha/
        Mais je pensais qu’il fallait quand même intégrer du php quelque part. Je vais réessayer avec la méthode fournie dans le lien que vous m’avez fourni.
        Sur la page de Google Recaptcha, il est indiqué qu’il y a deux étapes à suivre, l’intégration côté client et l’intégration côté serveur.
        Vous pensez que l’intégration côté serveur n’est donc pas à réalisé lorsque l’on utilise Contact Form 7 sous WordPress ? Cela se fait tout seul ?
        https://uploads.disquscdn.com/images/3fcff7a611af40f8cc0141844910c984dbda3a3ff0e878e36ee15b04bc134e10.jpg

        1. Exactement. Normalement, même la partie coté client est faite par le module. Vous avez juste besoin de renseigner vos clés dans le module et le configurer comme demandé.

          1. Pauline Fillâtre dit :

            Merci Thomas 😉 Bonne journée à vous

          2. Pas de problème !

            Bonne journée.

      2. Pauline Fillâtre dit :

        UPDATE : Je viens de suivre votre conseil et ça marche parfaitement. Excusez-moi, j’avais dû m’emmêler les pinceaux la première fois.
        Merci encore Thomas 😉 Bonne journée

  4. Odin Laura dit :

    oui et bien c’est très pénible pour chaque episodes ou film je doit remplir ce « jeu » plus que pénible !!!!!!

  5. bloublou dit :

    Vous auriez pas laissé votre clé secrète dans la fonction de vérification ?

    1. Ah ah, non quand même !

      C’est une clé qu’on a créé pour tester l’outil, et qui a été supprimée avant la publication de l’article.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *