Ne laissez pas les visiteurs de votre site en attente: laissez-les réinitialiser leur mot de passe s'ils l'ont oublié.
Les systèmes d'authentification jouent un rôle crucial dans la fourniture d'une expérience utilisateur transparente et sécurisée. Un workflow d'authentification implique généralement deux processus: l'inscription et la connexion.
À mesure que le nombre de services en ligne augmente, les gens créent des comptes et chaque compte nécessite des identifiants de connexion uniques. Cependant, cela facilite l'oubli ou la confusion des identifiants de connexion. Pour résoudre ce problème, votre application doit implémenter une fonctionnalité de réinitialisation du mot de passe qui permet à un utilisateur de réinitialiser son mot de passe de manière pratique et sécurisée.
Configurer le projet React
Vous pouvez implémenter un flux de travail de réinitialisation de mot de passe de différentes manières. Il n'existe pas de norme universelle que chaque application devrait suivre. Au lieu de cela, vous devez adapter l'approche que vous choisissez pour répondre aux besoins spécifiques de votre application.
Le flux de travail que vous découvrirez ici comprend les étapes suivantes :
Pour commencer, démarrer rapidement un projet React. Ensuite, installez Axios, une bibliothèque de requêtes HTTP JavaScript.
npm installer axiosVous pouvez trouver le code du projet dans ce Référentiel GitHub.
Créer un composant de connexion
Dans le répertoire src, créez un nouveau composants/Login.js fichier et ajoutez le code suivant. Commencez par définir le processus de réinitialisation du mot de passe :
importer axios depuis"axios";
importer Réagissez, { useState } depuis"réagir";
importer { useContext } depuis"réagir";
importer { RecoveryContext } depuis"../Application";
importer"./global.component.css";exporterdéfautfonctionConnexion() {
constante { setPage, setOTP, setEmail } = useContext (RecoveryContext);
constante [userEmail, setUserEmail] = useState("");fonctionenvoyerOtp() {
si (utilisateurEmail) {
axios.get(` http://localhost: 5000/check_email? e-mail=${userEmail}`).alors((réponse) => {
si (réponse.statut 200) {
constante OTP = Mathématiques.sol(Mathématiques.aléatoire() * 9000 + 1000);
console.log (OTP);
setOTP(OTP);
setEmail (userEmail);
axios.post(" http://localhost: 5000/envoi_email", {
OTP,
email_destinataire: email de l'utilisateur,
})
.alors(() => Mettre en place la page(« otp »))
.attraper(console.enregistrer);
} autre {
alerte("L'utilisateur avec cet email n'existe pas !");
console.log (response.data.message);
}}).attraper(console.enregistrer);
} autre {
alerte("Veuillez saisir votre email");
}}
Ce code crée une fonction qui envoie un mot de passe à usage unique (OTP) à l'adresse e-mail d'un utilisateur. Il vérifie d'abord l'utilisateur en vérifiant son courrier électronique dans la base de données avant de générer et d'envoyer l'OTP. Enfin, il met à jour l'interface utilisateur avec la page OTP.
Complétez le composant de connexion en ajoutant du code pour afficher l'élément de formulaire JSX de connexion :
retour (Connexion</h2>
Mot de passe:
"mot de passe" />
Créer un composant de vérification OTP
Pour vous assurer de la validité d'un code saisi par un utilisateur, vous devez le comparer au code envoyé à son adresse e-mail.
Créer un nouveau composants/OTPInput.js fichier et ajoutez ce code :
importer Réagir, { useState, useContext, useEffect } depuis"réagir";
importer { RecoveryContext } depuis"../Application";
importer axios depuis"axios";
importer"./global.component.css";exporterdéfautfonctionEntrée OTP() {
constante { email, otp, setPage } = useContext (RecoveryContext);
constante [OTPinput, setOTPinput] = useState( "");
fonctionvérifierOTP() {
si (parseInt(entrée OTP) otp) {
Mettre en place la page("réinitialiser");
} autre {
alerte("Le code que vous avez entré n'est pas correct, essayez à nouveau de renvoyer le lien");
}
}
Le code crée un composant React où les utilisateurs vérifient leur code OTP. Il vérifie que le code saisi correspond à celui stocké dans l'objet de contexte. S'il est valide, il affiche la page de réinitialisation du mot de passe. Inversement, il affiche une alerte invitant l'utilisateur à réessayer ou à renvoyer l'OTP.
Vous pouvez vérifier le code dans ce dépôt qui implémente une fonction pour renvoyer les OTP et un temporisateur d'expiration pour le code OTP.
Enfin, rendez les éléments JSX d'entrée.
retour (
Vérification par e-mail</h3>
Nous avons envoyé un code de vérification à votre adresse e-mail.</p>
Créer le composant de réinitialisation du mot de passe
Créer un nouveau composants/Reset.js fichier et ajoutez ce code :
importer Réagir, {useState, useContext} depuis"réagir";
importer { RecoveryContext } depuis"../Application";
importer axios depuis"axios";
importer"./global.component.css";exporterdéfautfonctionRéinitialiser() {
constante [mot de passe, setPassword] = useState("");
constante { setPage, email } = useContext (RecoveryContext);fonctionchanger le mot de passe() {
si (mot de passe) {
essayer {
axios.put(" http://localhost: 5000/mot de passe de mise à jour", {
e-mail: e-mail,
newPassword: mot de passe,
}).alors(() => Mettre en place la page("connexion"));retour alerte("Mot de passe modifié avec succès, veuillez vous connecter !");
} attraper (erreur) {console.log (erreur);}}
retour alerte("Veuillez saisir votre nouveau mot de passe");
}
retour (Modifier le mot de passe </h2>
Ce code affiche un formulaire qui permet aux utilisateurs d'entrer un nouveau mot de passe. Lorsque l'utilisateur clique sur soumettre, il enverra une demande au serveur pour mettre à jour son mot de passe dans la base de données. Il mettra ensuite à jour l'interface utilisateur si la demande aboutit.
Mettez à jour votre composant App.js
Apportez les modifications ci-dessous à votre fichier src/App.js :
importer { useState, createContext } depuis"réagir";
importer Connexion depuis"./composants/Connexion";
importer Entrée OTP depuis"./composants/OTPInput";
importer Réinitialiser depuis"./composants/Réinitialiser";
importer"./App.css";
exporterconstante RecoveryContext = createContext();exporterdéfautfonctionApplication() {
constante [page, setPage] = useState("connexion");
constante [email, setEmail] = useState("");
constante [otp, setOTP] = useState("");fonctionNaviguerComposants() {
si (page "connexion") retour<Connexion />;
si (page « otp ») retour<Entrée OTP />;
si (page "réinitialiser") retour<Réinitialiser />;
}
retour ("App-header">
valeur={{ page, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Ce code définit un objet de contexte qui gère l'état de l'application, qui comprend l'e-mail de l'utilisateur, le code OTP et les différentes pages de l'application. Essentiellement, l'objet de contexte permet de transmettre les états requis entre différents composants, une alternative à l'utilisation d'accessoires.
Il comprend également une fonction qui gère facilement la navigation dans les pages sans avoir à restituer des composants entiers.
Configurer un serveur Express.js
Avec la configuration du client, configurez un service d'authentification principal pour gérer la fonctionnalité de réinitialisation du mot de passe.
Pour commencer, créer un serveur Web Express, et installez ces packages :
npm installer cors dotenv nodemailer mangousteSuivant, créer une base de données MongoDB ou configurer un cluster MongoDB sur le cloud. Copiez ensuite la chaîne de connexion fournie, créez un fichier ENV dans le répertoire racine et collez la chaîne de connexion.
Pour finir, vous devez configurer la connexion à la base de données et définir les modèles de données pour vos données utilisateur. Utilisez le code de ce référentiel pour configurer la connexion à la base de données et définir les modèles de données.
Définir les routes d'API
Un service backend a idéalement plusieurs routes qui gèrent les requêtes HTTP des clients. Dans ce cas, vous devrez définir trois itinéraires qui géreront les demandes d'API d'envoi d'e-mail, de vérification d'e-mail et de mot de passe de mise à jour du client React.
Créez un nouveau fichier appelé userRoutes.js dans le répertoire racine et ajoutez le code suivant :
constante exprimer = exiger('exprimer');
constante routeur = express. Routeur();
constante userControllers = exiger('../controllers/userControllers');routeur.get('/vérifier le courriel', userControllers.checkEmail);
router.put('/mettre à jour le mot de passe', userControllers.updatePassword);
routeur.post('/send_email', userControllers.sendEmail);
module.exports = routeur ;
Contrôleurs pour les routes API
Les contrôleurs sont responsables du traitement des requêtes HTTP des clients. Une fois qu'un client fait une demande à une route d'API particulière, une fonction de contrôleur est invoquée et exécutée pour traiter la demande et renvoyer une réponse appropriée.
Créer un nouveau controllers/userControllers.js fichier et ajoutez le code ci-dessous.
Utilisez le code de ce référentiel pour définir des contrôleurs pour la vérification des e-mails et la mise à jour du mot de passe Routes d'API.
Commencez par définir le contrôleur d'envoi d'e-mail :
exports.sendEmail = (demande, résolution) => {
constante transporteur = nodemailer.createTransport({
service: 'Gmail',
sécurisé: vrai,
authentification: {
utilisateur: process.env. MON EMAIL,
passe: process.env. APP_PASSWORD,
},
});constante { destinataire_email, OTP } = req.body ;
constante mailOptions = {
depuis: process.env. MON EMAIL,
à: email_destinataire,
sujet: 'RÉINITIALISATION DU MOT DE PASSE',
html: `Récupération de mot de passe</h2>
Utiliser ce OTP pour réinitialiser votre mot de passe. L'OTP est valide pour1 minutes</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (erreur, info) => {
si (erreur) {
console.log (erreur);
res.statut(500).envoyer({ message: "Une erreur s'est produite lors de l'envoi de l'e-mail" });
} autre {
console.enregistrer('Email envoyé: ' + info.réponse);
res.statut(200).envoyer({ message: "E-mail envoyé avec succès" });
}
});
};
Ce code définit une fonction qui utilise Nodemailer pour envoyer un e-mail avec un OTP réinitialisé à un destinataire spécifié. Il configure un transporteur en utilisant votre propre compte Gmail et votre mot de passe.
Pour obtenir votre mot de passe d'application Gmail, vous devez générer un mot de passe d'application dans les paramètres de votre compte Google. Vous utiliserez ensuite ce mot de passe à la place de votre mot de passe Gmail habituel pour authentifier Nodemailer.
Configurer le point d'entrée du serveur
Créez un fichier server.js dans le répertoire racine et ajoutez ce code :
constante exprimer = exiger('exprimer');
constante cors = exiger('cors');
constante app = express();
constante port = 5000;
exiger('dotenv').config();
constante nodemailer = exiger('nodemailer');
constante connectDB = exiger('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencodé({ étendu: vrai }));
app.use (cors());
constante userRoutes = exiger('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
console.enregistrer(`Le serveur écoute à http://localhost:${port}`);
});
Une fois le client et le serveur configurés, vous pouvez exécuter les serveurs de développement pour tester la fonctionnalité de mot de passe.
Création d'un service de réinitialisation de mot de passe personnalisé
Créer un système de réinitialisation de mot de passe en l'adaptant à votre application et à ses utilisateurs est la meilleure approche, même si des solutions payantes et pré-construites existent. Lors de la conception de cette fonctionnalité, vous devez tenir compte à la fois de l'expérience utilisateur et de la sécurité, car les attaques constituent une menace constante.
