Bloquer les SPAMs grâce à Recaptcha sur Prestashop sans plugin

Expert Prestashop ⇝ Conseils et accompagnement technique ⇜

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 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.

  1. S’inscrire sur le site de reCaptcha Google : https://www.google.com/recaptcha/
  2. Modification des templates contact-form.tpl et header.tpl
  3. Création d’une surcharge d’un controller pour vérifier la réponse de Google
  4. 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.

 

Comment installer reCaptcha sur Prestashop

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.

Etape 1 : Clef public recaptcha

Récupération des clefs publics pour contact-form.tpl et header.tpl

Etape 2 : récupération des clefs privées

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

Télécharger le module :

https://github.com/nenes25/eicaptcha/releases/

 

Bloquer les SPAMs grâce à Recaptcha sur Prestashop sans plugin
2.1 (41.54%) 26 votes

Vincent est Expert Prestashop depuis plus de 6 ans. Il est maintenant Freelance développeur spécialisé Prestashop. Après avoir travaillé 3 ans en agence WEB, il est parti développer des modules Prestashop et autres solutions techniques à Brisbane (Australie). Avant de revenir en France et créer sa société auto-entrepreneur depuis 2015. Spécialiste de la solution open-source Prestashop, il mets à disposition sa plume et ses connaissances techniques pour notre plus grand plaisir 😉

9 réponses

  1. Jonathan dit :

    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. 🙂

  2. Etienne dit :

    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?

    • Vince dit :

      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é ?

      🙂

      • Etienne dit :

        ahaha merci, l’erreur de base!!! j’avais un plugin activé XD!!! Merci beaucoup!! Super tutoriel très clair de bout en bout!

      • Etienne dit :

        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

        • Vincent dit :

          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 ?

  3. les ateliers passion dit :

    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

  4. thierry dit :

    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.

Laisser un commentaire

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