Kaip tvarkyti pamiršto slaptažodžio ir iš naujo nustatyti darbo eigą naudojant React ir Node.js

Autentifikavimo sistemos atlieka itin svarbų vaidmenį užtikrinant sklandžią ir saugią vartotojo patirtį. Autentifikavimo darbo eiga paprastai apima du procesus: registraciją ir prisijungimą.

Didėjant internetinių paslaugų skaičiui, žmonės kuria paskyras ir kiekvienai paskyrai reikalingi unikalūs prisijungimo duomenys. Tačiau tai leidžia lengvai pamiršti arba supainioti prisijungimo duomenis. Kad tai išspręstų, jūsų programoje turėtų būti įdiegta slaptažodžio nustatymo iš naujo funkcija, leidžianti naudotojui patogiai ir saugiai nustatyti slaptažodį iš naujo.

Sukurkite „React“ projektą

Slaptažodžio nustatymo iš naujo darbo eigą galite įgyvendinti įvairiais būdais – nėra universalaus standarto, kurio turėtų laikytis kiekviena programa. Vietoj to turėtumėte pritaikyti pasirinktą metodą, kad jis atitiktų konkrečius programos poreikius.

Darbo eiga, apie kurią sužinosite čia, apima šiuos veiksmus:

Pradėti, greitai paleiskite „React“ projektą. Toliau įdiekite „Axios“, „JavaScript“ HTTP užklausų biblioteka.

npm įdiegti axios

Čia galite rasti projekto kodą GitHub saugykla.

Sukurkite prisijungimo komponentą

Src kataloge sukurkite naują komponentai/Login.js failą ir pridėkite šį kodą. Pradėkite apibrėždami slaptažodžio nustatymo iš naujo procesą:

importuoti aksios iš"aksios";
importuoti Reaguoti, { useState } iš"reaguoti";
importuoti { useContext } iš"reaguoti";
importuoti { RecoveryContext } iš"../App";
importuoti"./global.component.css";
eksportuotinumatytasfunkcijaPrisijungti() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 
funkcijasendOtp() {
jeigu (naudotojo el. paštas) {
 axios.get(` http://localhost: 5000/check_email? paštas =${userEmail}`).tada ((atsakymą) => {
jeigu (atsakymas.būsena 200) {
konst OTP = Matematika.floor(Matematika.random() * 9000 + 1000);
konsolė.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/send_email", {
 OTP,
 recipient_email: userEmail,
 })
 .thena(() => setPage("otp"))
 .catch(konsolė.log);
 } Kitas {
 budrus("Vartotojas su šiuo el. pašto adresu neegzistuoja!");
konsolė.log (response.data.message);
 }}).catch(konsolė.log);
 } Kitas {
 budrus("Prašome įvesti savo el.);
 }}

Šis kodas sukuria funkciją, kuri siunčia vienkartinį slaptažodį (OTP) vartotojo el. pašto adresu. Pirmiausia ji patikrina vartotoją, patikrindama jo el. paštą duomenų bazėje, prieš generuodamas ir išsiųsdamas vienkartinį kodą. Galiausiai jis atnaujina vartotojo sąsają su OTP puslapiu.

Užbaikite prisijungimo komponentą pridėdami kodą, kad būtų pateiktas prisijungimo JSX formos elementas:

grąžinti (


Prisijungti</h2>




 El. paštas: 
"el. paštas" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Slaptažodis:
"Slaptažodis" />
"Pateikti">prisijungti</button>
 </form>
"#" onClick={() => sendOtp()}>
 Pamiršote slaptažodį
 </a>
 </div>
 );
}

Sukurkite OTP patvirtinimo komponentą

Norėdami užtikrinti vartotojo įvesto kodo galiojimą, turite jį palyginti su kodu, atsiųstu jo el.

Sukurti naują komponentai/OTPInput.js failą ir pridėkite šį kodą:

importuoti Reaguoti, { useState, useContext, useEffect } iš"reaguoti";
importuoti { RecoveryContext } iš"../App";
importuoti aksios iš"aksios";
importuoti"./global.component.css";
eksportuotinumatytasfunkcijaOTP įvestis() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkcijapatikrinkite OTP() {
jeigu (parseInt(OTPinput) otp) {
 setPage("nustatyti iš naujo");
 } Kitas {
 budrus(„Įvestas kodas neteisingas, bandykite dar kartą iš naujo išsiųsti nuorodą“);
 }
 }

Kodas sukuria „React“ komponentą, kuriame vartotojai patvirtina savo OTP kodą. Ji patikrina, ar įvestas kodas sutampa su saugomu kontekstiniame objekte. Jei jis galioja, rodomas slaptažodžio nustatymo iš naujo puslapis. Ir atvirkščiai, rodomas įspėjimas, raginantis vartotoją pabandyti dar kartą arba iš naujo išsiųsti vienkartinį kodą.

