Module Prestashop Google reCaptcha – Manuel de l’utilisateur

1.0 Qu’est-ce que Google ReCaptcha?

Prestashop Google ReCaptcha Addon est une solution de sécurité efficace qui protège votre site Web contre les entrées de spam tout en permettant à de vraies personnes de le traverser facilement. L’addon Prestashop peut être utilisé pour la connexion, l’enregistrement, la récupération de mot de passe, les formulaires de contact populaires et autres. L’addon Google ReCaptcha affiche des images pour identifier les humains dans le cadre de leurs procédures de validation normales.

2.0 Introduction

L’ addon Prestashop Google reCaptcha dispose d’une fonctionnalité permettant au site Prestashop de confirmer que l’utilisateur n’est pas un robot. C’est facile pour les gens et dur pour les bots.

L’addon Prestashop fournit de nombreuses fonctionnalités qui sont les suivantes:

• Admin peut activer / désactiver le plugin.
• Admin peut afficher la vérification humaine de Prestashop sur la page de connexion du client.
• L’administrateur peut afficher Google ReCaptcha sur la page d’inscription du client.
• L’administrateur peut afficher Google ReCaptcha sur la page Mot de passe oublié par le client.
• L’administrateur peut afficher Google ReCaptcha sur la page de contact du client.
• L’administrateur peut configurer le nombre de tentatives après lesquelles Google ReCaptcha s’affichera.
• L’administrateur peut ajouter CSS personnalisé (feuille de style en cascade) et JS personnalisé (JavaScript) dans le bloc.
• L’administrateur peut configurer les différentes clés de site et clé secrète pour ses différents domaines Prestashop.
• Admin peut facilement définir la clé de site et la clé secrète sur le site officiel de Google ReCaptcha pour son domaine en suivant les étapes pour configurer.

3.0 Manuel d’installation

Suivez les étapes ci-dessous pour installer l’addon Prestashop Google ReCaptcha par Knowband :

