Neatstājiet savas vietnes apmeklētājus nomāktus — ļaujiet viņiem atiestatīt savu paroli, ja viņi to ir aizmirsuši.

Autentifikācijas sistēmām ir izšķiroša nozīme netraucētas un drošas lietošanas pieredzes nodrošināšanā. Autentifikācijas darbplūsma parasti ietver divus procesus: reģistrēšanos un pieteikšanos.

Palielinoties tiešsaistes pakalpojumu skaitam, cilvēki izveido kontus, un katram kontam ir nepieciešami unikāli pieteikšanās akreditācijas dati. Tomēr tas ļauj viegli aizmirst vai sajaukt pieteikšanās akreditācijas datus. Lai to novērstu, jūsu lietotnē ir jāievieš paroles atiestatīšanas funkcija, kas ļauj lietotājam ērti un droši atiestatīt paroli.

Iestatiet React projektu

Paroles atiestatīšanas darbplūsmu var ieviest dažādos veidos — nav universāla standarta, kas būtu jāievēro katrai lietojumprogrammai. Tā vietā jums ir jāpielāgo izvēlētā pieeja, lai tā atbilstu jūsu lietojumprogrammas īpašajām vajadzībām.

Darbplūsma, par kuru jūs uzzināsit šeit, ietver šādas darbības:

Lai sāktu, ātri sāknēt React projektu. Tālāk instalējiet Axios, JavaScript HTTP pieprasījumu bibliotēka.

instagram viewer 
npm instalēt axios

Šeit varat atrast projekta kodu GitHub repozitorijs.

Izveidojiet pieteikšanās komponentu

Src direktorijā izveidojiet jaunu komponenti/Login.js failu un pievienojiet šādu kodu. Sāciet, definējot paroles atiestatīšanas procesu:

imports axios no"aksios";
imports Reaģēt, { useState } no"reaģēt";
imports { useContext } no"reaģēt";
imports { RecoveryContext } no"../Lietotne";
imports"./global.component.css";
eksportētnoklusējumafunkcijuPieslēgties() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 


funkcijusendOtp() {
ja (lietotāja e-pasts) {
 axios.get(` http://localhost: 5000/check_email? e-pasts=${userEmail}`).tad((atbildi) => {
ja (atbilde.statuss 200) {
konst OTP = Matemātika.floor(Matemātika.random() * 9000 + 1000);
konsole.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/nosūtīt_e-pastu", {
 OTP,
 recipient_email: userEmail,
 })
 .hen(() => setPage("otp"))
 .catch(konsole.log);
 } cits {
 brīdināt ("Lietotājs ar šo e-pastu neeksistē!");
konsole.log (response.data.message);
 }}).catch(konsole.log);
 } cits {
 brīdināt ("Lūdzu, ievadiet savu e-pastu");
 }}

Šis kods izveido funkciju, kas nosūta vienreizējo paroli (OTP) uz lietotāja e-pasta adresi. Pirms OTP ģenerēšanas un nosūtīšanas tas vispirms pārbauda lietotāju, pārbaudot viņa e-pastu datu bāzē. Visbeidzot, tas atjaunina lietotāja saskarni ar OTP lapu.

Pabeidziet pieteikšanās komponentu, pievienojot kodu, lai renderētu pieteikšanās JSX veidlapas elementu:

atgriezties (


Pieteikties</h2>







 E-pasts: 
"e-pasts" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />


 Parole:
"parole" />

Izveidojiet OTP verifikācijas komponentu

Lai nodrošinātu lietotāja ievadītā koda derīgumu, tas ir jāsalīdzina ar kodu, kas nosūtīts uz lietotāja e-pastu.

Izveidojiet jaunu komponenti/OTPInput.js failu un pievienojiet šo kodu:

imports Reaģēt, { useState, useContext, useEffect } no"reaģēt";
imports { RecoveryContext } no"../Lietotne";
imports axios no"aksios";
imports"./global.component.css";
eksportētnoklusējumafunkcijuOTP ievade() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkcijupārbaudīt OTP() {
ja (parseInt(OTPinput) otp) {
 setPage("atiestatīt");
 } cits {
 brīdināt ("Ievadītais kods nav pareizs, mēģiniet vēlreiz nosūtīt saiti");
 }
 }

Kods izveido React komponentu, kurā lietotāji pārbauda savu OTP kodu. Tas pārbauda, ​​vai ievadītais kods atbilst konteksta objektā saglabātajam. Ja tā ir derīga, tiek parādīta paroles atiestatīšanas lapa. Un otrādi, tas parāda brīdinājumu, liekot lietotājam mēģināt vēlreiz vai atkārtoti nosūtīt OTP.

Šajā sadaļā varat pārbaudīt kodu krātuve kas ievieš funkciju OTP atkārtotai nosūtīšanai un OTP koda derīguma termiņa taimeri.

Visbeidzot, renderējiet ievades JSX elementus.

atgriezties (


E-pasta verifikācija</h3>




Mēs esam nosūtījuši verifikācijas kodu uz jūsu e-pastu.</p>




"teksts" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} />

Izveidojiet paroles atiestatīšanas komponentu

Izveidojiet jaunu komponenti/Reset.js failu un pievienojiet šo kodu:

imports Reaģēt, {useState, useContext} no"reaģēt";
imports { RecoveryContext } no"../Lietotne";
imports axios no"aksios";
imports"./global.component.css";
eksportētnoklusējumafunkcijuAtiestatīt() {
konst [parole, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);


funkcijumainīt paroli() {
ja (parole) {
mēģināt {
 axios.put(" http://localhost: 5000/atjaunināšanas parole", {
 e-pasts: e-pasts,
 newPassword: parole,
 }).tad(() => setPage("Pieslēgties"));


atgriezties brīdināt ("Parole veiksmīgi nomainīta, lūdzu, piesakieties!");
 } noķert (kļūda) {konsole.log (kļūda);}}
atgriezties brīdināt ("Lūdzu, ievadiet savu jauno paroli");
 }
atgriezties (


 Mainīt paroli </h2>






 Jauna parole: 
 tips="parole"
 vietturis="..."
 nepieciešams =""
 vērtība={parole}
 onChange={(e) => setPassword (e.target.value)} />

Šis kods atveido veidlapu, kas ļauj lietotājiem ievadīt jaunu paroli. Kad lietotājs noklikšķina uz Iesniegt, tas nosūtīs serverim pieprasījumu atjaunināt savu paroli datu bāzē. Pēc tam tas atjauninās lietotāja saskarni, ja pieprasījums būs veiksmīgs.

Atjauniniet savu App.js komponentu

Veiciet tālāk norādītās izmaiņas failā src/App.js:

imports { useState, createContext } no"reaģēt";
imports Pieslēgties no"./components/Pieteikšanās";
imports OTP ievade no"./components/OTPIinput";
imports Atiestatīt no"./components/Reset";
imports"./App.css";
eksportētkonst RecoveryContext = createContext();
eksportētnoklusējumafunkcijuApp() {
konst [lapa, setPage] = useState("Pieslēgties");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");


funkcijuNavigateComponents() {
ja (lappuse "Pieslēgties") atgriezties<Pieslēgties />;
ja (lappuse "otp") atgriezties<OTP ievade />;
ja (lappuse "atiestatīt") atgriezties<Atiestatīt />;
 }
atgriezties (
"Lietotnes galvene"> 
 value={{ lapa, setPage, otp, setOTP, email, setEmail }}>



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

Šis kods definē konteksta objektu, kas pārvalda lietotnes stāvokli, kas ietver lietotāja e-pastu, OTP kodu un dažādas lietotnes lapas. Būtībā konteksta objekts ļauj nodot nepieciešamos stāvokļus starp dažādiem komponentiem, kas ir alternatīva rekvizītu izmantošanai.

Tas ietver arī funkciju, kas viegli apstrādā lapas navigāciju, bez nepieciešamības atkārtoti renderēt veselus komponentus.

Iestatiet Express.js serveri

Izmantojot klienta iestatīšanu, konfigurējiet aizmugursistēmas autentifikācijas pakalpojumu, lai apstrādātu paroles atiestatīšanas funkcionalitāti.

Lai sāktu, izveidot Express tīmekļa serveriun instalējiet šīs pakotnes:

npm instalēt cors dotenv nodemailer mongoose

Nākamais, izveidot MongoDB datu bāzi vai konfigurējiet MongoDB klasteru mākonī. Pēc tam kopējiet pievienoto savienojuma virkni, saknes direktorijā izveidojiet ENV failu un ielīmējiet savienojuma virkni.

Lai pabeigtu, jums ir jākonfigurē datu bāzes savienojums un jādefinē datu modeļi jūsu lietotāja datiem. Izmantojiet šajā repozitorijā esošo kodu, lai iestatiet datu bāzes savienojumu un definēt datu modeļus.

Definējiet API maršrutus

Aizmugursistēmas pakalpojumam ideālā gadījumā ir vairāki maršruti, kas apstrādā klientu HTTP pieprasījumus. Šajā gadījumā jums būs jādefinē trīs maršruti, kas pārvaldīs React klienta sūtīšanas e-pasta, e-pasta verifikācijas un atjaunināšanas paroles API pieprasījumus.

Saknes direktorijā izveidojiet jaunu failu ar nosaukumu userRoutes.js un pievienojiet šādu kodu:

konst izteikt = pieprasīt('izteikt');
konst maršrutētājs = ekspress. Maršrutētājs ();
konst userControllers = pieprasīt("../controllers/userControllers");
router.get('/pārbaudi epastu', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/sūtīt e-pastu', userControllers.sendEmail);
modulis.exports = maršrutētājs;

API maršrutu kontrolieri

Kontrolieri ir atbildīgi par klientu HTTP pieprasījumu apstrādi. Kad klients iesniedz pieprasījumu konkrētam API maršrutam, tiek izsaukta un izpildīta kontroliera funkcija, lai apstrādātu pieprasījumu un atgrieztu atbilstošu atbildi.

Izveidojiet jaunu controllers/userControllers.js failu un pievienojiet tālāk norādīto kodu.

Izmantojiet šajā repozitorijā esošo kodu, lai definējiet kontrolierus e-pasta verifikācijai un atjaunināšanas parolei API maršruti.

Sāciet, definējot e-pasta sūtīšanas kontrolieri:

exports.sendEmail = (req, res) => {
konst transporter = nodemailer.createTransport({
 apkalpošana: 'gmail',
 drošs: taisnība,
 autentifikācija: {
 lietotājs: process.env. MANS E-PASTS,
 caurlaide: process.env. APP_PASSWORD,
 },
 });
konst { recipient_email, OTP } = req.body;


konst mailOptions = {
no: process.env. MANS E-PASTS,
 uz: recipient_email,
 tēma: "PAROLES ATIESTATĪŠANA",
 html: `


Paroles atkopšana</h2>




Izmantot šis OTP, lai atiestatītu savu paroli. OTP ir derīga priekš1 minūte</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (kļūda, informācija) => {
ja (kļūda) {
konsole.log (kļūda);
 res.status(500).send({ ziņa: "Sūtot e-pasta ziņojumu, radās kļūda" });
 } cits {
konsole.log('Epasts nosūtīts: ' + info.atbilde);
 res.status(200).send({ ziņa: "E-pasts veiksmīgi nosūtīts" });
 }
 });
};

Šis kods definē funkciju, kas izmanto Nodemailer, lai nosūtītu e-pasta ziņojumu ar OTP atiestatīšanu noteiktam adresātam. Tas iestata transportētāju, izmantojot jūsu Gmail kontu un paroli.

Lai iegūtu Gmail lietotnes paroli, jums ir nepieciešams ģenerējiet lietotnes paroli sava Google konta iestatījumos. Pēc tam jūs izmantosit šo paroli savas parastās Gmail paroles vietā, lai autentificētu Nodemailer.

Konfigurējiet servera ieejas punktu

Saknes direktorijā izveidojiet failu server.js un pievienojiet šo kodu:

konst izteikt = pieprasīt('izteikt');
konst cors = pieprasīt('kors');
konst lietotne = express();
konst ports = 5000;
pieprasīt('dotenv').config();
konst nodemailer = pieprasīt('nodemailer');
konst connectDB = pieprasīt('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ pagarināts: taisnība }));
app.use (cors());
konst userRoutes = pieprasīt('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
konsole.log(`Serveris klausās plkst http://localhost:${port}`);
});

Ja ir iestatīts gan klients, gan serveris, varat palaist izstrādes serverus, lai pārbaudītu paroles funkcionalitāti.

Pielāgota paroles atiestatīšanas pakalpojuma izveide

Paroles atiestatīšanas sistēmas izveide, pielāgojot to savai lietojumprogrammai un tās lietotājiem, ir labākā pieeja, lai gan pastāv maksas, iepriekš izveidoti risinājumi. Izstrādājot šo funkciju, jāņem vērā gan lietotāja pieredze, gan drošība, jo uzbrukumi ir pastāvīgs drauds.