Intégrer Google reCAPTCHA dans une application React

Alors que les applications web et mobiles sont devenues de plus en plus importantes, le risque de spam et d’autres tâches malveillantes a également augmenté. Les CAPTCHA peuvent être une action de sécurité utile qui mérite d’être incorporée pour prévenir ces types de menaces de sécurité.

Un CAPTCHA est un dispositif de sécurité minimal, généralement incorporé aux types de sites web pour éviter les attaques informatiques des spambots. Il garantit que le client qui accède à une application est sans aucun doute un être humain, et non un robot exécutant un code malveillant.

Qu’est-ce que le CAPTCHA ?

L’acronyme CAPTCHA signifie Completely Automated Public Turing test to inform Computers and also Humans Apart. Il s’agit d’un test généré par un ordinateur qui vérifie si une personne interagissant avec votre application est un humain et non un robot.

Il existe différents types de tests CAPTCHA que vous pouvez intégrer dans votre application, tels que les CAPTCHA textuels et audio. Cependant, le type le plus connu et le plus fiable est Google reCAPTCHA. Il compare les clients réels et les robots à l’aide de formules innovantes d’évaluation du danger.

Google reCAPTCHA se décline en 2 variantes :

  • reCAPTCHA V3 : cette version fonctionne en arrière-plan et détermine un score global basé sur les habitudes de l’utilisateur.
  • reCAPTCHA V2 : Cette version ajoute la case à cocher « Je ne suis pas un robot » au type d’authentification.

Cet aperçu permettra certainement de découvrir Google reCAPTCHA V2. Poursuivez votre lecture pour apprendre à l’incorporer directement dans une application React.

Enregistrer l’application React sur la console d’administration reCAPTCHA

Pour commencer, vous devez enregistrer votre application sur la console du concepteur de reCAPTCHA. Rendez-vous sur Console d’administration reCAPTCHA de Google , connectez-vous avec votre compte Google et remplissez les détails du formulaire.

Indiquez le nom de l’étiquette, choisissez reCAPTCHA V2 ainsi que dans la liste déroulante, sélectionnez l’option valider les demandes en utilisant la case à cocher « Je ne suis pas un robot ». Enfin, indiquez le domaine de votre application. Pour un avancement local, tapez localhost comme nom de domaine.

Une fois votre demande enregistrée, le site web vous redirigera vers une nouvelle page contenant votre secret de production ainsi que les clés du site.

Voir aussi :  Comment accélérer les applications React avec le découpage du code

Créer un client React

Cette tâche est double : vous allez créer un client React qui fournit un simple formulaire de connexion avec le reCAPTCHA de Google et aussi un backend Express qui fait des demandes POST à l’API de reCAPTCHA pour valider le jeton généré après qu’un individu ait terminé le défi reCAPTCHA.

Créez un dossier de tâches localement pour héberger vos données de travail. Ensuite, créez l’application React et changez le répertoire courant en celui du client. Dans le site du répertoire d’origine de votre dossier client, développez un fichier .env pour enregistrer la clé secrète de l’API et la clé du site web.

Vous pouvez découvrir le code de ce projet dans sa base de données GitHub.

Installez les paquets requis

Installez Axios, vous utiliserez cette collection pour faire des demandes HTTP au navigateur internet et React-Google-reCAPTCHA. Ce paquetage offre une implémentation spécifique à React pour l’API reCAPTCHA.

Intégrer Google reCAPTCHA dans l’application React

Ouvrez le paquetage src/ App.js , supprimez le code React boilerplate, et incluez le code listé ci-dessous :

Cette partie va certainement rendre un type de connexion simple qui inclut le widget Google reCAPTCHA.

Tout d’abord, importez les bundles React, Axios, ainsi que react-google-recaptcha :

Spécifiez ensuite trois variables d’état : successMsg, errorMsg et validToken. Votre code mettra certainement à jour ces états lors de la soumission effective du formulaire et de la validation du reCAPTCHA. De plus, obtenez le site web et les astuces secrètes du fichier ENV.

Définissez un hook useRef qui fait référence à l’élément reCAPTCHA, pour attraper le jeton créé après qu’un utilisateur ait complété les défis reCAPTCHA.

Ensuite, créez une fonctionnalité handleSubmit à appeler lorsqu’un individu soumet le formulaire de connexion. Cette fonction récupère le jeton de l’élément reCAPTCHA et appelle ensuite la fonction réinitialiser pour réinitialiser le reCAPTCHA afin de permettre les vérifications ultérieures.

Dans l’amélioration, il vérifie si le jeton existe, et appelle également la fonction verifyToken pour valider le jeton. Une fois le jeton vérifié, il met à jour l’état validToken avec les informations de retour de l’API.

Voir aussi :  Les 5 meilleurs linters de Node.js