• Téléchargez le package d’extension Prestashop.
• Décompressez le paquet dans le répertoire / modules de votre boutique Prestashop via le gestionnaire FTP (comme Filezilla ou WinSCP – téléchargez ici: https://filezilla-project.org/). La structure des dossiers pour l’addon Google ReCaptcha dans le répertoire / modules / googlerecaptcha est montrée dans l’image ci-dessous:

• Vous pourrez trouver l’addon Prestashop Google ReCaptcha prêt à être installé dans la “Liste des modules” dans votre boutique Prestashop comme indiqué ci-dessous.

• Cliquez sur le lien “Installer” pour installer. Une fois le module correctement installé, le lien “Installer” sera converti en “Configurer”.

4.0 Manuel de l’utilisateur

Ce manuel de l’utilisateur vous guidera à travers les paramètres du module d’administration / magasin avant et diverses fonctionnalités de cet add-on Prestashop Google ReCaptcha.

4.1 Interface d’administration

Il contiendra 3 onglets “Paramètres généraux” onglet, onglet “Paramètres ReCaptcha” et “Paramètres de l’apparence” après l’installation réussie.

4.1.1 Onglet Paramètres généraux

Cet onglet contiendra trois champs.

Voici les étapes pour configurer l’onglet Paramètres généraux –

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet ReCaptcha Setting.

Des champs

• Activer le plugin: Par défaut, il sera désactivé. Ce module de vérification humaine Prestashop ne fonctionnera que si ce paramètre est activé.

Voici les étapes pour Activer le plugin:

1. Aller aux modules et services.
2. Module de recherche “Google ReCaptcha”.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Activer l’option plugin.
6. Cliquez sur le bouton “Enregistrer”.

• Activer Google ReCaptcha pour: Par défaut, toutes les cases à cocher seraient sélectionnées. Il est utilisé pour définir la position de Google ReCaptcha dans une position particulière.
• Page de connexion du client: Lorsque cette option est activée, Google ReCaptcha s’affiche sur la page de connexion du client.

Les étapes à suivre pour afficher Google ReCaptcha dans la page de connexion du client sont les suivantes:

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Activer Google ReCaptcha pour.
6. Sélectionnez la page de connexion du client.
7. Cliquez sur le bouton “Enregistrer”.

• Page d’inscription du client: Lorsque cette option est activée, Google ReCaptcha apparaît sur la page d’inscription du client.

Vous trouverez ci-dessous les étapes à suivre pour afficher Google ReCaptcha dans la page d’inscription du client.

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Activer Google ReCaptcha pour.
6. Sélectionnez la page d’inscription du client.
7. Cliquez sur le bouton “Enregistrer”.

1. Page de contact du client : lorsque cette option est activée, Google ReCaptcha apparaît sur la page de contact du client.

Voici les étapes à suivre pour afficher Google ReCaptcha dans Customer Contact Page-

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Activer Google ReCaptcha pour.
6. Sélectionnez la page de contact du client.
7. Cliquez sur le bouton “Enregistrer”.

    6. Page Mot de passe oublié du client: Lorsque ce paramètre est activé, Google ReCaptcha s’affiche sur la page Mot de passe oublié du client.

Vous trouverez ci-dessous les étapes à suivre pour afficher Google ReCaptcha dans la page Mot de passe oublié du client.

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Activer Google ReCaptcha pour.
6. Sélectionnez la page Mot de passe oublié du client.
7. Cliquez sur le bouton “Enregistrer”.

     7. Afficher Google ReCaptcha Après: Par défaut, il contiendrait 0. Il serait utilisé pour afficher Google ReCaptcha après un certain nombre de tentatives.

Voici les étapes pour configurer le nombre de tentatives

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez Paramètres généraux.
5. Entrez le nombre d’essais après l’affichage de Google ReCaptcha.
6. Cliquez sur le bouton “Enregistrer”.

    8. Enregistrer: En cliquant sur ce bouton, le module Prestashop enregistrera les paramètres dans la base de données et reviendra avec un message de réussite.

4.1.1.2 Comment activer le module?

Suivez ces étapes pour activer le module –

1. Après l’installation du module, allez dans le “Module et Services”.
2. Il énumérerait tous les modules du magasin. Recherchez “Google ReCaptcha” dans la liste des modules.
3. Maintenant, cliquez sur le bouton “Configurer” correspondant au module “Google ReCaptcha”.
4. Cela redirigerait l’administrateur vers un onglet “Paramètres généraux”.
5. Allez dans l’onglet “Paramètres ReCaptcha” et configurez la “Clé du site” et la “Clé secrète” que vous obtiendrez en suivant les “étapes à configurer” sous les champs de texte.
6. Après la configuration “Site Key” et “Secret Key”, allez dans l’onglet “General Settings” et mettez le bouton “Enable / Disable” sur “Yes” et configurez tous les autres détails selon vos désirs.
7. Cliquez sur le bouton “Enregistrer”.

4.1.2 Onglet ReCaptcha Setting

Cet onglet contiendra toutes les étapes nécessaires pour configurer Google ReCaptcha dans le module.

Voici les étapes pour configurer l’onglet ReCaptcha Setting –

• Aller aux modules et services.
• Module de recherche ‘Google ReCaptcha.
• Cliquez sur le bouton Configurer.
• Sélectionnez l’onglet ReCaptcha Setting.

Des champs

Cet onglet contient 2 champs, le premier a un lien pour définir Google ReCaptcha et le suivant sont des étapes pour configurer la clé de site et la clé secrète.

• Clé de site: L’ administrateur entrera la clé du site pour afficher le widget sur le site. Ce champ est obligatoire pour activer le plugin.

Voici les étapes pour configurer la clé de site –

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet ReCaptcha Setting.
5. Entrez la clé du site.

• Clé secrète: Admin entrera la clé secrète pour autoriser la communication entre l’application et le serveur reCAPTCHA afin de vérifier la réponse de l’utilisateur. Ce champ est obligatoire pour activer le plugin Prestashop Google reCaptcha.

Voici les étapes pour configurer la clé secrète –

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha’.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet ReCaptcha Setting.
5. Entrez la clé secrète.

• Étapes à configurer: Cela contiendra toutes les étapes pour obtenir la clé de site et la clé secrète pour un nom de domaine particulier.

Voici les étapes pour configurer le domaine et le paramètre d’étiquette –

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet ReCaptcha Setting.
5. Suivez les étapes pour configurer.

• Cliquez ici pour obtenir la clé du site et la clé secrète: Ce lien redirigera l’administrateur vers le site officiel de Google ReCaptcha pour obtenir la clé du site et la clé secrète.

Voici les étapes à suivre pour visiter le site officiel de Google ReCaptcha –

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet ReCaptcha Setting.
5. Cliquez ici pour obtenir la clé du site et la clé secrète.

4.1.2.1 Comment obtenir la clé du site et la clé secrète?

Suivez ces étapes pour obtenir le site et la clé secrète –

• Visitez l’URL https://www.google.com/recaptcha/intro/comingsoon/invisiblebeta.html
• Cliquez sur “INSCRIVEZ-VOUS” si vous n’avez pas de compte Gmail.

• Créez / Connectez-vous à votre compte Gmail.

• Cliquez sur “CONTINUER”.

• Cliquez sur “Get ReCaptcha”.

• Entrez “Label” de votre domaine.
• Entrez “Domaines” de votre magasin.
• Cliquez sur “S’inscrire”.

• Copiez la “clé de site” et la “clé secrète” et collez-la dans l’onglet de configuration de Google ReCaptcha.

Onglet Paramétrage de l’apparence et de la sensation

Cet onglet contiendra toutes les caractéristiques du module Prestashop.

Vous trouverez ci-dessous les étapes de configuration de l’onglet Paramètres de présentation.

1. Aller aux modules et services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet Paramètres de l’aspect et de la convivialité.

Des champs

• Thème: Admin sélectionnera le thème – Light ou Dark pour le Google ReCaptcha.
  Voici les étapes pour configurer le thème Google ReCaptcha –

1. Aller aux modules et aux services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet Paramètres de l’aspect et de la convivialité.
5. Sélectionne un thème.

• CSS personnalisé: Admin peut utiliser cette option pour ajouter des CSS personnalisés si nécessaire.
  Voici les étapes pour configurer CSS personnalisé –

1. Aller aux modules et aux services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet Paramètres de l’aspect et de la convivialité.
5. Entrez CSS personnalisé.

Remarque: Entrez le contenu CSS en excluant les balises <style> – inner content- </ style> (n’écrivez que du contenu interne).

• JS personnalisé: Admin peut utiliser cette option pour ajouter des js personnalisés si nécessaire (uniquement dans la version 1.6.xx).
  Voici les étapes pour configurer Custom JS-

1. Aller aux modules et aux services.
2. Module de recherche ‘Google ReCaptcha.
3. Cliquez sur le bouton Configurer.
4. Sélectionnez l’onglet Paramètres de l’aspect et de la convivialité.
5. Entrez JS personnalisé.

Remarque: Entrez le contenu JS en excluant les balises <script> -inner content- </ script> (n’écrivez que du contenu interne).

4.2 Interface frontale

Si admin active le plugin, Google ReCaptcha sera affiché pour les formulaires sélectionnés dans le Front End comme indiqué ci-dessous.

4.2.1 Page de connexion du client

Voici les étapes à suivre pour vous rendre sur la page d’ouverture de session client:

• Allez à la page d’accueil de Front End.
• Cliquez sur l’option “Connexion”.

4.2.2 Page d’inscription du client

Version 1.6.xx –

Voici les étapes à suivre pour visiter la page d’inscription du client dans la version 1.6.xx –

• Allez à la page d’accueil de Front End.
• Se connecter.
• Cliquez sur le bouton “Créer un compte”.

Version 1.7.0.x –

Voici les étapes à suivre pour visiter la page d’inscription du client dans la version 1.7.0.x –

• Allez à la page d’accueil de Front End.
• Connectez-vous Option.
• Cliquez sur le lien “No Account? En créer un ici “.

4.2.3 Page de contact du client

Version 1.6.xx –

Voici les étapes à suivre pour visiter la page de contact du client dans la version 1.6.xx –

• Allez à la page d’accueil de Front End.
• Cliquez sur “Contactez-nous” option.

Version 1.7.0.x –

Voici les étapes à suivre pour visiter la page de contact du client dans la version 1.7.0.x-

• Allez à la page d’accueil de Front End.
• Cliquez sur “Contactez-nous” option.

4.2.4 Page Mot de passe oublié par le client

Version 1.6.xx –

Voici les étapes à suivre pour visiter la page Password Forgotten de la version 1.6.xx-

• Allez à la page d’accueil de Front End.
• Connectez-vous l’option.
• Cliquez sur “Mot de passe oublié?”.

Version 1.7.0.x –

Voici les étapes à suivre pour visiter la page Mot de passe oublié du client dans la version 1.7.0.x-

• Allez à la page d’accueil de Front End.
• Connectez-vous l’option.
• Cliquez sur “Mot de passe oublié?”.

Remarque: Ce module Prestashop Google reCaptcha de Knowband fonctionnera sur le formulaire par défaut du magasin Prestashop pour les pages susmentionnées, à savoir la page de connexion client, la page d’enregistrement client, la page contact client et la page mot de passe client oublié. Ce module ne sera pas applicable à la page de paiement des invités.

Aimait ça? Vous aimerez ceux-ci aussi

• Comment intégrer la protection Google reCaptcha sur votre boutique PrestaShop?