Čia galite patikrinti kodą saugykla kuri įgyvendina vienkartinių slaptažodžių pakartotinio siuntimo funkciją ir vienkartinio kodo galiojimo laikmatį.

Galiausiai atvaizduokite įvesties JSX elementus.

grąžinti (


El. pašto patvirtinimas</h3>


Išsiuntėme patvirtinimo kodą jūsų el. paštu.</p>



"tekstas" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Patvirtinti paskyrą</button> 
 resendOTP()} > Nepadarėnegaunate kodo? 
 {išjungti? „Iš naujo siųsti OTP ${timerCount}s': „Iš naujo siųsti vienkartinį pranešimą“}
 </a> 
 </form>
 </div>
 );}

Sukurkite slaptažodžio nustatymo iš naujo komponentą

Sukurti naują komponentai/Reset.js failą ir pridėkite šį kodą:

importuoti Reaguoti, {useState, useContext} iš"reaguoti";
importuoti { RecoveryContext } iš"../App";
importuoti aksios iš"aksios";
importuoti"./global.component.css";
eksportuotinumatytasfunkcijaNustatyti iš naujo() {
konst [password, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);
funkcijapakeisti slaptažodį() {
jeigu (Slaptažodis) {
bandyti {
 axios.put(" http://localhost: 5000 / atnaujinti slaptažodį", {
 paštas: el.
 naujas slaptažodis: slaptažodis,
 }).tada (() => setPage("Prisijungti"));
grąžinti budrus("Slaptažodis sėkmingai pakeistas, prisijunkite!");
 } sugauti (klaida) {konsolė.log (klaida);}}
grąžinti budrus("Įveskite naują slaptažodį");
 }
grąžinti (


 Keisti slaptažodį </h2>




 Naujas Slaptažodis: 
 tipas ="Slaptažodis"
 vietos rezervuaras="..."
 reikalingas =""
 value={password}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Iš naujo nustatyti slaptažodį </button>
 </form>
 </div>
 );
}

Šis kodas pateikia formą, kuri leidžia vartotojams įvesti naują slaptažodį. Kai vartotojas spustelėja pateikti, jis išsiųs serveriui prašymą atnaujinti slaptažodį duomenų bazėje. Tada jis atnaujins vartotojo sąsają, jei užklausa bus sėkminga.

Atnaujinkite savo App.js komponentą

Atlikite toliau nurodytus src/App.js failo pakeitimus:

importuoti { useState, createContext } iš"reaguoti";
importuoti Prisijungti iš"./components/Login";
importuoti OTP įvestis iš"./components/OTPIinput";
importuoti Nustatyti iš naujo iš"./components/Reset";
importuoti"./App.css";
eksportuotikonst RecoveryContext = createContext();
eksportuotinumatytasfunkcijaProgramėlė() {
konst [puslapis, setPage] = useState("Prisijungti");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");
funkcijaNavigateComponents() {
jeigu (puslapis "Prisijungti") grąžinti<Prisijungti />;
jeigu (puslapis "otp") grąžinti<OTP įvestis />;
jeigu (puslapis "nustatyti iš naujo") grąžinti<Nustatyti iš naujo />;
 }
grąžinti (
"Programos antraštė"> 
 value={{ puslapis, setPage, otp, setOTP, email, setEmail }}>



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

Šis kodas apibrėžia kontekstinį objektą, valdantį programos būseną, kurią sudaro naudotojo el. paštas, vienkartinio pašto kodas ir įvairūs programos puslapiai. Iš esmės konteksto objektas leidžia perduoti reikiamas būsenas tarp skirtingų komponentų – tai yra alternatyva rekvizitų naudojimui.

Jame taip pat yra funkcija, kuri lengvai valdo puslapio naršymą ir nereikia iš naujo pateikti visų komponentų.

Nustatykite Express.js serverį

Naudodami kliento sąranką, sukonfigūruokite užpakalinės sistemos autentifikavimo paslaugą, kad būtų galima atlikti slaptažodžio nustatymo iš naujo funkciją.

Pradėti, sukurti „Express“ žiniatinklio serverįir įdiekite šiuos paketus:

npm įdiegti cors dotenv nodemailer mongoose

Kitas, sukurti MongoDB duomenų bazę arba sukonfigūruokite MongoDB klasterį debesyje. Tada nukopijuokite pateiktą ryšio eilutę, šakniniame kataloge sukurkite ENV failą ir įklijuokite ryšio eilutę.

Norėdami baigti, turite sukonfigūruoti duomenų bazės ryšį ir apibrėžti savo vartotojo duomenų duomenų modelius. Naudokite kodą šioje saugykloje, kad nustatyti duomenų bazės ryšį ir apibrėžti duomenų modelius.

Apibrėžkite API maršrutus

Idealiu atveju užpakalinėje sistemoje yra keli maršrutai, kurie apdoroja klientų HTTP užklausas. Tokiu atveju turėsite apibrėžti tris maršrutus, kurie tvarkys el. pašto siuntimo, el. pašto patvirtinimo ir slaptažodžio atnaujinimo API užklausas iš „React“ kliento.

Sukurkite naują failą pavadinimu userRoutes.js šakniniame kataloge ir pridėkite šį kodą:

konst išreikšti = reikalauti("išreikšti");
konst maršrutizatorius = greitasis. Maršrutizatorius ();
konst userControllers = reikalauti(„../controllers/userControllers“);
router.get('/Patikrink elektroninį paštą', userControllers.checkEmail);
router.put('/atnaujinti-slaptažodį', userControllers.updatePassword);
router.post('/Siųsti laišką', userControllers.sendEmail);
modulis.exports = maršrutizatorius;

API maršrutų valdikliai

Valdytojai yra atsakingi už klientų HTTP užklausų apdorojimą. Kai klientas pateikia užklausą tam tikram API maršrutui, valdiklio funkcija iškviečiama ir vykdoma, kad apdorotų užklausą ir grąžintų atitinkamą atsakymą.

Sukurti naują controllers/userControllers.js failą ir pridėkite žemiau esantį kodą.

Naudokite kodą šioje saugykloje, kad apibrėžkite el. pašto patvirtinimo ir atnaujinimo slaptažodžio valdiklius API maršrutai.

Pradėkite apibrėždami el. pašto siuntimo valdiklį:

exports.sendEmail = (req, res) => {
konst transporter = nodemailer.createTransport({
 paslauga: 'gmail',
 saugus: tiesa,
 auth: {
 vartotojas: process.env. MANO ELEKTRONINIS PAŠTAS,
 praeiti: procesas.env. APP_PASSWORD,
 },
 });
konst { recipient_email, OTP } = req.body;
konst mailOptions = {
iš: procesas.aplink. MANO ELEKTRONINIS PAŠTAS,
 į: recipient_email,
 tema: 'SLAPTAŽODŽIO NUSTATYMAS',
 html: `


Slaptažodžio atkūrimas</h2>


Naudokite tai OTP, kad iš naujo nustatytumėte slaptažodį. OTP galioja dėl1 minutė </p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (klaida, informacija) => {
jeigu (klaida) {
konsolė.log (klaida);
 res.status(500).send({ žinutę: „Siunčiant el. laišką įvyko klaida“ });
 } Kitas {
konsolė.log('Laiškas išsiųstas: ' + info.atsakymas);
 res.status(200).send({ žinutę: "El. laiškas sėkmingai išsiųstas" });
 }
 });
};

Šis kodas apibrėžia funkciją, kuri naudoja „Nodemailer“, kad išsiųstų el. laišką su OTP atstatymu nurodytam gavėjui. Jis nustato transporterį naudodamas jūsų „Gmail“ paskyrą ir slaptažodį.

Norėdami gauti „Gmail“ programos slaptažodį, turite „Google“ paskyros nustatymuose sukurkite programos slaptažodį. Tada naudosite šį slaptažodį vietoje įprasto „Gmail“ slaptažodžio, kad patvirtintumėte „Nodemailer“.

Konfigūruokite serverio įėjimo tašką

Sukurkite server.js failą šakniniame kataloge ir pridėkite šį kodą:

konst išreikšti = reikalauti("išreikšti");
konst cors = reikalauti("cors");
konst programa = express ();
konst prievadas = 5000;
reikalauti('dotenv'.config();
konst nodemailer = reikalauti('nodemailer');
konst connectDB = reikalauti('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ pratęstas: tiesa }));
app.use (cors());
konst userRoutes = reikalauti('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
konsolė.log(`Serveris klausosi http://localhost:${port}`);
});

Nustatę klientą ir serverį, galite paleisti kūrimo serverius ir išbandyti slaptažodžio funkcionalumą.

Sukurkite tinkintą slaptažodžio nustatymo iš naujo paslaugą

Slaptažodžio nustatymo iš naujo sistemos sukūrimas, pritaikant ją prie programos ir jos naudotojų, yra geriausias būdas, net jei yra mokamų, iš anksto sukurtų sprendimų. Kurdami šią funkciją turėtumėte atsižvelgti ir į vartotojo patirtį, ir į saugumą, nes atakos yra nuolatinė grėsmė.