Enfin, définissez la fonction verifyToken qui enverra certainement une demande POST à un point d’extrémité de serveur Web Express utilisant Axios, en passant le jeton reCAPTCHA ainsi que le type de secret dans le corps de la demande. Si la demande réussit, elle pousse les informations de réponse dans le tableau APIResponse et renvoie la plage en tant que résultat.

Enfin, retourner un type avec le composant reCAPTCHA. Ce composant prend dans le crochet de recommandation ainsi que le site Web essentiel comme props pour configurer ainsi que d’afficher le widget reCAPTCHA.

Lorsqu’une personne envoie le formulaire, le composant affiche un message de réussite ou d’erreur en fonction de la valeur de l’état validToken. Si le jeton reCAPTCHA est valide, ce qui signifie que l’utilisateur a réussi à surmonter les difficultés du reCAPTCHA, il affiche le message de réussite, sinon, il affiche le message d’erreur.

Enfin, exécutez le serveur de développement et rendez-vous sur votre navigateur http://localhost:3000 pour afficher les résultats.

Créer le backend Express

Pour commencer, dans le répertoire racine du dossier de l’ensemble du travail, produisez un serveur web Express , et montez ces plans :

Configuration du serveur Express

Ensuite, ouvrez le fichier index.js dans le dossier des tâches du serveur, et ajoutez ce code :

Ce code effectue les opérations suivantes :

  • Le serveur définit un chemin Post qui effectue une requête HTTP POST asynchrone à l’API reCAPTCHA de Google pour vérifier le jeton reCAPTCHA à l’aide d’Axios, en transmettant l’astuce secrète pour l’authentification dans l’URL de la demande.
  • Si le jeton reCAPTCHA est vérifié efficacement, le serveur répond avec une chose JSON comprenant une maison « success » réglée sur true, un bâtiment « message » montrant que le jeton a été confirmé avec succès, et aussi une propriété résidentielle « verification_info » ayant des détails concernant la réponse de confirmation de l’API de Google.
  • Si une erreur se produit au cours du processus de confirmation, le serveur web réagit avec un objet JSON composé d’une propriété « success » prête à être incorrecte ainsi que d’une propriété résidentielle « message » suggérant qu’il y a eu une erreur dans la vérification du jeton.
Voir aussi :  Comment améliorer les performances de recherche dans React avec Debouncing

Enfin, exécutez le serveur web du nœud et examinez les performances de la fonction reCAPTCHA.

Les reCAPTCHA peuvent-ils garantir la sécurité contre les spambots ?

Selon Google, sa solution reCAPTCHA a un taux de réussite de plus de 99 %, ce qui signifie que seul un petit pourcentage de spam peut contourner la fonction de sécurité reCAPTCHA.

reCAPTCHA n’est pas à l’abri des pannes, car les criminels établis peuvent toujours trouver des solutions de contournement. Mais il continue d’être un dispositif crucial qui peut réduire considérablement la menace des spambots.

S’abonner à notre lettre d’information

Comment intégrer un Google reCAPTCHA ?

Ajouter un Google reCAPTCHA à un formulaire

  • Cliquez sur l’icône en forme de crayon ou Modifier sur le formulaire ou le bloc de newsletter.
  • Dans l’onglet Stockage, cliquez sur Google reCAPTCHA.
  • Activez la case à cocher Utiliser Google reCAPTCHA.
  • Répétez ces étapes pour tous les blocs de formulaire de votre site où vous souhaitez ajouter un reCAPTCHA.

Comment ajouter un Google Captcha à next JS ?

Saisissez un nom d’étiquette, sélectionnez reCAPTCHA V3, ajoutez localhost dans le champ domaines et enregistrez notre site. Si vous prévoyez de déployer l’application sur un domaine, le nom de domaine doit être ajouté ici. Après l’envoi, nous obtiendrons une page montrant certaines informations d’identification, la CLÉ DU SITE et la CLÉ SECRÈTE.

Comment intégrer un reCAPTCHA en HTML ?

Une fois que vous avez votre compte, vous devez ajouter le domaine de votre site web et obtenir une clé de site et une clé secrète.

  • Allez sur la page « Admin » (cliquez sur le bouton admin en haut à droite de la page).
  • Cliquez sur le symbole + (plus) dans la barre supérieure pour créer un nouveau site.
  • Ajoutez un libellé, par exemple, ajoutez votre nom de domaine.
  • Choisissez le type de reCAPTCHA.

Comment intégrer Google reCAPTCHA v2 ?

Pour intégrer Google reCAPTCHA v2 dans eFront : Visitez https://www.google.com/u/1/recaptcha/admin pour enregistrer votre site web. Il est obligatoire de donner un nom à votre intégration sous Label (1) : Attendez le message pop-up de confirmation.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *