Home-theater-designers
À mesure que les applications Web et mobiles sont devenues plus populaires, le risque de spam et d'autres activités malveillantes augmente également. Les CAPTCHA peuvent être une mesure de sécurité pratique à intégrer pour prévenir ces types de menaces de sécurité.
Un CAPTCHA est une fonctionnalité de sécurité minimale, généralement intégrée aux formulaires Web pour empêcher les attaques automatisées par les robots spammeurs. Il garantit que l'utilisateur accédant à une application est bien un humain, et non un bot exécutant un code malveillant.
Qu'est-ce que le CAPTCHA ?
L'acronyme CAPTCHA signifie Completely Automated Public Turing test to tell Computers and Humans Apart. Il fait référence à un test généré par ordinateur qui vérifie si un utilisateur particulier interagissant avec votre application est un humain et non un bot.
Il existe différents types de tests CAPTCHA que vous pouvez intégrer à votre application, tels que les CAPTCHA textuels et audio. Cependant, le type le plus populaire et le plus efficace est Google reCAPTCHA. Il vérifie la distinction entre les utilisateurs réels et les bots à l'aide d'algorithmes avancés d'analyse des risques.
Google reCAPTCHA est disponible en deux versions :
- reCAPTCHA V3 : cette version s'exécute en arrière-plan et détermine un score global en fonction du comportement de l'utilisateur.
- reCAPTCHA V2 : cette version place la case à cocher 'Je ne suis pas un robot' sur le formulaire d'authentification.
Ce guide explorera Google reCAPTCHA V2. Lisez la suite pour savoir comment l'intégrer dans une application React.
Enregistrez l'application React sur la console d'administration reCAPTCHA
Pour commencer, vous devez enregistrer votre application sur la console développeur de reCAPTCHA. Dirigez-vous vers Console d'administration reCAPTCHA de Google , connectez-vous avec votre compte Google et remplissez les détails du formulaire requis.
Indiquez le nom de l'étiquette, sélectionnez reCAPTCHA V2 , et dans la liste déroulante, choisissez les demandes de vérification à l'aide de l'option de case à cocher 'Je ne suis pas un robot'. Enfin, indiquez le nom de domaine de votre application. Pour le développement local, tapez hôte local comme nom de domaine.
100 pour cent du disque utilisé
Une fois votre application enregistrée, le site vous redirigera vers une nouvelle page avec votre secret généré et vos clés de site.
Créer un client réactif
Ce projet est double : vous allez créer un client React qui affiche un formulaire de connexion simple avec Google reCAPTCHA et un backend Express qui envoie des requêtes POST à l'API de reCAPTCHA pour vérifier le jeton généré après qu'un utilisateur a terminé le défi reCAPTCHA.
Créez un dossier de projet localement pour héberger vos fichiers de projet. Suivant, créer l'application React et changez le répertoire courant pour celui du client. Dans le répertoire racine de votre dossier client, créez un fichier .env pour stocker la clé secrète de l'API et la clé du site.
REACT_APP_reCAPTCHA_SITE_KEY = 'site key'
REACT_APP_reCAPTCHA_SECRET_KEY = 'secret key'