Cum să gestionați fluxul de lucru uitat și resetat parola folosind React și Node.js

Sistemele de autentificare joacă un rol crucial în oferirea unei experiențe de utilizator fără întreruperi și sigure. Un flux de lucru de autentificare implică de obicei două procese: înregistrare și conectare.

Pe măsură ce numărul de servicii online crește, oamenii creează conturi și fiecare cont necesită acreditări unice de conectare. Cu toate acestea, acest lucru facilitează uitarea sau confundarea acreditărilor de conectare. Pentru a rezolva acest lucru, aplicația dvs. ar trebui să implementeze o funcție de resetare a parolei care să permită unui utilizator să își reseta parola în mod convenabil și în siguranță.

Configurați proiectul React

Puteți implementa un flux de lucru de resetare a parolei în diferite moduri — nu există un standard universal pe care să-l urmeze fiecare aplicație. În schimb, ar trebui să adaptați abordarea pe care o alegeți pentru a răspunde nevoilor specifice ale aplicației dvs.

Fluxul de lucru despre care veți afla aici include următorii pași:

Pentru a incepe, porniți rapid un proiect React. Apoi, instalați Axios, o bibliotecă de solicitări HTTP JavaScript.

npm instalează axios

Puteți găsi codul proiectului în aceasta Depozitul GitHub.

Creați o componentă de conectare

În directorul src, creați un nou componente/Login.js fișier și adăugați următorul cod. Începeți prin a defini procesul de resetare a parolei:

import axios din"axios";
import Reacționează, { useState } din"reacţiona";
import { useContext } din"reacţiona";
import { RecoveryContext } din„../Aplicație”;
import„./global.component.css”;
exportMod implicitfuncţieLog in() {
const { setPage, setOTP, setEmail } = useContext (RecoveryContext);
const [userEmail, setUserEmail] = useState(""); 
funcţietrimiteOtp() {
dacă (e-mail utilizator) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).apoi((raspuns) => {
dacă (răspunsul.starea 200) {
const OTP = Matematică.podea(Matematică.Aleatoriu() * 9000 + 1000);
consolă.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/send_email", {
 OTP,
 recipient_email: userEmail,
 })
 .apoi(() => setPage("otp"))
 .captură(consolă.Buturuga);
 } altfel {
 alerta(„Utilizatorul cu acest e-mail nu există!”);
consolă.log (răspuns.date.mesaj);
 }}).captură(consolă.Buturuga);
 } altfel {
 alerta("Te rog introdu e-mailul tău");
 }}

Acest cod creează o funcție care trimite o parolă unică (OTP) la adresa de e-mail a unui utilizator. Mai întâi verifică utilizatorul verificându-și e-mailul în baza de date înainte de a genera și trimite OTP. În cele din urmă, actualizează interfața de utilizare cu pagina OTP.

Completați componenta de conectare adăugând cod pentru a reda elementul de formular JSX de conectare:

întoarcere (


Autentificare</h2>




 E-mail: 
"e-mail" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Parola:
"parola" />
"Trimite">autentificare</button>
 </form>
"#" onClick={() => sendOtp()}>
 Aţi uitat parola
 </a>
 </div>
 );
}

Creați o componentă de verificare OTP

Pentru a asigura validitatea unui cod introdus de un utilizator, trebuie să-l comparați cu codul trimis pe e-mailul acestuia.

Creaza un nou componente/OTPInput.js fișier și adăugați acest cod:

