Tuto gratuit : ajouter reCAPTCHA à PrestaShop

PrestaShop
  • Accueil
  • Blog
  • Tuto gratuit : ajouter reCAPTCHA à PrestaShop

Vous avez une boutique sous PrestaShop ? Vous avez donc sûrement déjà reçu des spams et on sait tous combien c’est anti-productif et désagréable. Voyons comment s’en débarrasser…

Comment intégrer un captcha à PrestaShop ?

Avant tout, un petit rappel sur deux notions :

  • spam : il s’agit des courriels indésirables.
  • captcha : il s’agit d’un test / questionnaire visant à prouver que le répondant n’est pas un ordinateur.

Penchons-nous à présent sur l‘intégration sous PrestaShop d’un captcha et plus précisément du reCAPTCHA de Google.
 

Etape 1

Paramétrer votre compte à Google reCAPTCHA à https://www.google.com/recaptcha
Libellé : nom indicatif pour le reCAPTCHA
Domaines : indiquez votre nom de domaine sous la forme « arnaud-merigeau.fr » et « www.arnaud-merigeau.fr »
Vous aurez ainsi les clés fournies par Google ; ne fermez pas la page.
google-reccaptcha-prestashop

Etape 2

Télécharger le module PrestaShop captcha et installer le module de manière classique : module PrestaShop captcha.
module-captcha-prestashop

Etape 3

Configurer le module PrestaShop captcha dans le back office et coller les clés publique et secrète fournies par Google reCAPTCHA.
module-captcha-prestashop2

Etape 4

Faire une copie du fichier www/themes/mon-theme/contact-form.tpl (toujours faire des sauvegardes).

Etape 5

Ouvrir le fichier www/themes/mon-theme/contact-form.tpl et chercher le code suivant (ligne 148 pour PrestaShop 1.6.1.6) :

<div class="submit">
<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>{l s='Send'}<i class="icon-chevron-right right"></i></span></button>
</div>

Coller juste avant le code suivant en remplaçant « YOUR_PUBLIC_KEY » par votre clé publique fournie par Google reCAPTCHA :
{if $captcha}
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>
{/if}

Enregistrer le fichier et renvoyer sur le serveur via votre client FTP si votre site est en ligne.

Etape 6

Rafraichir la page contact et admirer le résultat 😀
module-captcha-prestashop3
 

Bonus : Captcha sous WordPress

Le problème reste entier pour les propriétaire des sites sous WordPress. Voici donc une liste non exhaustive de plugins pour intégrer un captcha sous WordPress :
Contact Form 7 Simple Recaptcha : à utiliser avec le connu plugin Contact Form 7.
Captcha Bank : puissant plugin avec configuration aisée pour une protection maximale.
Confident CAPTCHA : plugin basé sur la reconnaissance d’images, simple et efficace.
SweetCaptcha : protège vos formulaires, commentaires et autres zones de saisie laissées via des énigmes visuelles très simples.
FunCaptcha : plugin affichant des lettres entremêlées ou des jeux visuels, le tout en anglais.
 

