Présentation.
Depuis la version 4 0 7 de Divi, il est désormais possible d’intégrer directement Google reCAPTCHA depuis le constructeur de pages.
Nous allons donc voir aujourd’hui comment mettre en place un reCAPTCHA v3 directement dans Divi.
Cerise sur le gâteau, il n’y a pas besoin d’ajouter de plugin !
Prérequis.
Pour configurer votre reCAPTCHA vous devez disposer d’un compte de messagerie Google (Gmail).
À quoi sert Google reCAPTCHA ?
Google reCAPTCHA est apparu en 2009 en ayant pour objectif de bloquer l’envoi de SPAM fait par des robots malveillants en vérifiant à l’aide d’une procédure spécifique que vous êtes bien un humain.
Étape 1 : Configurer son compte reCAPTCHA de Google.
Dans cette étape, nous allons créer notre compte reCAPTCHA afin d’obtenir les clés qui vont servir à le configurer sur notre site internet. Nous obtiendrons donc après avoir renseigné le formulaire deux clés, la première sera la clé du site et la seconde sera la clé secrète.
Il faut donc commencer par se rendre sur le site de Google reCAPTCHA qui se trouve à l’adresse suivante : https://www.google.com/recaptcha/about/
On ouvre ensuite à partir de l’onglet, la page « contrôle d’administration V3 » (Admin Console) qui va nous permettre d’avoir accès au formulaire que nous devons renseigner.
Libellé :
On indique ici le titre que l’on souhaite donner à son compte, généralement on indique le nom de son site.
Sélection du type de reCAPTCHA à utiliser :
Nous avons le choix entre la version 2 et la version 3. Personnellement je choisis la version 3 car elle fonctionne en arrière-plan et par conséquent est plus discrète pour les visiteurs du site internet, mais cela impose au webmaster un peu plus de surveillance, la version 2 est parfaitement utilisable mais sera un peu plus contraignante pour vos visiteurs qui devront parfois passer un test avant d’avoir accès au site internet. Il n’y a donc pas de mauvais choix entre les versions.
Domaines :
Indiquez ici le ou les noms de domaine pour lesquelles vous souhaitez la mise en place du reCAPTCHA, noter uniquement ici le nom du domaine avec son extension sans www. ou http:// (exemple: wpcigale.com).
Propriétaires :
Pour accéder à ce formulaire vous devrez au préalable avoir une adresse mail google (@gmail.com), l’adresse Gmail avec laquelle vous êtes connecté sera considéré comme propriétaire du site, il sera également possible d’ajouter d’autres adresses si vous en avez besoin de plusieurs comptes de gestion, à la condition que ce soit des adresses de messagerie google (Gmail).
Conditions d’utilisation de reCAPTCHA :
Il vous suffira ici de cocher la case.
Envoyer des alertes aux propriétaires :
Ici je coche la case pour rester informé des alertes.
Une fois que nous avons terminé de renseigner le formulaire, et après une petite relecture qui ne fait jamais de mal, je valide le bouton « envoyer » situer au bas du formulaire.
On se retrouve ensuite sur la page suivante qui nous permet d’obtenir les clés de configuration de reCAPTCHA qu’on renseignera sur notre site internet.
Étape 2 : Configurer reCAPTCHA dans Divi
Nous voici maintenant dans la deuxième partie de la mise en place de notre reCAPTCHA, pour ce faire nous allons donc commencer à nous connecter à notre tableau de bord WordPress > Divi > thème Builder.
Sur la page des modèles nous allons sélectionner le modèle de notre page « contact », en cliquer sur l’icône du crayon pour commencer à modifier notre page à partir du thème Builder.
Nous nous retrouvons donc maintenant dans notre éditeur de page prêt à modifier notre page « contact ».
Pour implémenter reCAPTCHA dans notre formulaire de contact nous allons accéder au module qui regroupe les champs de saisie du formulaire et représenté en gris, on clique donc sur l’icône de la roue crantée (paramètres du module) afin d’avoir accès au panneau des modifications.
À partir de ce panneau en restant sur l’onglet contenu, nous recherchons « Spam Protection » que nous allons configurer.
Use a spam protection service : On active le bouton sur « oui » ce qui va me permettre d’avoir accès aux autres réglages.
Fournisseur de service : On laisse la sélection sur ReCAPTCHA, de toute façon à ce jour il n’y a pas d’autre choix.
ReCAPTCHA v3 account : On clique sur le bouton AJOUTER (pour moi cela indique SUPPRIMER, car j’ai déjà renseigné un compte), ce qui nous ouvre un champ de saisie supplémentaire :
Nous allons donc renseigner dans cette fenêtre les informations requises à savoir :
Le nom du compte : Personnellement je remets le même nom que j’ai indiqué lors de l’étape 1 (WP Cigale® Réalisez vos projets !), ce n’est pas obligatoire de mettre le nom identique du compte, cela plus simple pour se repérer.
Site Key v3 : On place ici notre première clé (clé du site).
Secret Key v3 : On indique ici la seconde clé (clé secrète).
Une fois les informations complétées, nous pouvons valider à l’aide du bouton vert envoi.
Je termine en vérifiant que mon compte est bien sélectionné, puis je sauvegarde les changements à l’aide du bouton vert de validation. Je sauvegarde également à partir de l’éditeur de page ainsi qu’à partir du tableau de bord du thème Builder.
Normalement votre ReCAPTCHA est maintenant installé, vous devriez voir en bas à droite de votre site, sur la page « contact », un petit Icone qui le confirme.
Conclusion
J’apprécie le fait de pouvoir bénéficier du reCAPTCHA directement intégré au formulaire Divi, ce qui évite l’installation d’un plug-in supplémentaire.
Sur le site de Google reCAPTCHA nous aurons également un tableau d’information nous indiquant le nombre de requêtes ainsi que le pourcentage de requêtes suspecte que notre site aura rencontré, bien sûr ces analyses ne seront pas immédiatement disponibles car il faudra attendre un retour des données.
Si vous n’avez pas noté ou perdu vos clés reCAPTCHA, il sera possible de les retrouver directement sur le site, en vous rendant dans la section paramètres symbolisé par la roue crantée.
0 commentaires