Comment ajouter CAPTCHA à la connexion WooCommerce ?

Pour accéder à une page spécifique ou effectuer une tâche telle que la soumission d’un formulaire, les visiteurs doivent saisir le texte illustré dans l’image dans une boîte de soumission. S’ils saisissent le texte correctement, ils seront redirigés vers la page suivante. Mais si le texte n’est pas exact, le système générera automatiquement un autre texte CAPTCHA que les utilisateurs devront saisir.

2) CAPTCHA d’image

 

Il s’agit du type de CAPTCHA le plus courant et le plus utilisé. Les utilisateurs doivent choisir les bonnes boîtes à images en fonction des exigences pour vérifier qu’ils ne sont pas un robot. Si l’image ou les instructions ne sont pas claires, les visiteurs peuvent ignorer le CAPTCHA et en obtenir un nouveau.

3) CAPTCHA audio

Lorsque vous utilisez un CAPTCHA audio, les visiteurs de votre site Web doivent écouter un fichier audio spécifique et saisir les mots/chiffres qu’ils entendent dans une case d’envoi. Ce type de CAPTCHA est plus sûr que le CAPTCHA image ou texte, mais il n’est pas aussi courant que les autres types.

4) CAPTCHA mathématique

Ce type de CAPTCHA est probablement l’un des plus difficiles de cette liste. Lorsque vous configurez un CAPTCHA mathématique sur votre site, les utilisateurs doivent résoudre un calcul pour accéder à une page spécifique ou effectuer une certaine action. La plupart du temps, les calculs sont faciles, mais les visiteurs peuvent aussi rafraîchir le CAPTCHA pour en obtenir un nouveau.

Pourquoi ajouter un Captcha à la connexion dans WooCommerce ?

Si vous voulez protéger votre boutique contre les inscriptions de spam et les robots, vous devriez ajouter le CAPTCHA à votre connexion WooCommerce. Les pages de connexion et les formulaires de contact font partie des pages que les pirates ciblent le plus. C’est pourquoi l’utilisation du formulaire de connexion par défaut de WordPress n’est pas recommandée.

Comme vous pouvez le constater, il n’y a pas de couche de sécurité supplémentaire. En utilisant les informations d’identification correctes du compte, n’importe qui peut y accéder. Les pirates utilisent un logiciel qui essaie différentes combinaisons de nom d’utilisateur et de mot de passe jusqu’à ce qu’ils trouvent la bonne combinaison. Nous avons déjà vu comment personnaliser la page de connexion de WordPress pour éviter cela, mais vous devriez également ajouter une autre couche de sécurité.

L’ajout de CAPTCHA à la page de connexion de WooCommerce est un excellent moyen de rendre votre site plus sûr et de protéger les sites Web des pirates. Les pirates utilisent souvent des logiciels pour forcer la page de connexion et accéder aux sites. Cependant, si vous ajoutez une case de vérification CAPTCHA à la page de connexion, le logiciel ne sera pas en mesure de réaliser l’opération.

Après avoir ajouté le CAPTCHA, votre formulaire de connexion ressemblera à ceci :

Même si l’utilisateur a saisi les informations d’identification correctes, il doit résoudre le CAPTCHA avant de se connecter au tableau de bord du compte.

Maintenant que vous savez pourquoi vous devez ajouter le CAPTCHA à la connexion WooCommerce, apprenons comment le faire et empêcher le spam.

Comment ajouter CAPTCHA à la connexion WooCommerce

Il y a deux façons d’ajouter CAPTCHA à WooCommerce :

En utilisant des plugins
Par programmation

Jetons un coup d’œil à chaque méthode, afin que vous puissiez choisir la meilleure pour vous.

1) Ajouter CAPTCHA à l’aide de plugins

Il existe plusieurs plugins que vous pouvez utiliser pour ajouter le CAPTCHA à votre site. Dans cette section, nous allons nous concentrer sur deux outils :

reCaptcha de BestWebSoft
NoCAPTCHA et reCAPTCHA avancés
1.1) reCaptcha de BestWebSoft

reCaptcha de BestWebSoft est l’un des plugins CAPTCHA gratuits les plus populaires sur le marché. Voyons comment le configurer.

1.1.1) Installation et activation

Tout d’abord, connectez-vous à votre site WordPress et allez dans Plugins > Add New. Ensuite, recherchez le reCaptcha de BestWebSoft, appuyez sur Installer maintenant, et activez-le.

1.1.2) Configuration

Une fois que vous avez activé le plugin, allez dans la console d’administration de Google reCAPTCHA et complétez l’enregistrement. Pour s’enregistrer pour un nouveau site web, vous devez entrer :

Label
Type de reCAPTCHA
Domaines
Propriétaires

Après avoir rempli les informations requises, soumettez le formulaire.

Dans notre cas, nous avons choisi le reCAPTCHA v2, qui est le type de reCAPTCHA le plus simple disponible dans la liste.

