Les applications web et mobiles sont devenues de plus en plus populaires, tout comme le risque de spam et d’autres activités malveillantes. Les CAPTCHA peuvent être une mesure de sécurité pratique qu’il vaut la peine d’intégrer pour prévenir ces types de menaces.
Un CAPTCHA est un dispositif de sécurité minimal, couramment intégré aux formulaires web pour prévenir les attaques automatisées des spambots. Il permet de s’assurer que l’utilisateur qui accède à une application est bien un être humain, et non un robot exécutant un code malveillant.
Qu’est-ce qu’un CAPTCHA ?
L’acronyme CAPTCHA signifie Completely Automated Public Turing test to tell Computers and Humans Apart. Il s’agit d’un test généré par un ordinateur qui vérifie si l’utilisateur qui interagit 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 populaire et le plus efficace est Google reCAPTCHA. Il vérifie la distinction entre les utilisateurs réels et les robots à l’aide d’algorithmes avancés d’analyse des risques.
Google reCAPTCHA existe en deux versions :
- reCAPTCHA V3 : cette version s’exécute en arrière-plan et détermine un score global basé sur le 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 va explorer Google reCAPTCHA V2. Lisez la suite pour apprendre à l’intégrer dans une application React.
Enregistrer l’application React sur la console d’administration reCAPTCHA
Pour commencer, vous devez enregistrer votre application sur la console de développement de reCAPTCHA. Rendez-vous sur la console d’administration reCAPTCHA de Google, connectez-vous avec votre compte Google et remplissez les champs du formulaire.
Indiquez le nom de l’étiquette, sélectionnez reCAPTCHA V2et dans la liste déroulante, choisissez l’option vérifier les demandes en utilisant la case à cocher « Je ne suis pas un robot ». Enfin, indiquez le nom de domaine de votre application. Pour un développement local, tapez localhost comme nom de domaine.
Une fois votre application enregistrée, le site vous redirige vers une nouvelle page contenant les clés secrètes et de site que vous avez générées.
Créer un client React
Ce projet comporte deux volets : vous allez créer un client React qui affiche un simple formulaire de connexion avec le reCAPTCHA de Google et un backend Express qui effectue des requêtes POST à l’API de reCAPTCHA pour vérifier le jeton généré après qu’un utilisateur ait complété le défi reCAPTCHA.
Créez un dossier de projet localement pour héberger vos fichiers de projet. Ensuite, créez l’application React et changez le répertoire courant en 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' Vous pouvez trouver le code de ce projet dans son dépôt GitHub.
Installer les paquets nécessaires
Installez Axios, vous utiliserez cette bibliothèque pour faire des requêtes HTTP depuis le navigateur et React-Google-reCAPTCHA. Ce paquetage fournit une implémentation spécifique à React pour l’API reCAPTCHA.
npm install react-recaptcha-google axios --save Intégrer Google reCAPTCHA dans l’application React
Ouvrir le src/App.jssupprimez le code React standard et ajoutez le code ci-dessous :
Ce composant rendra un simple formulaire de connexion qui inclut le widget Google reCAPTCHA.
Tout d’abord, importez les paquets React, Axios et react-google-recaptcha :
import React, { useState, useRef } from 'react';
import Axios from 'axios';
import ReCAPTCHA from '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 du reCAPTCHA. De plus, récupérez les clés site et secret dans le fichier ENV.
function App() {
const [SuccessMsg, setSuccessMsg] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = process.env.REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = process.env.REACT_APP_reCAPTCHA_SECRET_KEY; Définir un hook useRef qui fait référence au composant reCAPTCHA, pour capturer le jeton généré après qu’un utilisateur ait complété les défis reCAPTCHA.
const captchaRef = useRef(null); Créez ensuite une fonction handleSubmit à appeler lorsque l’utilisateur soumet le formulaire de connexion. Cette fonction obtient le jeton du composant reCAPTCHA et appelle ensuite la fonction réinitialisation pour réinitialiser le reCAPTCHA afin de permettre des vérifications ultérieures.
En outre, il vérifie si le jeton existe et appelle la fonction verifyToken pour vérifier le jeton. Une fois le jeton vérifié, il met à jour l’état validToken avec les données de la réponse de l’API.
const handleSubmit = async (e) => {
e.preventDefault();
let token = captchaRef.current.getValue();
captchaRef.current.reset();
if (token) {
let valid_token = await verifyToken(token);
setValidToken(valid_token);
if (valid_token[0].success === true) {
console.log("verified");
setSuccessMsg("Hurray!! you have submitted the form")
} else {
console.log("not verified");
setErrorMsg(" Sorry!! Verify you are not a bot")
}
}
} Enfin, définissez la fonction verifyToken qui enverra une requête POST à un point d’extrémité de serveur Express utilisant Axios, en passant le jeton reCAPTCHA et la clé secrète dans le corps de la requête. Si la requête aboutit, elle pousse les données de réponse dans le tableau APIResponse et renvoie le tableau en tant que résultat.
const verifyToken = async (token) => {
let APIResponse = [];
try {
let response = await Axios.post(`http://localhost:8000/verify-token`, {
reCAPTCHA_TOKEN: token,
Secret_Key: SECRET_KEY,
});
APIResponse.push(response['data']);
return APIResponse;
} catch (error) {
console.log(error);
}
};
Enfin, renvoyez un formulaire avec le composant reCAPTCHA. Ce composant prend le crochet de référence et la clé du site comme accessoires pour configurer et afficher le widget reCAPTCHA.
Lorsque l’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 que l’utilisateur a réussi à relever le défi reCAPTCHA, il affiche le message de réussite, sinon il affiche le message d’erreur.
return (
<div className="App">
<header className="App-header">
<div className="logIn-form">
<form onSubmit={handleSubmit}>
{valid_token.length > 0 && valid_token[0].success === true
? <h3 className="textSuccess">{SuccessMsg}</h3>
: <h3 className="textError">{ErrorMsg} </h3>}
<p>User Name</p>
<input type="text" placeholder="User Name..." />
<p>Password</p>
<input type="password" placeholder = "Password..." />
<ReCAPTCHA
className="recaptcha"
sitekey={SITE_KEY}
ref={captchaRef}
/>
<button type="submit">Submit</button>
</form>
</div>
</header>
</div>
);
}
export default App Enfin, exécutez le serveur de développement et allez sur votre navigateur 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éez un serveur web Express, et installez ces paquets :
npm install express cors axios body-parser Configurer le serveur Express
Ensuite, ouvrez le fichier index.js dans le dossier du projet de serveur, et ajoutez ce code :
const express = require('express')
const axios = require('axios');
const cors = require('cors');
const app = express();
const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
const PORT = process.env.PORT || 8000;
app.use(jsonParser);
app.use(cors());
app.post("/verify-token", async (req,res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;
try {
let response = await axios.post(`https://www.google.com/recaptcha/api/siteverify?secret=${Secret_Key}&response=${reCAPTCHA_TOKEN}`);
console.log(response.data);
return res.status(200).json({
success:true,
message: "Token successfully verified",
verification_info: response.data
});
} catch(error) {
console.log(error);
return res.status(500).json({
success:false,
message: "Error verifying token"
})
}
});
app.listen(PORT, () => console.log(`App started on port ${PORT}`)); Ce code fait ce qui suit :
- Le serveur définit une route 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 la clé secrète d’authentification dans l’URL de la requête.
- Si le jeton reCAPTCHA est vérifié avec succès, le serveur répond avec un objet JSON contenant une propriété « success » fixée à 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 l’API de Google.
- Si une erreur survient au cours du processus de vérification, le serveur répond par un objet JSON contenant une propriété « success » fixée à false et une propriété « message » indiquant qu’il y a eu une erreur lors de la vérification du jeton.
Enfin, exécutez le serveur de nœuds et testez la fonctionnalité reCAPTCHA.
node index.js Les reCAPTCHAs 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 spams peut contourner la fonction de sécurité reCAPTCHA.
reCAPTCHA n’est pas infaillible, car des acteurs malveillants déterminés peuvent toujours trouver des solutions de contournement. Mais il reste un outil essentiel qui peut réduire de manière significative le risque lié aux spambots.
