Ce tutoriel à pour but de vous expliquer comment installer un captcha sur votre boutique Prestashop sans module. Le système de reCaptcha permet d’empêcher les robots d’envoyer des spams via votre formulaire de contact de votre site internet.
Depuis quelques semaines, de nombreuses boutiques Prestashop sont l’objet de SPAMs massifs. les spammeurs semblent être russes ou chinois ( mail.ru , mail.cn ….), ils sont souvent écris en Russes.
Ici, l’objectif est d’installer le captcha sur le contact form (la page contact de Prestashop) mais il peut être installer sur tous les autres formulaires (Avis fiche produit…).
Sommaire
Les étapes pour installer reCaptcha :
Les étapes suivantes permettent de configurer et mettre en place le système de reCaptcha de Google.
- S’inscrire sur le site de reCaptcha Google : https://www.google.com/recaptcha/
- Modification des templates contact-form.tpl et header.tpl
- Création d’une surcharge d’un controller pour vérifier la réponse de Google
- Rafraîchir le cache et profiter…
Création de votre compte et récupération des clefs :
La première étape de notre tutoriel consiste à créer votre compte sur le site internet de Google reCaptcha et de récupérer les clefs pour contrôler le système sur votre boutique. Via le panel administrateur de chez Google, vous pouvez visualiser les statistiques suivantes :
- Soumission réussie et échouée
- Sessions complétées
- Spam index ?
- Temps de réponse moyen.
Une fois avoir entré le nom de votre site ou projet, vous devez fournir à Google la liste des URLs qui pourront avoir accès à votre reCaptcha. Il est donc utile de fournir toutes les adresses de vos sites internet (environnement de préproduction, de test, développement en local…).
Dans le cas où, une de URLs n’est pas configurée, l’erreur suivante apparaîtra sur votre page :
Cannot contact reCAPTCHA. Check your connection and try again
Il suffit de rajouter l’URL correspondante dans l’admin reCaptcha ( https://www.google.com/recaptcha/admin ) et de sauvegarder.
A cette étape là, on a donc créé le compte sur reCaptcha et récupéré les clefs PULIC et PRIVE pour mettre en place le contrôle des SPAMS.
Modification des templates : contact-form.tpl & header.tpl
Dans cette étape, on va modifier les fichiers contact-form et header pour rajouter le captcha sur votre formulaire de contact.
1 – Modification du header.tpl
La modification du header va permettre de rajouter le script api.js, il suffit de rajouter la ligne suivante avant la fin du </head> du fichier.
<script src='https://www.google.com/recaptcha/api.js'></script>
Dans le cas d’un site multi-langue :
<script src='https://www.google.com/recaptcha/api.js?hl={$lang_iso}'></script>
2 – Modification du contact-form.tpl
L’objectif de la modification du contact-form est de rajouter le nouveau champs de Google reCaptcha pour vérifier si l’utilisateur est bien un humain.
Le principe est assez simple, il faut rajouter le champs suivant dans votre code HTML.
<div class="g-recaptcha" data-sitekey="MA_SITE_KEY"></div>
Pour savoir l’endroit ou bien placer l’élément, le mieux reste de faire des tests – d’ou l’interêt d’avoir plusieurs environnements (test / développement / préproduction…).
Mais généralement, il peut être intéressant de le placer en dessous de :
{if $fileupload == 1}
<p class="form-group">
<label for="fileUpload">{l s='Attach File'}</label>
<input type="hidden" name="MAX_FILE_SIZE" value="{if isset($max_upload_size) && $max_upload_size}{$max_upload_size|intval}{else}2000000{/if}" />
<input type="file" name="fileUpload" id="fileUpload" class="form-control" />
</p>
{/if}
<div class="g-recaptcha" data-size="compact" data-sitekey="MA_SITE_KEY"></div>
vers les lignes ~140 (attention, ça dépend de votre thème et de votre version de Prestashop).
Surcharge du controller : ContactController.php
Ici, le principe est d’envoyer à Google le résultat de la soumission du formulaire pour qu’il contrôle de son côté si c’est un humain ou un robot. Selon le résultat de cette réponse, on va continuer l’envoi du formulaire ou bloquer car c’est un SPAM.
ERRATUM : Une erreur s’est glissée dans le fichier ContactController.php – La nouvelle version est dispon
Le lien vers le fichier ContactController.php (Prestashop 1.6) : https://www.pastiebin.com/5a88cd7e079fc
Créez et copiez le fichier dans le dossier /overrides/controllers/front/ – il faut qu’il soit nommé : ContactController.php
/!\ IL FAUT REMPLACER LA CLEF SECRET A LA LIGNE 43 DU FICHIER ContactController.php /!\
A cette étape, tout est bon. On a créé le compte sur Google, ajouter le script et le formulaire de reCaptcha dans le formulaire et vérifié via les services de Google que le formulaire a été envoyé par un robot ou un humain.
Rafraîchir le cache et tester 🙂
Avec Prestashop, lorsqu’on ajoute une surcharge d’un controller ou d’une classe. Il faut supprimer le fichier « class_index.php » qui se trouve dans le répertoire « cache« . Ce fichier se régénère automatiquement s’il est inexistant.
L’utilisation des surcharges fait partie des bonnes pratiques du développement Prestashop. Cela permet de mettre à jour sa solution sans risque de perdre les modifications ou de conflits avec les mises à jour.
Module Prestashop :
J’ai découvert un module Prestahsop qui a été développé par EiCaptcha :
Module Captcha pour prestashop 1.6 et inférieur
Pour la version pour prestashop 1.7 merci de sélectionner la branche « 17 »
Il existe les versions pour les Prestashop 1.5, 1.6 et 1.7 disponible sur leur Github
Télécharger le module :
https://github.com/nenes25/eicaptcha/releases/
14 réponses sur « Bloquer les SPAMs grâce à Recaptcha sur Prestashop sans plugin »
Bonjour,
J’ai fais toutes les étapes et cela ne fonctionne pas.
Il est toujours possible d’envoyer un message sans cocher le recaptchat.
Une idée pour me guidée ? 🙂
Merci d’avance. 🙂
Bonjour Jonathan,
As tu bien supprimé le fichier « cache/class_index.php » pour prendre en compte l’override du controller ContactController.php
Super tuto!! Merci !!! Le seul problème c’est que j’ai 2 recaptcha qui sont apparus dans mon formulaire de contact XD. Et je n’ai pas encore trouvé le problème! Une idée?
Hello Etienne 🙂
Es tu sur de n’avoir qu’un seul ?
<div class="g-recaptcha" data-sitekey="MA_SITE_KEY"></div>
ou un plugin installé ?
🙂
ahaha merci, l’erreur de base!!! j’avais un plugin activé XD!!! Merci beaucoup!! Super tutoriel très clair de bout en bout!
Par contre, après avoir tout revérifié, quand je vais sur mon compte recaptcha, on m’informe de ça:
We detected that your site is verifying reCAPTCHA passed solutions less than 50% of the time. This could indicate a problem with your integration with reCAPTCHA. Please see our developer site for more information.
Et c’est vrai que je reçois moins de mail en russe, mais j’en reçois quand même!
Avez vous eu ce soucis déjà? Merci d’avance
Etienne
Salut Etienne.
Intéressant ce point. Non, je n’ai pas eu ce genre d’erreur mais est ce liée à la double utilisation du captcha ?
Depuis que tu as corrigé le soucis est mieux ?
Bonjour,
Je me trouve dans la meme situation que » Etienne » et pas de solution, merci de votre aide. Sur un site de test .
Cdt
Nadine
Bonjour, votre méthode est valable sur quel version de prestashop?
Que veut dire cet erratum « ERRATUM : Une erreur s’est glissée dans le fichier ContactController.php – La nouvelle version est dispon » ?
La module a télécharger sur https://github.com/nenes25/eicaptcha/releases/
offre plusieurs module pour la version 1.7. Dont un qui refuse de s’installer et un autre qui n’affiche le captcha que sur le formulaire d’inscription et pas sur le formulaire de contact.
Malgrés avoir bien entendu bien coché les cases faites pour ça.
Et le dev ne semble pas tres clair dans les explications…
Auriez vous des idées a explorer ?
Merci beaucoup.
Merci pour le tuto. A noter que le module proposé à la place de la modif à la main, je l’avais testé au préalable de la recherche de ce tuto et il ne fonctionne pas.
Bonjour,
Merci pour ce tuto simple rapide et efficace.
j’ai fait ce tuto pour une version 1.7 de prestashop et il y a quelque petit changement que voici
pour le fichier contact il faut prendre celui qui ce trouve dans le dossier VOTRE_THEME/templates
pour celui du header ces dans le dossier VOTRE_THEME/templates/_partials
pour le reste cela ne change pas
encore merci a toi pour ce tuto
cordialement
Bonjour, et merci pour ce tuto.
Aurais-tu la même chose pour le formulaire d’inscription ?
En ce moment je suis spamé sur des créations en masse.
Merci,
Patrick
Allo Patrick,
As tu testé cette solution?
https://www.prestashop.com/forums/topic/981158-securite-spam-compte-client-solution-13-17/
Bonjour, google recaptcha me note « Nous avons détecté que votre site ne vérifiait pas les solutions fournies aux tests reCAPTCHA. Vous devez les vérifier afin d’utiliser correctement la fonctionnalité reCAPTCHA sur votre site. Pour en savoir plus, veuillez consulter notre site pour les développeurs. »
Je ne sais pas où j’ai une erreur. J’ai modifié le ContactController.php parce que ‘javais l’ancien, vidé le cache, mais rien n’y fait. Est-ce que je peux vous envoyer mes fichiers ? Merci