Ne pustite obiskovalcev vašega spletnega mesta na cedilu – dovolite jim, da ponastavijo geslo, če so ga pozabili.

Sistemi za preverjanje pristnosti igrajo ključno vlogo pri zagotavljanju brezhibne in varne uporabniške izkušnje. Delovni tok preverjanja pristnosti običajno vključuje dva postopka: prijavo in prijavo.

Ker se število spletnih storitev povečuje, ljudje ustvarjajo račune in vsak račun zahteva edinstvene poverilnice za prijavo. Vendar to olajša pozabo ali zamenjavo poverilnic za prijavo. Da bi odpravili to težavo, mora vaša aplikacija izvajati funkcijo ponastavitve gesla, ki uporabniku omogoča priročno in varno ponastavitev gesla.

Nastavite projekt React

Potek dela za ponastavitev gesla lahko implementirate na različne načine – ni univerzalnega standarda, ki bi mu morala slediti vsaka aplikacija. Namesto tega bi morali pristop, ki ga izberete, prilagoditi posebnim potrebam vaše aplikacije.

Potek dela, o katerem boste izvedeli tukaj, vključuje naslednje korake:

Za začetek, hitro zaženite projekt React. Nato namestite Axios, knjižnica zahtev JavaScript HTTP.

instagram viewer 
npm namestite axios

Tukaj lahko najdete kodo projekta Repozitorij GitHub.

Ustvari komponento za prijavo

V imeniku src ustvarite nov komponente/Login.js datoteko in dodajte naslednjo kodo. Začnite z definiranjem postopka ponastavitve gesla:

uvoz axios od"aksios";
uvoz Odziv, {useState} od"reagirati";
uvoz {useContext} od"reagirati";
uvoz {RecoveryContext} od"../Aplikacija";
uvoz"./global.component.css";
izvozprivzetofunkcijoVpiši se() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 


funkcijosendOtp() {
če (e-pošta uporabnika) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).potem((odgovor) => {
če (odziv.stanje 200) {
konst OTP = matematika.nadstropje(matematika.naključen() * 9000 + 1000);
konzola.log (OTP);
 setOTP(OTP);
 setEmail (e-pošta uporabnika);
 axios.post(" http://localhost: 5000/pošlji e-pošto", {
 OTP,
 e-pošta_prejemnika: e-pošta uporabnika,
 })
 .potem(() => setPage("otp"))
 .catch(konzola.log);
 } drugače {
 opozorilo("Uporabnik s tem e-poštnim naslovom ne obstaja!");
konzola.log (response.data.message);
 }}).catch(konzola.log);
 } drugače {
 opozorilo("Prosimo, vnesite svoj e-poštni naslov");
 }}

Ta koda ustvari funkcijo, ki pošlje enkratno geslo (OTP) na uporabnikov e-poštni naslov. Najprej preveri uporabnika tako, da preveri njegovo e-pošto v bazi podatkov, preden ustvari in pošlje OTP. Na koncu posodobi uporabniški vmesnik s stranjo OTP.

Dokončajte prijavno komponento z dodajanjem kode za upodobitev prijavnega elementa obrazca JSX:

vrnitev (


Prijava</h2>







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


 geslo:
"geslo" />

Ustvarite komponento preverjanja OTP

Da zagotovite veljavnost kode, ki jo vnese uporabnik, jo morate primerjati s kodo, poslano na njegov e-poštni naslov.

Ustvari novo komponente/OTPInput.js datoteko in dodajte to kodo:

uvoz React, {useState, useContext, useEffect} od"reagirati";
uvoz {RecoveryContext} od"../Aplikacija";
uvoz axios od"aksios";
uvoz"./global.component.css";
izvozprivzetofunkcijoOTPInput() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkcijopotrdi OTP() {
če (parseInt(OTPinput) otp) {
 setPage("ponastaviti");
 } drugače {
 opozorilo("Koda, ki ste jo vnesli, ni pravilna, poskusite znova in znova pošljite povezavo");
 }
 }

Koda ustvari komponento React, kjer uporabniki preverijo svojo kodo OTP. Preveri, ali se vnesena koda ujema s tisto, ki je shranjena v objektu konteksta. Če je veljavno, prikaže stran za ponastavitev gesla. Nasprotno pa prikaže opozorilo, ki uporabnika poziva, naj poskusi znova ali znova pošlje OTP.

Tukaj lahko preverite kodo repozitorij ki implementira funkcijo za ponovno pošiljanje OTP in časovnik poteka za kodo OTP.

Na koncu upodobite vhodne elemente JSX.

vrnitev (


Preverjanje e-pošte</h3>




Na vaš e-poštni naslov smo poslali potrditveno kodo.</p>




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

Ustvarite komponento za ponastavitev gesla

Ustvari novo komponente/Reset.js datoteko in dodajte to kodo:

uvoz Odziv, {useState, useContext} od"reagirati";
uvoz {RecoveryContext} od"../Aplikacija";
uvoz axios od"aksios";
uvoz"./global.component.css";
izvozprivzetofunkcijoPonastaviti() {
konst [geslo, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);


funkcijospremeni geslo() {
če (geslo) {
poskusi {
 axios.put(" http://localhost: 5000/geslo za posodobitev", {
 e-pošta: e-pošta,
 newPassword: geslo,
 }).potem(() => setPage("Vpiši se"));


vrnitev opozorilo("Geslo je bilo uspešno spremenjeno, prijavite se!");
 } ulov (napaka) {konzola.log (napaka);}}
vrnitev opozorilo("Prosimo, vnesite svoje novo geslo");
 }
vrnitev (


 Spremeni geslo </h2>






 Novo geslo: 
 vrsta="geslo"
 placeholder="..."
 zahtevano=""
 vrednost={geslo}
 onChange={(e) => setPassword (e.target.value)} />

Ta koda upodobi obrazec, ki uporabnikom omogoča vnos novega gesla. Ko uporabnik klikne Pošlji, bo strežniku poslal zahtevo za posodobitev gesla v bazi podatkov. Nato bo posodobil uporabniški vmesnik, če bo zahteva uspešna.

Posodobite svojo komponento App.js

Naredite spodnje spremembe v datoteki src/App.js:

uvoz {useState, createContext} od"reagirati";
uvoz Vpiši se od"./components/Login";
uvoz OTPInput od"./components/OTPInput";
uvoz Ponastaviti od"./components/Reset";
uvoz"./App.css";
izvozkonst RecoveryContext = createContext();
izvozprivzetofunkcijoaplikacija() {
konst [stran, setPage] = useState("Vpiši se");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");


funkcijoNavigateComponents() {
če (stran "Vpiši se") vrnitev<Vpiši se />;
če (stran "otp") vrnitev<OTPInput />;
če (stran "ponastaviti") vrnitev<Ponastaviti />;
 }
vrnitev (
"Glava aplikacije"> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



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

Ta koda definira kontekstni objekt, ki upravlja stanje aplikacije, ki vključuje uporabnikovo e-pošto, kodo OTP in različne strani v aplikaciji. V bistvu objekt konteksta omogoča posredovanje zahtevanih stanj med različnimi komponentami – alternativa uporabi rekvizitov.

Vključuje tudi funkcijo, ki z lahkoto upravlja navigacijo po straneh, ne da bi bilo treba znova upodabljati celotne komponente.

Nastavite strežnik Express.js

Z nastavitvijo odjemalca konfigurirajte zaledno storitev preverjanja pristnosti za upravljanje funkcije ponastavitve gesla.

Za začetek, ustvarite spletni strežnik Expressin namestite te pakete:

npm namestite cors dotenv nodemailer mongoose

Naslednji, ustvarite bazo podatkov MongoDB oz konfigurirajte gručo MongoDB v oblaku. Nato kopirajte navedeni povezovalni niz, ustvarite datoteko ENV v korenskem imeniku in prilepite povezovalni niz.

Za konec morate konfigurirati povezavo z bazo podatkov in definirati podatkovne modele za svoje uporabniške podatke. Uporabite kodo v tem skladišču za nastavite povezavo z bazo podatkov in definirati podatkovne modele.

Določite poti API-ja

Zaledna storitev ima idealno več poti, ki obravnavajo zahteve HTTP strank. V tem primeru boste morali definirati tri poti, ki bodo upravljale zahteve API-ja za pošiljanje e-pošte, preverjanje e-pošte in zahteve API-ja za posodobitev gesla iz odjemalca React.

Ustvarite novo datoteko z imenom userRoutes.js v korenskem imeniku in dodajte to kodo:

konst izraziti = zahtevati('express');
konst usmerjevalnik = express. Usmerjevalnik();
konst uporabniški krmilniki = zahtevati('../controllers/userControllers');
router.get('/check_email', userControllers.checkEmail);
router.put('/posodobitev-gesla', userControllers.updatePassword);
router.post('/Pošlji sporočilo', userControllers.sendEmail);
modul.exports = usmerjevalnik;

Krmilniki za poti API

Krmilniki so odgovorni za obdelavo zahtev HTTP strank. Ko odjemalec pošlje zahtevo določeni poti API-ja, se prikliče in izvede funkcija krmilnika, da obdela zahtevo in vrne ustrezen odgovor.

Ustvari novo krmilniki/userControllers.js datoteko in dodajte spodnjo kodo.

Uporabite kodo v tem skladišču za določite krmilnike za preverjanje e-pošte in geslo za posodobitev API poti.

Začnite z definiranjem krmilnika za pošiljanje e-pošte:

exports.sendEmail = (zahteva, res) => {
konst transporter = nodemailer.createTransport({
 storitev: 'gmail',
 varno: prav,
 avtorizacija: {
 uporabnik: process.env. MOJ E-POŠTNI NASLOV,
 prehod: proces.env. APP_PASSWORD,
 },
 });
konst { e-pošta prejemnika, OTP } = req.body;


konst mailOptions = {
od: proces.env. MOJ E-POŠTNI NASLOV,
 za: e-pošta_prejemnika,
 predmet: 'RESETIRANJE GESLA',
 html: `


Obnovitev gesla</h2>




Uporaba to OTP za ponastavitev gesla. OTP je veljaven za1 minuta</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (napaka, info) => {
če (napaka) {
konzola.log (napaka);
 res.status(500).pošlji({ sporočilo: "Med pošiljanjem e-pošte je prišlo do napake" });
 } drugače {
konzola.log('Email poslan: ' + info.odgovor);
 res.status(200).pošlji({ sporočilo: "E-pošta je bila uspešno poslana" });
 }
 });
};

Ta koda definira funkcijo, ki uporablja Nodemailer za pošiljanje e-pošte s ponastavitvijo OTP določenemu prejemniku. Nastavi prenosnik z uporabo vašega lastnega Gmail računa in gesla.

Če želite pridobiti geslo za aplikacijo Gmail, morate ustvarite geslo za aplikacijo v nastavitvah Google Računa. To geslo boste nato uporabili namesto običajnega gesla za Gmail za preverjanje pristnosti Nodemailerja.

Konfigurirajte vstopno točko strežnika

Ustvarite datoteko server.js v korenskem imeniku in dodajte to kodo:

konst izraziti = zahtevati('express');
konst cors = zahtevati('cors');
konst app = express();
konst pristanišče = 5000;
zahtevati('dotenv').config();
konst nodemailer = zahtevati('nodemailer');
konst povežiDB = zahtevati('./utils/dbconfig');
povežiDB();
app.use (express.json());
app.use (express.urlencoded({ podaljšan: prav }));
app.use (cors());
konst userRoutes = zahtevati('./routes/userRoutes');
app.use('/', uporabniške poti);
app.listen (vrata, () => {
konzola.log(`Strežnik posluša http://localhost:${port}`);
});

Ko sta nastavljena odjemalec in strežnik, lahko zaženete razvojne strežnike, da preizkusite delovanje gesla.

Izdelava storitve ponastavitve gesla po meri

Ustvarjanje sistema za ponastavitev gesla tako, da ga prilagodite svoji aplikaciji in njenim uporabnikom, je najboljši pristop, čeprav obstajajo plačane, vnaprej pripravljene rešitve. Pri načrtovanju te funkcije morate upoštevati uporabniško izkušnjo in varnost, saj so napadi stalna grožnja.