Kuidas käsitleda unustatud parooli töövoogu Reacti ja Node.js-i abil

Autentimissüsteemid mängivad sujuva ja turvalise kasutuskogemuse pakkumisel üliolulist rolli. Autentimise töövoog hõlmab tavaliselt kahte protsessi: registreerumine ja sisselogimine.

Veebiteenuste arvu suurenedes loovad inimesed kontosid ja iga konto jaoks on vaja kordumatuid sisselogimismandaate. See muudab aga sisselogimismandaatide unustamise või segi ajamise lihtsaks. Selle probleemi lahendamiseks peaks teie rakendus rakendama parooli lähtestamise funktsiooni, mis võimaldab kasutajal mugavalt ja turvaliselt oma parooli lähtestada.

Seadistage reageerimisprojekt

Parooli lähtestamise töövoogu saate rakendada mitmel viisil – pole universaalset standardit, mida kõik rakendused peaksid järgima. Selle asemel peaksite kohandama valitud lähenemisviisi oma rakenduse konkreetsetele vajadustele.

Töövoog, mille kohta siit teavet saate, sisaldab järgmisi samme.

Alustamiseks Reacti projekti kiire alglaadimine. Järgmisena installige Axios, JavaScripti HTTP-päringu teek.

npm install axios

Siit leiate projekti koodi GitHubi hoidla.

Looge sisselogimiskomponent

Looge src kataloogis uus komponendid/Login.js faili ja lisage järgmine kood. Alustuseks määrake parooli lähtestamise protsess:

importida aksiosid alates"aksios";
importida Reageerige, { useState } alates"reageerida";
importida { useContext } alates"reageerida";
importida { RecoveryContext } alates"../Rakendus";
importida"./global.component.css";
eksportidavaikimisifunktsiooniLogi sisse() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 
funktsioonisendOtp() {
kui (kasutaja e-post) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).siis((vastuseks) => {
kui (response.status 200) {
konst OTP = matemaatika.floor(matemaatika.random() * 9000 + 1000);
konsool.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/saada_e-kiri", {
 OTP,
 recipient_email: userEmail,
 })
 .hen(() => setPage("otp"))
 .catch(konsool.log);
 } muidu {
 hoiatus ("Selle e-postiga kasutajat pole olemas!");
konsool.log (response.data.message);
 }}).catch(konsool.log);
 } muidu {
 hoiatus ("Palun sisestage oma email");
 }}

See kood loob funktsiooni, mis saadab kasutaja e-posti aadressile ühekordse parooli (OTP). Esmalt kontrollib see kasutajat, kontrollides enne OTP loomist ja saatmist tema meili andmebaasis. Lõpuks värskendab see kasutajaliidest OTP-lehega.

Täitke sisselogimiskomponent, lisades sisselogimise JSX vormielemendi renderdamiseks koodi:

tagasi (


Logi sisse</h2>




 E-post: 
"e-post" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Parool:
"parool" />
"Esita">logi sisse</button>
 </form>
"#" onClick={() => sendOtp()}>
 Unustasid parooli
 </a>
 </div>
 );
}

Looge OTP kinnituskomponent

Kasutaja sisestatud koodi kehtivuse tagamiseks peate seda võrdlema tema meilile saadetud koodiga.

Loo uus komponendid/OTPInput.js faili ja lisage see kood:

importida Reageerida, { useState, useContext, useEffect } alates"reageerida";
importida { RecoveryContext } alates"../Rakendus";
importida aksiosid alates"aksios";
importida"./global.component.css";
eksportidavaikimisifunktsiooniOTP-sisend() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funktsioonikinnita OTP() {
kui (parseInt(OTPinput) otp) {
 setPage("lähtestada");
 } muidu {
 hoiatus ("Sisestatud kood ei ole õige, proovige uuesti saata link uuesti");
 }
 }

Kood loob komponendi React, kus kasutajad kinnitavad oma OTP-koodi. See kontrollib, kas sisestatud kood ühtib kontekstiobjekti salvestatud koodiga. Kui see on kehtiv, kuvatakse parooli lähtestamise leht. Seevastu kuvatakse hoiatus, mis palub kasutajal uuesti proovida või OTP uuesti saata.