Il y a 3 options que vous pouvez sélectionner. Nous vous recommandons de sélectionner la case Je ne suis pas un robot qui est la validation la plus courante.

Une fois que vous avez soumis le formulaire, la plateforme affiche deux clés à l’écran : la clé du site et la clé secrète.

Copiez-les et mettez-les à portée de main car vous les utiliserez dans une minute.

Maintenant, retournez à votre tableau de bord WordPress et allez dans les paramètres reCAPTCHA.

Collez les clés et avant d’appuyer sur le bouton d’envoi, assurez-vous que vous avez sélectionné la même version que précédemment.

Ensuite, faites défiler vers le bas de la page et vous verrez certaines pages par défaut de WordPress. Sélectionnez les pages auxquelles vous voulez ajouter CAPTCHA. Pour cette démonstration, nous allons sélectionner la page de connexion, mais vous pouvez également sélectionner plus de pages. Vous pouvez également masquer CAPTCHA pour certains rôles d’utilisateur.

Après cela, enregistrez les paramètres et c’est tout !

1.3) Test

Pour vérifier que tout fonctionne correctement, allez sur votre page de connexion en utilisant une fenêtre incognito et vous verrez une boîte CAPTCHA sous le champ du mot de passe.

Si vous ne voyez pas de case à cocher dans l’interface, c’est que vous avez saisi les mauvaises clés ou sélectionné le mauvais type de reCAPTCHA. Retournez dans les paramètres et vérifiez à nouveau les options du plugin.

C’est ainsi que vous pouvez ajouter CAPTCHA à la page de connexion par défaut de WordPress. Si vous utilisez la page de connexion par défaut de WordPress comme page de connexion de WooCommerce, c’est une excellente option. Cependant, si vous utilisez une page dédiée générée par WooCommerce, vous devez utiliser la version premium de ce plugin.

Actuellement, la version gratuite de reCAPTCHA n’est pas fournie avec l’intégration de WooCommerce. La version premium, cependant, débloquera des intégrations plus puissantes et des fonctionnalités plus avancées pour 21 USD par an.

Après l’avoir acheté, vous devez vérifier la clé de licence, puis ajouter des options reCAPTCHA aux champs de connexion, d’enregistrement ou de réinitialisation de mot de passe de WooCommerce.

Si vous voulez ajouter un champ CAPTCHA à la page de connexion de WooCommerce sans payer quoi que ce soit, nous avons un autre plugin pour vous.

1.2) Advanced noCAPTCHA & reCAPTCHA (V2 & V3)

Advanced noCAPTCHA & reCAPTCHA est un excellent plugin gratuit pour ajouter facilement des CAPTCHA à votre site. Voyons comment le configurer pour protéger votre site.

1.2.1) Installation et activation

Comme d’habitude, la première chose à faire est d’installer et d’activer le plugin sur votre site. Allez dans Plugins > Add New, cherchez le plugin, et installez-le.

Après avoir activé l’outil, vous verrez les paramètres du plugin dans la section Paramètres.

1.2.2) Configuration

La configuration de cet outil est minimale. Allez dans la console d’administration de Google reCAPTCHA et complétez l’enregistrement. N’oubliez pas de sélectionner le type de CAPTCHA que vous souhaitez et de copier la clé du site et la clé secrète.

Ensuite, sélectionnez le type de reCAPTCHA et collez votre clé de site et votre clé secrète dans les champs correspondants.

Après cela, choisissez les formulaires que vous voulez protéger avec reCAPTCHA. Dans ce cas, nous allons sélectionner notre formulaire de connexion et d’enregistrement. Après cela, enregistrez les changements.

1.2.3) Test

Après cela, il est temps de vérifier votre page de connexion WooCommerce. Ouvrez la page de connexion dans une fenêtre incognito et vous devriez y voir une boîte reCAPTCHA.

Voilà, c’est fait ! Voilà comment vous pouvez facilement ajouter un champ CAPTCHA à votre page de connexion WooCommerce. Mais que faire si vous ne voulez pas utiliser d’outils tiers pour cela ? Vous pouvez également le faire avec un peu de code.

2) Ajouter CAPTCHA de manière programmée

Si vous avez quelques compétences en codage, vous pouvez ajouter CAPTCHA à votre page de connexion WooCommerce en utilisant des extraits de PHP. Dans cette section, nous allons vous montrer comment vous pouvez inclure une boîte Google reCAPTCHA dans l’écran de connexion.

Comme nous allons modifier le fichier functions.php du thème, nous vous recommandons de générer une sauvegarde complète de votre site avant de commencer. De plus, nous vous recommandons de créer un thème enfant si vous ne l’avez pas encore fait.

Pour ce tutoriel, au lieu de coller le code directement dans le fichier functions.php, nous allons utiliser le plugin Code Snippets. Il s’agit d’un outil spécifique au site utilisé par des milliers de blogueurs et de développeurs pour faciliter le processus d’édition des fichiers de base.

