Bloquer les SPAMs grâce à Recaptcha sur Prestashop sans plugin
Ce tutoriel à pour but de vous expliquer comment installer un captcha sur votre boutique Prestashop sans module. Le système de reCaptcha permet…
Sommaire
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…).
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.
Configurer les domaines protégés des SPAMs grâce à reCaptcha
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.
Récupération des clefs publics pour contact-form.tpl et header.tpl
Clefs Privées pour l’étape 2 ( ContactController.php )
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