Selles saate koodi kontrollida hoidla mis rakendab funktsiooni OTP-de uuesti saatmiseks ja OTP-koodi aegumise taimerit.

Lõpuks renderdage sisend JSX elemendid.

tagasi (


E-posti kinnitus</h3>


Saatsime teie meilile kinnituskoodi.</p>



"tekst" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Kinnita konto</button> 
 resendOTP()} > Eiei saa koodi? 
 {keela? „Saada OTP uuesti sisse ${timerCount}s`: "Saada OTP uuesti"}
 </a> 
 </form>
 </div>
 );}

Looge parooli lähtestamise komponent

Loo uus komponendid/Reset.js faili ja lisage see kood:

importida Reageerida, {useState, useContext} alates"reageerida";
importida { RecoveryContext } alates"../Rakendus";
importida aksiosid alates"aksios";
importida"./global.component.css";
eksportidavaikimisifunktsiooniLähtesta() {
konst [parool, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);
funktsioonimuuda salasõna() {
kui (parool) {
proovi {
 axios.put(" http://localhost: 5000/värskenda parool", {
 email: email,
 uusParool: parool,
 }).siis(() => setPage("Logi sisse"));
tagasi hoiatus ("Parooli muutmine õnnestus, palun logige sisse!");
 } püüda (viga) {konsool.log (viga);}}
tagasi hoiatus ("Palun sisestage oma uus parool");
 }
tagasi (


 Muuda parooli </h2>




 Uus salasõna: 
 tüüp="parool"
 kohatäide="..."
 nõutav=""
 väärtus={parool}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Lähtesta parool </button>
 </form>
 </div>
 );
}

See kood renderdab vormi, mis võimaldab kasutajatel sisestada uue parooli. Kui kasutaja klõpsab nupul Esita, saadab see serverile palve uuendada oma parooli andmebaasis. Seejärel värskendab see kasutajaliidest, kui taotlus on edukas.

Värskendage oma App.js komponenti

Tehke oma src/App.js failis allolevad muudatused.

importida { useState, createContext } alates"reageerida";
importida Logi sisse alates"./components/Login";
importida OTP-sisend alates"./components/OTPInput";
importida Lähtesta alates"./components/Reset";
importida"./App.css";
eksportidakonst RecoveryContext = createContext();
eksportidavaikimisifunktsiooniRakendus() {
konst [page, setPage] = useState("Logi sisse");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");
funktsiooniNavigeeri komponentides() {
kui (lehekülg "Logi sisse") tagasi<Logi sisse />;
kui (lehekülg "otp") tagasi<OTP-sisend />;
kui (lehekülg "lähtestada") tagasi<Lähtesta />;
 }
tagasi (
"Rakenduse päis"> 
 value={{ leht, setPage, otp, setOTP, email, setEmail }}>



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

See kood määratleb kontekstiobjekti, mis haldab rakenduse olekut, mis hõlmab kasutaja meili, OTP-koodi ja rakenduse erinevaid lehti. Põhimõtteliselt võimaldab kontekstiobjekt vajalike olekute edastamist erinevate komponentide vahel – see on alternatiiv rekvisiitide kasutamisele.

See sisaldab ka funktsiooni, mis haldab hõlpsalt lehel navigeerimist, ilma et oleks vaja terveid komponente uuesti renderdada.

Express.js serveri seadistamine

Kliendi seadistuses konfigureerige parooli lähtestamise funktsiooni haldamiseks tausta autentimisteenus.

Alustamiseks luua Expressi veebiserverja installige need paketid:

npm install cors dotenv nodemailer mongoose

Järgmiseks looge MongoDB andmebaas või konfigureerige pilves MongoDB klaster. Seejärel kopeerige kaasas olev ühendusstring, looge juurkataloogis ENV-fail ja kleepige ühendusstring.

Lõpetamiseks peate konfigureerima andmebaasiühenduse ja määrama oma kasutajaandmete jaoks andmemudelid. Kasutage selles hoidlas olevat koodi selleks seadistada andmebaasiühendus ja määratleda andmemudelid.

Määrake API marsruudid

Taustateenusel on ideaaljuhul mitu marsruuti, mis käsitlevad klientide HTTP-päringuid. Sel juhul peate määratlema kolm marsruuti, mis haldavad Reacti kliendi meili saatmise, meili kinnitamise ja parooli värskendamise API taotlusi.

Looge juurkataloogis uus fail nimega userRoutes.js ja lisage järgmine kood:

konst väljendada = nõuda('väljendama');
konst ruuter = ekspress. Ruuter ();
konst userControllers = nõuda("../controllers/userControllers");
ruuter.get('/check_email', userControllers.checkEmail);
ruuter.put('/update-password', userControllers.updatePassword);
ruuter.post('/saada email', userControllers.sendEmail);
moodul.exports = ruuter;

API marsruutide kontrollerid

Kontrollerid vastutavad klientide HTTP-päringute töötlemise eest. Kui klient esitab päringu konkreetsele API marsruudile, käivitatakse ja käivitatakse kontrolleri funktsioon päringu töötlemiseks ja sobiva vastuse tagastamiseks.

Loo uus controllers/userControllers.js faili ja lisage allolev kood.

Kasutage selles hoidlas olevat koodi selleks määrake kontrollerid meili kinnitamiseks ja parooli värskendamiseks API marsruudid.

Alustuseks määrake meili saatmise kontroller:

exports.sendEmail = (req, res) => {
konst transporter = nodemailer.createTransport({
 teenus: 'gmail',
 turvaline: tõsi,
 auth: {
 kasutaja: process.env. MINU MEILIAADRESS,
 pass: protsess.env. APP_PASSWORD,
 },
 });
konst { adressaadi_e-post, OTP } = req.body;
konst mailOptions = {
alates: protsess.env. MINU MEILIAADRESS,
 aadressile: recipient_email,
 teema: 'PAROOLI LÄHTESTAMINE',
 html: `


Parooli taastamine</h2>


Kasuta see OTP parooli lähtestamiseks. OTP kehtib jaoks1 minut </p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (error, info) => {
kui (viga) {
konsool.log (viga);
 res.status(500).saada({ sõnum: "Meili saatmisel ilmnes viga" });
 } muidu {
konsool.log('E-mail saadetud: ' + info.response);
 res.status(200).saada({ sõnum: "E-kiri edukalt saadetud" });
 }
 });
};