import Reacționează, { useState, useContext, useEffect } din"reacţiona";
import { RecoveryContext } din„../Aplicație”;
import axios din"axios";
import„./global.component.css”;
exportMod implicitfuncţieOTPInput() {
const { email, otp, setPage } = useContext (RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
funcţieverificaOTP() {
dacă (parseInt(OTPinput) otp) {
 setPage("resetare");
 } altfel {
 alerta(„Codul pe care l-ați introdus nu este corect, încercați din nou să retrimiteți linkul”);
 }
 }

Codul creează o componentă React în care utilizatorii își verifică codul OTP. Verifică dacă codul introdus se potrivește cu cel stocat în obiectul context. Dacă este valid, afișează pagina de resetare a parolei. În schimb, afișează o alertă care solicită utilizatorului să încerce din nou sau să retrimite OTP.

Puteți verifica codul în aceasta repertoriu care implementează o funcție pentru retrimiterea OTP-urilor și un temporizator de expirare pentru codul OTP.

În cele din urmă, redați elementele JSX de intrare.

întoarcere (


Verificare e-mail</h3>


Am trimis un cod de verificare pe adresa ta de e-mail.</p>



"text" value={OTInput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Verifică contul</button> 
 resendOTP()} > Didnnu primesti codul? 
 {dezactivare? `Retrimiteți OTP în ${timerCount}s`: „Retrimiteți OTP”}
 </a> 
 </form>
 </div>
 );}

Creați componenta Resetare parolă

Creaza un nou componente/Reset.js fișier și adăugați acest cod:

import Reacționează, {useState, useContext} din"reacţiona";
import { RecoveryContext } din„../Aplicație”;
import axios din"axios";
import„./global.component.css”;
exportMod implicitfuncţieResetați() {
const [parolă, setPassword] = useState("");
const { setPage, email } = useContext (RecoveryContext);
funcţieschimbaţi parola() {
dacă (parola) {
încerca {
 axios.put(" http://localhost: 5000/actualizare-parolă", {
 email: email,
 newPassword: parola,
 }).apoi(() => setPage("log in"));
întoarcere alerta(„Parola a fost schimbată cu succes, vă rugăm să vă autentificați!”);
 } captură (eroare) {consolă.log (eroare);}}
întoarcere alerta(„Vă rugăm să introduceți noua parolă”);
 }
întoarcere (


 Schimbați parola </h2>




 Parolă Nouă: 
 tip="parola"
 substituent="..."
 necesar=""
 valoare={parolă}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Resetează parola </button>
 </form>
 </div>
 );
}

Acest cod redă un formular care permite utilizatorilor să introducă o nouă parolă. Când utilizatorul face clic pe submit, acesta va trimite o solicitare către server pentru a-și actualiza parola în baza de date. Apoi, va actualiza interfața de utilizare dacă solicitarea are succes.

Actualizați-vă componenta App.js

Efectuați modificările de mai jos în fișierul dvs. src/App.js:

import { useState, createContext } din"reacţiona";
import Log in din„./components/Login”;
import OTPInput din„./components/OTPInput”;
import Resetați din„./components/Reset”;
import„./App.css”;
exportconst RecoveryContext = createContext();
exportMod implicitfuncţieApp() {
const [pagina, setPage] = useState("log in");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");
funcţieNavigateComponents() {
dacă (pagină "log in") întoarcere<Log in />;
dacă (pagină "otp") întoarcere<OTPInput />;
dacă (pagină "resetare") întoarcere<Resetați />;
 }
întoarcere (
„Aplicație antet”> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



 </div>
 </RecoveryContext.Provider>
 </div>
 );
}

Acest cod definește un obiect de context care gestionează starea aplicației, care include e-mailul utilizatorului, codul OTP și diferitele pagini din aplicație. În esență, obiectul context face posibilă trecerea stărilor necesare între diferite componente - o alternativă la utilizarea elementelor de recuzită.

Include, de asemenea, o funcție care gestionează navigarea paginii cu ușurință, fără a fi nevoie să redați componente întregi.

Configurați un server Express.js

Odată cu configurarea clientului, configurați un serviciu de autentificare backend pentru a gestiona funcționalitatea de resetare a parolei.

Pentru a incepe, creați un server web Expressși instalați aceste pachete:

npm instalează cors dotenv nodemailer mongoose

Următorul, creați o bază de date MongoDB sau configurați un cluster MongoDB pe cloud. Apoi copiați șirul de conexiune furnizat, creați un fișier ENV în directorul rădăcină și lipiți șirul de conexiune.

Pentru a finaliza, trebuie să configurați conexiunea la baza de date și să definiți modelele de date pentru datele dvs. de utilizator. Utilizați codul din acest depozit pentru a configurați conexiunea la baza de date și defini modelele de date.

Definiți rutele API

Un serviciu de backend are în mod ideal mai multe rute care gestionează solicitările HTTP ale clienților. În acest caz, va trebui să definiți trei rute care vor gestiona solicitările API de trimitere a e-mailului, de verificare a e-mailului și de actualizare a parolei de la clientul React.

Creați un fișier nou numit userRoutes.js în directorul rădăcină și adăugați următorul cod:

const expres = cere('expres');
const router = expres. Router();
const userControllers = cere(„../controllers/userControllers”);
router.get('/verifica e-mail', userControllers.checkEmail);
router.put(„/actualizare-parolă”, userControllers.updatePassword);
router.post('/Trimite email', userControllers.sendEmail);
modul.exports = router;

Controlere pentru rutele API

Controlorii sunt responsabili pentru procesarea cererilor HTTP ale clienților. Odată ce un client face o cerere către o anumită rută API, o funcție de controler este invocată și executată pentru a procesa cererea și a returna un răspuns adecvat.

Creaza un nou controllers/userControllers.js fișier și adăugați codul de mai jos.

Utilizați codul din acest depozit pentru a definiți controlori pentru verificarea e-mailului și actualizarea parolei rute API.

Începeți prin a defini controlerul de trimitere a e-mailului:

exports.sendEmail = (cerere, res) => {
const transporter = nodemailer.createTransport({
 serviciu: 'gmail',
 sigur: Adevărat,
 auth: {
 utilizator: process.env. EMAIL-UL MEU,
 trece: proces.env. APP_PASSWORD,
 },
 });
const { recipient_email, OTP } = req.body;
const mailOptions = {
din: proces.env. EMAIL-UL MEU,
 către: destinatar_email,
 subiect: 'RESETARE PAROLA',
 html: `


Recuperarea parolei</h2>


Utilizare acest OTP pentru a vă reseta parola. OTP este valabil pentru1 minut</p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (eroare, informații) => {
dacă (eroare) {
consolă.log (eroare);
 starea res.(500).trimite({ mesaj: „A apărut o eroare la trimiterea e-mailului” });
 } altfel {
consolă.Buturuga('Email trimis: ' + info.răspuns);
 starea res.(200).trimite({ mesaj: "Email-ul a fost trimis cu succes" });
 }
 });
};

Acest cod definește o funcție care utilizează Nodemailer pentru a trimite un e-mail cu o resetare OTP către un destinatar specificat. Configurați un transportator folosind propriul cont și parolă Gmail.

Pentru a obține parola aplicației Gmail, trebuie generați o parolă pentru aplicație în setările contului dvs. Google. Veți folosi apoi această parolă în locul parolei obișnuite de Gmail pentru autentificarea Nodemailer.

Configurați punctul de intrare al serverului

Creați un fișier server.js în directorul rădăcină și adăugați acest cod:

const expres = cere('expres');
const cors = cere('cors');
const aplicație = expres();
const port = 5000;
cere('dotenv').config();
const nodemailer = cere(„nodemailer”);
const connectDB = cere(„./utils/dbconfig”);
connectDB();
app.use (express.json());
app.use (express.urlencoded({ extins: Adevărat }));
app.use (cors());
const userRoutes = cere(„./routes/userRoutes”);
app.use('/', userRoutes);
app.listen (port, () => {
consolă.Buturuga(`Serverul ascultă la http://localhost:${port}`);
});

Cu atât clientul cât și serverul configurat, puteți rula serverele de dezvoltare pentru a testa funcționalitatea parolei.

Crearea unui serviciu personalizat de resetare a parolei

Crearea unui sistem de resetare a parolei adaptându-l la aplicația dvs. și la utilizatorii săi este cea mai bună abordare, chiar dacă există soluții plătite, prefabricate. Atunci când proiectați această caracteristică, ar trebui să luați în considerare atât experiența utilizatorului, cât și securitatea, deoarece atacurile reprezintă o amenințare constantă.