captcha

Prestashop : Ajouter un captcha sur les formulaires de vos modules

Afin d’éviter le spam sur vos différents formulaires je recommande en général la mise en place d’un captcha.
Ça fait plusieurs années que j’édite un module de captcha gratuit ( eicaptcha ) qui permets de l’éviter sur les formulaires suivants :

  • Formulaire de contact
  • Formulaire de création de compte
  • Formulaire d’inscription à la newsletter

Celui-ci est disponible sur github et a été téléchargé des dizaines de milliers de fois : https://github.com/nenes25/eicaptcha

Je viens de sortir une nouvelle version de ce module ( 2.4.0 ) qui rajoute une nouvelle fonctionnalité qui permets d’utiliser la vérification du captcha intégrée dans le module directement dans vos modules spécifiques.

Ceci à travers 2 nouvelles méthodes :

hookDisplayEicaptchaVerification : permets de récupérer un template d’affichage complet du captcha ( le captcha s’affiche directement )
hookActionGetEicaptchaParams : permets  de récupérer les paramètres nécessaires à l’affichage du captcha ( il est possible de faire un affichage spécifique )

Nous allons voir à travers cet article comment le mettre en place à travers la création d’un module hhcustomform
Le captcha sera implémenté dans 2 situations

  • Dans un formulaire sur la fiche produit
  • Dans un controller front

Captcha dans un formulaire sur la fiche produit

Pour afficher un formulaire sur la fiche produit nous allons utiliser le hook displayProductExtraContent qui va nous permettre de l’afficher comme sur la capture ci-dessous, directement dans les onglets de la fiche produit.…

Prestashop : Ajouter un captcha sur les formulaires de vos modules Lire la suite »

Prestashop : Ajouter un captcha sur l’inscription à la newsletter

Ces derniers mois ( voir depuis plus longtemps :/ ) les spams se sont attaqués en masse au formulaire d’inscription à la newsletter sur Prestashop.

J’ai déjà fait un module de captcha qui permets de régler le problème des spams sur le formulaire de contact et la création des clients depuis plusieurs années.
La demande de pouvoir rajouter un captcha sur la newsletter était déjà récurrente, mais il n’y avais pas de solution simple et rapide pour le mettre en place.

