À 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.
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 reCAPTCHA défi.
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 = 'clé du site'
REACT_APP_reCAPTCHA_SECRET_KEY = 'clef secrète'Vous pouvez trouver le code de ce projet dans son Référentiel GitHub.
Installer les packages requis
Installez Axios, vous utiliserez cette bibliothèque pour effectuer des requêtes HTTP depuis le navigateur et React-Google-reCAPTCHA. Ce package fournit une implémentation spécifique à React pour l'API reCAPTCHA.
npm installer react-recaptcha-google axios --saveIntégrer Google reCAPTCHA dans l'application React
Ouvrez le fichier src/App.js, supprimez le code standard React et ajoutez le code ci-dessous :
Ce composant affichera un formulaire de connexion simple qui inclut le widget Google reCAPTCHA.
Tout d'abord, importez les packages React, Axios et react-google-recaptcha :
importer Réagir, { useState, useRef } depuis'réagir';
importer Axios depuis'axios';
importer ReCAPTCHA depuis'react-google-recaptcha';Définissez ensuite trois variables d'état: successMsg, errorMsg et validToken. Votre code mettra à jour ces états lors de la soumission réussie du formulaire et de la validation reCAPTCHA. De plus, obtenez le site et les clés secrètes du fichier ENV.
fonctionApplication() {
constante [SuccessMsg, setSuccessMsg] = useState("")
constante [ErrorMsg, setErrorMsg] = useState("")
constante [valid_token, setValidToken] = useState([]);
constante SITE_KEY = processus.env. REACT_APP_reCAPTCHA_SITE_KEY ;
constante SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY ;
Définissez un crochet useRef qui fait référence au composant reCAPTCHA, pour capturer le jeton généré après qu'un utilisateur a terminé les défis reCAPTCHA.
constante captchaRef = useRef(nul);Ensuite, créez une fonction handleSubmit à appeler lorsqu'un utilisateur soumet le formulaire de connexion. Cette fonction obtient le jeton du composant reCAPTCHA, puis appelle le réinitialiser méthode pour réinitialiser le reCAPTCHA afin de permettre des vérifications ultérieures.
De plus, il vérifie si le jeton existe et appelle la fonction verifyToken pour vérifier le jeton. Une fois le jeton vérifié, il mettra à jour l'état validToken avec les données de réponse de l'API.
constante handleSubmit = asynchrone (e) => {
e.preventDefault();
laisser jeton = captchaRef.current.getValue();
captchaRef.current.reset();si (jeton) {
laisser valid_token = attendre verifyToken (jeton);
setValidToken (valid_token);
si (valid_token[0].succès vrai) {
console.enregistrer("vérifié");
setSuccessMsg("Hourra!! vous avez soumis le formulaire")
} autre {
console.enregistrer("non vérifié");
setErrorMsg(" Désolé!! Vérifiez que vous n'êtes pas un bot")
}
}
}
Enfin, définissez la fonction verifyToken qui enverra une requête POST à un point de terminaison de serveur Express à l'aide d'Axios, en transmettant le jeton reCAPTCHA et la clé secrète dans le corps de la requête. Si la demande aboutit, elle envoie les données de réponse au tableau APIResponse et renvoie le tableau en conséquence.
constante vérifierJeton = asynchrone (jeton) => {
laisser Réponse API = [] ;essayer {
laisser réponse = attendre Axios.post(` http://localhost: 8000/vérifier-jeton`, {
reCAPTCHA_TOKEN: jeton,
Clé_secrète: CLÉ_Secrète,
});
APIResponse.push (réponse['données']);
retour Réponse API ;
} attraper (erreur) {
console.log (erreur);
}
};
Enfin, renvoyez un formulaire avec le composant reCAPTCHA. Ce composant prend le crochet de référence et la clé de site comme accessoires pour configurer et afficher le widget reCAPTCHA.
Lorsqu'un utilisateur soumet 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 qu'un utilisateur a réussi les défis reCAPTCHA, il affiche le message de réussite, sinon, il affiche le message d'erreur.
retour ("Application">"App-header"> "Formulaire de connexion">
exporterdéfaut Application
Enfin, lancez le serveur de développement et rendez-vous sur votre navigateur de http://localhost: 3000 pour voir les résultats.
Créer le backend express
Pour commencer, dans le répertoire racine de l'ensemble du dossier du projet, créer un serveur Web Express, et installez ces packages :
npm installer express cors axios body-parserConfigurer le serveur express
Ensuite, ouvrez le fichier index.js dans le dossier du projet du serveur et ajoutez ce code :
constante exprimer = exiger('exprimer')
constante axios = exiger('axios');
constante cors = exiger('cors');
constante app = express();constante bodyParser = exiger('analyseur de corps');
constante jsonParser = bodyParser.json();
constante PORT = processus.env. PORT || 8000;app.use (jsonParser);
app.use (cors());app.post("/verify-token", asynchrone (req, res) => {
constante { reCAPTCHA_TOKEN, Secret_Key} = req.body ;essayer {
laisser réponse = attendre axios.post(` https://www.google.com/recaptcha/api/siteverify? secret=${Secret_Key}&réponse=${reCAPTCHA_TOKEN}`);
console.log (response.data);retour res.statut(200).json({
succès:vrai,
message: "Jeton vérifié avec succès",
information_vérification: réponse.données
});
} attraper(erreur) {
console.log (erreur);retour res.statut(500).json({
succès:FAUX,
message: "Erreur lors de la vérification du jeton"
})
}
});
app.listen (PORT, () => console.enregistrer(`L'application a démarré sur le port ${PORT}`));
Ce code effectue les opérations suivantes :
- Le serveur définit une route Post qui envoie une requête HTTP POST asynchrone à l'API reCAPTCHA de Google pour vérifiez le jeton reCAPTCHA à l'aide d'Axios, en transmettant la clé secrète pour l'authentification dans l'URL de la demande.
- Si le jeton reCAPTCHA est vérifié avec succès, le serveur répond avec un objet JSON contenant une propriété "success" définie sur true, une propriété "message" indiquant que le jeton a été vérifié avec succès, et une propriété "verification_info" contenant des informations sur la réponse de vérification de Google API.
- Si une erreur se produit pendant le processus de vérification, le serveur répond avec un objet JSON contenant un propriété "success" définie sur false et une propriété "message" indiquant qu'une erreur s'est produite lors de la vérification du jeton.
Enfin, exécutez le serveur de nœud et testez la fonctionnalité de la fonctionnalité reCAPTCHA.
index de nœud.jsLes reCAPTCHA peuvent-ils garantir la sécurité contre les spambots?
Selon Google, son service 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 infaillible, car les mauvais acteurs déterminés peuvent toujours trouver des solutions de contournement. Mais cela reste un outil essentiel qui peut réduire considérablement le risque de spambots.