199 commentaires sur “Tuto gratuit : ajouter reCAPTCHA à PrestaShop

  1. Bonjour,
    En utilisant votre tuto, j’ai ce message d’erreur qui s’affiche désormais sur toutes les pages om le captcha doit apparaître :
    Il y a 1 erreur :
    Confirmez que vous n’êtes pas une machine
    j’ai beau cherché je ne comprends pas.
    D’avance merci de votre retour,
    cordialement,

    1. Bonjour Guillaume,
      Si vous n’arrivez pas à faire l’installation je peux m’en charger. Envoyez-moi une demande via mon formulaire de contact svp.

  2. Bonjour
    Merci pour ce plugin gratuit et tutos.
    J’aimerais afficher le message d’erreur en francais .. ou est ce que cela se modifie ?
    Merci de votre aide
    Paolo

    1. Bonjour Paolo,
      Avec plaisir pour le tuto PrestaShop 😉
      Pour les textes, il faut aller dans le back office > localisation > traductions, puis sélectionner dans les menus déroulants : traductions du thème / votre thème / français.
      A bientôt !

  3. Bonjour Arnaud, merci pour ce tuto. Je n’ai moi aussi rien qui s’affiche, le div censé contenir la captcha est vide… pourriez-vous m’aider svp ?
    merci, Clément

    1. Bonjour Clément,
      Avez-vous bien suivi toutes les étapes du tuto car de mon côté sur PrestaShop 1.6.1.16 ça fonctionne très bien ?

  4. Merci pour ce tutoriel ! Ca fonctionne très bien !
    Pourriez-vous considérer un tutoriel pour « Invisible Recaptcha » sous Prestashop ?

    1. EDIT: De temps à autre (50% du temps) le bouton recaptcha ne s’affiche pas. Je dois actualiser la page pour qu’il apparaisse.. La console m’indique l’erreur suivante lorsque le bouton n’est pas affiché:
       » Error: ReCAPTCHA placeholder element must be an element or id  »
      Par ailleurs, lorsque le recaptcha est affiché et que l’on doit choisir les images à cocher, la dernière ligne d’images est tronquée. Après plusieurs recherches je n’explique pas ces problèmes(Pas de conflits de css).
      Cordialement.

  5. Bonjour,
    L’installation a bien fonctionné, mais j’ai ce message au dessus du captcha
    Notice: Undefined index: captcha in /home/monsitew/www/cache/smarty/compile/5e/38/3d/5e383ddfaccc871de9bf1076724d9bc0aa1f4a03.file.contact-form.tpl.php on line 244
    Notice: Trying to get property of non-object in /home/monsitew/www/cache/smarty/compile/5e/38/3d/5e383ddfaccc871de9bf1076724d9bc0aa1f4a03.file.contact-form.tpl.php on line 244
    Savez-vous à quoi cela est du svp ?
    Merci

    1. Bonjour, je rencontre le même souci, exactement les mêmes messages, avec une seule différence (mention de la ligne 258), ma version Presta 1.6.1.5. La condition que vous proposez « {if isset($captcha) && $captcha} {
      } doit être mise où svp?
      Merci pour votre réponse 🙂

    2. Bonjour,
      Je rencontre le même souci. Bien sûr mode débug activé ! ça me permet de comprendre pourquoi le module captacha n’apparaît qu’une fois sur 2.
      C’est Notice souligne le fait que la variable captcha n’est pas assignée au smarty ! c’est cette variable qui est testé dans le {if $captacha}.
      Elle doit être assigné au moment de l’installation du module, en faisant un override de ContactController.php (si c’était bien fait).
      Du coup à quoi correspond la variable $captcha ? que faut-il tester ? (que je puisse l’assigner manuellement au smarty)

  6. Bonjour,
    sauf erreur de ma part, cela ne bloque pas les soumissions automatisées via une requête POST sur la page contact.
    Par ailleurs il suffit de télécharger le JS pour pouvoir poster sans même afficher le captcha.
    Par conséquent c’est bien joli mais ça ne sert à rien du coup…

    1. Bonjour,
      Je n’ai pas compris la remarque « il suffit de télécharger le JS pour pouvoir poster sans même afficher le captcha » pour pouvoir vous répondre, si vous pouvez l’expliquer ?
      Etonnant comme retour d’ailleurs, car un PrestaShop comme http://www.framapack.fr/fr/contactez-nous a bien reCaptcha installé et plus aucun spam depuis.

    2. Je confirme ce que tu dis, je installé ton plugin, ça fonctionne nickel si tu passe par le formulaire, en revanche c’est inefficace en cas de d’attaque automatisée, je continue de prendre des spams toutes les 5 sec.

  7. Bonjour,
    Merci pour ces infos. J’ai bien tout suivi, ça marche nickel, mais j’ai reçu un mail de google pour le passage en recaptcha v2. Il dit que le module est en V1, et que cette version va être abandonnée début 2018. Est-ce que vous savez si le module peut être mis à jour pour un passage en recaptcha v2 ?
    Merci

    1. Bonjour Axel, le module peut être mis à jour en effet ou alors je vais publier un tuto pour recaptcha v2 sinon. Je me note cela dans ma todo list 😉

    2. Merci du retour. Je suis en Prestashop 1.6, est ce que je peux continuer à utiliser le même module et simplement créer une nouvelle clé v2 chez Google et utiliser les codes de cette nouvelle clé ?

  8. Je confirme les propos de koko89, le hook ne fonctionne pas à la validation côté serveur, pour reproduire : supprimer dynamiquement le bouton submit dans l’éditeur DOM d’un outil de debug (type Firebug ou outil natif Chrome ou Firefox) et le recréer. La suppression des controles JS permet de passer sans le captcha…
    Reproduit avec la version 0.4.3 et 0.4.9 du module sur Prestashop 1.6.1.13 (version 0.4.10 non compatible)

  9. Bonjour,
    même remarque que Fred, nous sommes fortement spammé malgré le captcha en place « (AM) eicaptcha v0.4.3 – par eicaptcha ».
    J’ai simplement désactivé le javascript sur Chrome, et le formulaire n’affiche plus le recaptcha, les spams passent.
    Dommage, existe-il d’autres modules gratuit de ce type ? Sinon il faut passer par un payant ou développer soit même cette fonctionnalité.

    1. Bonjour Valentin,
      Même remarque, je vais faire remonter au développeur du module qui a pris de son temp pour une solution efficace tout de même. J’ai des clients qui avaient des problèmes de spams et qui n’ont plus de problème à présent.
      Il doit sûrement y avoir des modules payants sur Addons je pense sans trop chercher.
      Merci 🙂

    2. Ok, merci,
      je vais donc enlever ce formulaire pour éviter le spams en attendant de trouver une meilleur solution.
      Pour l’explication : en désactivant le javascript sur Chrome, le formulaire n’affiche plus le recaptcha, les spams passent.

    3. Bonjour Arnaud,
      vous devriez mettre à jour le lien de la version du module avec celui du message de :
      WEBDEV says:
      28 février 2018 à 18:14
      Après vérification, cela ne pose plus de soucis sur la dernière version 0.4.12 du plugin eicaptcha.
      https://github.com/nenes25/eicaptcha/releases/tag/0.4.12
      Effectivement, maintenant avec cette version 0.4.12, en désactivant javascript, le formulaire ne passe plus, donc plus de spams.
      Bonne journée

  10. Bonjour,je ne sais plus quoi faire … je reçois en masse des spams via mon formulaire : texte en chinois et mail finissant par @qq.com. Mon hébergeur m’a bloqué déjà 4 fois malgré les modifs que j’ai pu apporter. j’ai supprimé le module SendToAfriend, j’ai mis le recaptcha de google. mais rien n’y fait….vous n’auriez pas une solution? merci

    1. Bonjour Bernard,
      Avez-vous testé avec le tuto indiqué ici ?
      Si oui et si cela ne fonctionne pas, il faudrait savoir comment les mails sont envoyés exactement.
      Un cas client nécessitait une intervention spécifique avec un développement particulier, dans ce cas il faut me faire un mail avec vos coordonnées, l’url du site et le maximum de détails.
      Merci 🙂

    2. Bonjour Bernard et Arnaud,
      Idem pour moi beaucoup de spam en provenance de qq.com, clairement identifié en Chine,
      avec un blocage de l’hébergeur une fois.
      Un moyen momentané est de bloquer l’adresse ip et/ou le domaine qq.com via le fichier htaccess
      avec :
      Deny from qq.com
      Deny from 46.105.49.121 (à remplacer par votre IP)

    3. J’ai le même problème que toi depuis ce matin, j’ai trouvé une solution provisoire en renommant la page contact « contactez-nous » en « contactez-la-societe » par exemple, via l’onglet SEO & URLs. Ca à l’air de fonctionner mais cela reste une rustine malgré tout.

      1. Bonjour Pascal, Vincent,
        Merci pour vos retours et les pistes de solutions que vous proposez.
        Ce qui est délicat, c’est de s’adapter aussi vite que les spammeurs qui trouvent toujours de nouvelles solutions pour envoyer des mails en masse.
        A bientôt 😀

  11. Bonjour,
    Merci pour ce tuto. En revanche j’ai le message d’erreur suivant sur la page de mon site au niveau du captcha
    ERREUR pour le propriétaire du site : Clé de site non valide
    Auriez vous une solution?
    J’ai suivi toutes les étapes ci-dessus.
    Merci d’avance

    1. Bonjour Eric,
      Je pense que vous devez bien vérifier le domaine pour lequel vous avez validé la clé et vérifier aussi la clé copiée.
      C’est dans ces données qu’il y a une erreur.
      Bon courage 🙂

  12. Bonjour,
    J’arrive à faire toutes les étapes, mais pour modifier le fichier .tpl impossible, il est en lecture seule.
    Y a t-il une astuce ?
    Merci

    1. Bonjour izart,
      Dans ce cas, essayez de le renommer avec le suffixe « _bkp » puis envoyer le fichier modifié.
      Si cela ne fonctionne pas, vous devez demander à votre hébergeur de changer le groupe et propriété du fichier par celui de votre accès ftp.
      A bientôt 🙂

    2. Bonjour, je n’arrive pas à trouver le fichier en question, je suis sur prestashop 1.6.1.12, pourriez vous m’aider? Merci

      1. Bonjour,
        C’est le même fichier www/themes/mon-theme/contact-form.tpl que vous renommez simplement puis vous appliquez ma recommendation proposée à Izart 🙂

  13. Et bien du coup, une erreur 500 sur la page de contact et impossibilité de supprimer le module (bugs lié aux overide je pense), dernière version du module téléchargée via github sur ps 1.6.1.6 (module branche des 1.6)
    Je pense qu’il faut modifier la partie uninstall du fichier php.. besoin d’un peu d’aide..
    [PrestaShop] Fatal error in module file :/var/www/*****************.fr/www/classes/module/Module.php:
    Uncaught exception ‘ReflectionException’ with message ‘Class ContactControllerOverrideOriginal_remove5a744f835bdde does not exist’ in /var/www/*********************.fr/www/classes/module/Module.php:2944 Stack trace: #0 /var/www/*************************.fr/www/classes/module/Module.php(2944): ReflectionClass->__construct(‘ContactControll…’) #1 /var/www/**********************.fr/www/classes/module/Module.php(2749): ModuleCore->removeOverride(‘ContactControll…’) #2 /var/www/********************.fr/www/classes/module/Module.php(647): ModuleCore->uninstallOverrides() #3 /var/www/******************.fr/www/modules/eicaptcha/eicaptcha.php(68): ModuleCore->uninstall() #4 /var/www/****************.fr/www/controllers/admin/AdminModulesController.php(681): EiCaptcha->uninstall() #5 /var/www/****************.fr/www/controllers/admin/AdminModulesController.php(1109): AdminModulesControllerCore->postProcessDelete() #6 /var/www/******************.fr/www/classes/controller/Controller.php(178): AdminModulesControllerCore->postProcess() #7 /var/www/j

  14. pour desinstaller j’ai supprimé le fichier de l’override du module, puis celui copié dans le dossier des overrides de prestashop (ContactController.php)
    alléluia

  15. je viens d’installer le module mais j’ai une erreur 500 après la soumission du formulaire de contact. une idée du problème ?

  16. Bonjour,
    j’ai une erreur 500 après la validation du formulaire de contact, du coup ça stop le spam… mais plus personne ne peut me contacter, avez vous une idée du problème ?

    1. Bonjour Jimmy,
      FR-MHS a répondu à ce sujet précédemment dans les commentaires pour faire gagner du temps aux autres justement 🙂
      A bientôt

  17. Bonjour,
    Merci pour ce module mais j’ai un soucis.
    Il fonctionne très bien sur mon sous domaine mais pas sur mon domaine principale. J’ai effectué les mêmes manip, j’ai désinstallé – réinstallé mais impossible de le faire fonctionner.
    Le problème est que l’on peut envoyé le mail sans valider le captcha.
    Une idée sur d’où ça pourrait venir ?
    Merci d’avance.

    1. Bonjour Rafik,
      Attention à bien indiquer tous les domaines et sous-domaines lorsque vous demandez une clé à Google pour reCaptcha.
      Bonne journée.

  18. A la suite de mon commentaire précédent voilà ce que je peux ajouter. Après avoir cliqué sur envoyer j’ai cette erreur qui apparaît dans la console : Uncaught Error: Invalid ReCAPTCHA client id: 0.
    Merci

  19. Hello Arnaud,
    your module is very interesting and I installed it. The module shows reCaptcha box but the SEND button is not shown (see https://snag.gy/ZA7qOv.jpg)
    Tested in Chrome and Firefox, using PrestaShop 1.6.1.5
    Can you help fix my problem?
    Thanks
    Navid

    1. Hello Navid,
      Thanks for comment. As I haven’t the source code, I can’t tell you what’s wrong. Could you send me an e-mail with all details please ?
      Regards

  20. Bonjour,
    J’ai suivi votre tutoriel à la lettre, le reCapatcha s’affiche et est requis pour envoyer le message seulement il ne fait pas la différence entre humain et robot … je continue de recevoir une 50aine de message du même spammeur … Je suis allé dans le back office de reCaptacha et il y a ce message d’alerte : We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.
    Comment régler ce problème ? Merci d’avance 🙂

    1. Bonjour Gilles,
      Une autre solution contre le spam sous PrestaShop testée fonctionnelle : changer l’url de la page contact puis installer ce module : fail2ban.

  21. Bonjour Arnaud,
    Merci pour ton tuto, cela fonctionne à peu près! En effet sur explorer j’ai pas de souci, mais avec mozilla, le captcha apparait que lorsque j’actualise la page. Une idée du souci? De plus les spams continue malgré ça donc il ne dois pas s’afficher correctement à temps. Merci

    1. Bonjour Arnaud, et bien écoute, je remis mozilla au réglage par défaut et vider le cache et pour le moment cela fonctionne. Je garde ta solution au cas ou cela reviens. Merci à toi.

  22. Bonjour Arnaud,
    Encore une fois un énorme merci pour ce tutoriel juste parfait qui permet de mener à bien cette mission soi-même !
    Bonne continuation,
    Marvin

  23. Bonjour,
    j’ai installé le module en suivant scrupuleusement la procédure.
    La page de mon formulaire m’indique « Impossible de contacter le service reCAPTCHA. Veuillez vérifier votre connexion avant de réessayer. » sans afficher la div re-captcha.
    Quelque chose m’échappe….