La bonne nouvelle est que depuis la sortie de la version 2.6.0 du module ps_emailsubscription grâce à une pull request de l’inévitable Jean-François Viguier ( https://github.com/PrestaShop/ps_emailsubscription/pull/49/files )

Il est possible via des nouveaux hooks d’implémenter facilement un captcha sur l’inscription newsletter.

Le hook à utiliser est displayNewsletterRegistration et il est implémenté dans le fichier modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl

<div class="email_subscription block_newsletter" id="blockEmailSubscription_{$hookName}">
  <h4>{l s='Newsletter' d='Modules.Emailsubscription.Shop'}</h4>
  {if $msg}
    <p class="notification {if $nw_error}notification-error{else}notification-success{/if}">{$msg}</p>
  {/if}
  <form action="{$urls.current_url}#blockEmailSubscription_{$hookName}"

Prestashop : Ajouter un captcha sur l’inscription à la newsletter Lire la suite »

Eicaptcha : Ajout d’une configuration avancées des sélecteurs

J’ai eut beaucoup de retours ces dernières semaines sur le non-fonctionnement de mon module de captcha sur les thèmes différents de default-boostrap ( celui par défaut ).
Ceci était du au fait que j’avais stocké directement dans le code des sélecteurs css spécifiques à ce thème.

Vous pouvez le voir sur l’extrait de code suivant :

<script type="text/javascript">
 $(document).ready(function(){
 //Add div where the captcha will be displayed
 $(".submit").before("<div id=\"captcha-box\"></div>"); // <= sélecteur stocké en dur
 
 //Manage form submit 
 $("#submitMessage").click(function(){ // <= sélecteur stocké en dur
 ...
 </script>

La nouvelle version qui sortira dans les prochains jours corrigera ce problème, en permettant d’éditer ces informations directement depuis l’administration.…

Eicaptcha : Ajout d’une configuration avancées des sélecteurs Lire la suite »

Module Catpcha pour prestashop 1.7

Je viens enfin de rendre compatible mon module de captcha eicaptcha avec la version 1.7 de prestashop 🙂
En raison des nombreux changements sur l’infrastructure j’ai quasiment procédé à une réécriture complète du module.

Celui-ci permets d’ajouter un captcha sur le formulaire de contact, et sur le formulaire de création de compte.
( La possibilité de le rajouter sur le formulaire de commentaire produit, et envoyer à un ami est supprimée pour l’instant )

Aperçu :

Formulaire de contact

Formulaire de création de compte

 

Récupération du module :

Via ssh :

git clone https://github.com/nenes25/eicaptcha.git -b 17
cd eicaptcha
composer install

Télécharger une archive complète :

Pour être sûrs de récupérer la dernière version consultez la page https://github.com/nenes25/eicaptcha/releases
Téléchargez la dernière release taguée 2.0.x

Vous pourrez ensuite l’installer via l’administration ou par ftp

Attention ce module nécessite au préalable l’installation du module « contactform » de prestashop, il faut donc penser à l’installer avant 😉
( il est gratuit et disponible par défaut sur toutes les versions )

Changements techniques :

La gestion du formulaire de contact est géré dans prestashop 1.7 via un widget du module contactform.…

Module Catpcha pour prestashop 1.7 Lire la suite »

Prestashop : Mettre en place un captcha sur les commentaires produits

La nouvelle version de mon module de captcha eicaptcha ( version 0.4.3 ) apporte une nouvelle possibilité.

Vous pouvez désormais utiliser un captcha sur le formulaire de soumission des commentaires produits.

Voici comment activer cette fonctionnalité, si vous utilisez le thème par défaut.

Télécharger la dernière version du module eicaptcha
( Installer le module sur prestashop si ce n’est pas encore le cas :  module captcha Prestashop )
Extraire l’archive sur votre poste
Envoyer le fichier js/modules/productcomments/productcomments.js sur votre site via ftp
dans le dossier themes/default-bootstrap/js/modules/productcomments/ ( remplacer le fichier existant )
Envoyer le fichier views/templates/modules/productcomments/productcomments.tpl sur votre site via ftp
dans le dossier themes/default-bootstrap/modules/productcomments/ ( remplacer le fichier existant )

Une fois ces changements en place, le captcha sera disponible sur le formulaire de soumission des commentaires produits

Eicaptcha commentaire produit

Si vous utilisez un thème personnalisé, voici comment procéder.

Envoyer le fichier js/modules/productcomments/productcomments.js sur votre site via ftp
dans le dossier themes/default-bootstrap/js/modules/productcomments et adaptez le en fonction de votre design

Dans le fichier themes/default-bootstrap/modules/productcommentsproductcomments.tpl…

Prestashop : Mettre en place un captcha sur les commentaires produits Lire la suite »

Prestashop : Mettre en place un captcha sur le formulaire « envoyer à un ami »

La nouvelle version de mon module de captcha eicaptcha ( version 0.4.2 ) apporte une nouvelle possibilité.

Vous pouvez désormais utiliser un captcha sur le formulaire « Envoyer à un ami » situé sur la fiche produit.

Voici comment activer cette fonctionnalité, si vous utilisez le thème par défaut.

  • Télécharger la dernière version du module eicaptcha
  • ( Installer le module sur prestashop si ce n’est pas encore le cas :  module captcha Prestashop )
  • Extraire l’archive sur votre poste
  • Envoyer le fichier js/modules/sendtoafriend/sendtoafriend.js sur votre site via ftp
    dans le dossier themes/default-bootstrap/js/modules/sendtoafriend/ ( remplacer le fichier existant )
  • Envoyer le fichier views/templates/modules/sendtoafriend/sendtoafriend-extra.tpl sur votre site via ftp
    dans le dossier themes/default-bootstrap/modules/sendtoafriend/ ( remplacer le fichier existant )

 

Une fois ces changements en place, le captcha sera disponible sur le formulaire « Envoyer à un ami »

Ei Captcah send to a friend

 

Si vous utilisez un thème personnalisé, voici comment procéder.

  • Envoyer le fichier js/modules/sendtoafriend/sendtoafriend.js sur votre site via ftp
    dans le dossier themes/default-bootstrap/js/modules/sendtoafriend/ et adaptez le en fonction de votre design

Dans le fichier themes/default-bootstrap/modules/sendtoafriend/sendtoafriend-extra.tpl

Prestashop : Mettre en place un captcha sur le formulaire « envoyer à un ami » Lire la suite »

Module (re) captcha pour le formulaire de contact prestashop nouvelle version

Suite aux différents retours sur mon module recaptcha pour prestashop , Je viens de procéder à sa mise à jour.

La version 0.1.1 apporte un changement important dans son mode de fonctionnement
Car comme évoqué dans le commentaire suivant , la soumission d’un mauvais code de captcha nécessitait de saisir à nouveau l’ensemble des données du formulaire.

Désormais la validation du code du captcha est donc réalisée en ajax avant la soumission du formulaire.
Si le code est validé, le formulaire de contact est soumis, sinon un message d’erreur s’affiche et l’utilisateur doit saisir un nouveau captcha.

Edit : 17/01/2014
La version 0.1.2 est désormais disponible et corrige l’incompatibilité du module avec le mode SSL de prestashop.

Edit : 05/05/2014
La version 0.1.3 est désormais disponible et corrige un problème de soumission du captcha en mode SSL

Edit : 15/05/2014La version 0.1.4 compatible avec Prestashop 1.6 est désormais disponible

Vous pourrez télécharger cette version et consulter les dernières mise à jour du module depuis la page Module (re)Captcha pour le formulaire de contact prestashop

Module (re) captcha pour le formulaire de contact prestashop nouvelle version Lire la suite »

Module (re) captcha pour le formulaire de contact prestashop

Les formulaire de contacts sont de plus en plus soumis aux spams, ce qui devient assez agaçant…, malheureusement le formulaire de contact de prestashop ne fait pas exeption à la règle.

Voici donc un module qui vous permettra d’ajouter l’excellent « Recaptcha » de google à votre formulaire de contact prestashop.

captcha prestashop formulaire de contact

Pour commencer, ouvrez le fichier « contact-form.tpl » de votre dossier thème et saissez le code suivant :

1
2
3
4
5
6
{if $captcha }
<p>
<label for="captcha">{l s='Captcha'}</label>
<div style="float:left;margin-left: 0.7em;">{$captcha}</div>
</p>
{/if}

après les lignes suivantes :
( Je l’ai inséré après le champ message, mais c’est à adapter en fonction de l’endroit souhaité )

1
2
3
4
<p>
<label for="message">{l s='Message'}</label>
<textarea id="message" name="message" rows="15" cols="20" style="width:340px;height:220px">{if isset($message)}{$message|escape:'htmlall':'UTF-8'|stripslashes}{/if}</textarea>
</p>

Vous pouvez ensuite télécharger et installer le module.
Une fois le module installé, il sera nécessaire de récupérer des clés publiques et privées sur le site de recaptcha pour activer le module
http://www.google.com/recaptcha/whyrecaptcha

Module (re) captcha pour le formulaire de contact prestashop Lire la suite »