Installation et activation

Tout d’abord, installez et activez Code Snippets sur votre site comme indiqué ci-dessous.

Après avoir activé le plugin, vous verrez ses paramètres sur le côté gauche.

Configuration

Cliquez sur Ajouter nouveau, donnez un nom au snippet et collez le code suivant :

add_action('wp_head',function (){echo '<script src="https://www.google.com/recaptcha/api.js" async defer></script>';});
add_action('woocommerce_login_form','add_recaptcha_to_login_form');
function add_recaptcha_to_login_form() {
echo '<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>';
} { ?> 
<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div> <p>ACA el captcha</p>
<?php 
} 
add_action( "login_form", "display_login_captcha" ); 
function verify_login_captcha($user, $password) { 
if (isset($_POST['g-recaptcha-response'])) { 
$recaptcha_secret="YOUR_SECRET_KEY"; 
$response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']); 
$response = json_decode($response["body"], true); 
if (true == $response["success"]) { 
return $user; 
} else { 
return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot")); 
} 
} else { 
return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: You are a bot. If not then enable JavaScript")); 
} 
} 
add_filter("wp_authenticate_user", "verify_login_captcha", 10, 2);

Veillez à coller votre clé de site et votre clé secrète dans le code à l’endroit où il est indiqué respectivement YOUR_PUBLIC_KEY et YOUR_SECRET_KEY. Une fois que vous avez fait cela, enregistrez les changements et activez le snippet.

Test de

Maintenant, vous devez vérifier votre page de connexion WooCommerce depuis une fenêtre incognito. Vous devriez y voir une boîte reCAPTCHA.

Voilà, c’est fait ! Voilà comment vous pouvez ajouter CAPTCHA à la page de connexion de WooCommerce en utilisant un peu de code.

Bonus : Comment personnaliser la page de connexion

Lorsque vous gérez une boutique WooCommerce, c’est une bonne pratique de personnaliser votre page de connexion. Cela vous permettra non seulement de vous différencier de vos concurrents, mais aussi de rendre votre site plus sûr. Dans cette section, nous allons vous montrer comment modifier votre page de connexion sans écrire une seule ligne de code pour offrir aux utilisateurs une meilleure expérience et assurer la sécurité de votre boutique.

Il existe de nombreux plugins permettant de personnaliser la page de connexion. Dans ce tutoriel, nous utiliserons Custom Login Page Customizer, un outil gratuit que vous pouvez télécharger depuis le dépôt de plugins de WordPress.

La première chose que vous devez faire est d’installer et d’activer le plugin sur votre site Web. Allez dans Plugins > Add New, cherchez Custom Login Page Customizer, et installez-le.

Après l’activation, vous verrez l’option Customizer sur le côté gauche sous Login Customizer.

Une fois que vous y accédez, vous verrez le personnalisateur WordPress. Le plugin est livré avec quelques modèles préconstruits que vous pouvez utiliser pour vous faciliter la vie et gagner du temps.

Avec ce plugin, vous pourrez personnaliser l’arrière-plan, le logo, le formulaire, les champs et les boutons de votre site. En outre, vous pouvez également inclure des scripts de code personnalisés à partir de la section Custom CSS & JavaScript.

Une fois que vous êtes satisfait de votre personnalisation, n’oubliez pas d’enregistrer les modifications. Le tour est joué ! Maintenant, les visiteurs de votre site Web verront la page de connexion nouvellement conçue sur le front-end.

Pour plus d’informations à ce sujet, consultez notre guide sur la personnalisation de la page de connexion dans WordPress. En outre, nous vous recommandons également de jeter un coup d’œil à notre tutoriel pour modifier l’URL de connexion.

Conclusion

Dans l’ensemble, il est essentiel de garder votre page de connexion sécurisée. En utilisant CAPTCHA sur votre page de connexion, vous rendez votre site plus sûr et vous empêchez les utilisateurs non autorisés tels que les robots d’accéder à votre tableau de bord.

Dans ce guide, nous avons vu comment ajouter CAPTCHA à la page de connexion de WooCommerce à l’aide de plugins et avec un peu de code. Lequel devez-vous utiliser ? Cela dépend. Les deux méthodes feront le travail, donc cela dépend de vos compétences et de vos besoins. Si vous recherchez une solution facile, vous pouvez utiliser un plugin. D’autre part, si vous avez des compétences en programmation et n’aimez pas installer trop de plugins, vous pouvez ajouter l’extrait de code fourni dans ce tutoriel.

Si vous recherchez d’autres tutoriels dédiés à WooCommerce, jetez un œil à ces articles :

Comment changer l’URL de la page de connexion de WordPress
La connexion WordPress ne fonctionne pas ? Comment la réparer
Comment personnaliser la page de connexion de WordPress

Vous avez trouvé cet article utile ? Si oui, partagez cet article avec vos amis sur les médias sociaux pour les aider à protéger leurs sites.