See kood määratleb funktsiooni, mis kasutab Nodemailerit OTP lähtestusega meili saatmiseks määratud adressaadile. See seadistab transporteri, kasutades teie enda Gmaili kontot ja parooli.

Gmaili rakenduse parooli hankimiseks peate seda tegema looge oma Google'i konto seadetes rakenduse parool. Seejärel kasutate seda parooli oma tavalise Gmaili parooli asemel Nodemaileri autentimiseks.

Konfigureerige serveri sisenemispunkt

Looge juurkataloogis fail server.js ja lisage see kood:

konst väljendada = nõuda('väljendama');
konst cors = nõuda('kors');
konst rakendus = express();
konst port = 5000;
nõuda('dotenv').config();
konst nodemailer = nõuda('nodemailer');
konst connectDB = nõuda('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ pikendatud: tõsi }));
app.use (cors());
konst userRoutes = nõuda('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
konsool.log(`Server kuulab kell http://localhost:${port}`);
});

Kui klient ja server on seadistatud, saate paroolifunktsiooni testimiseks käivitada arendusservereid.

Kohandatud parooli lähtestamise teenuse loomine

Parooli lähtestamise süsteemi loomine, kohandades seda teie rakendusele ja selle kasutajatele, on parim viis, kuigi tasulised eelehitatud lahendused on olemas. Selle funktsiooni kavandamisel peaksite arvestama nii kasutajakogemuse kui ka turvalisusega, kuna rünnakud on pidev oht.