Ne ostavljajte posjetitelje svoje web-lokacije na cedilu—dopustite im da ponište lozinku ako su je zaboravili.
Autentifikacijski sustavi igraju ključnu ulogu u pružanju besprijekornog i sigurnog korisničkog iskustva. Tijek rada provjere autentičnosti obično uključuje dva procesa: prijavu i prijavu.
Kako se broj online usluga povećava, ljudi stvaraju račune, a svaki račun zahtijeva jedinstvene vjerodajnice za prijavu. Međutim, to olakšava zaboravljanje ili brkanje vjerodajnica za prijavu. Da biste to riješili, vaša bi aplikacija trebala implementirati značajku poništavanja zaporke koja korisniku omogućuje jednostavno i sigurno poništavanje zaporke.
Postavite projekt React
Tijek rada za poništavanje lozinke možete implementirati na različite načine—ne postoji univerzalni standard koji bi svaka aplikacija trebala slijediti. Umjesto toga, pristup koji odaberete trebali biste prilagoditi specifičnim potrebama svoje aplikacije.
Tijek rada o kojem ćete ovdje naučiti uključuje sljedeće korake:
Započeti, brzo pokrenuti React projekt. Zatim instalirajte Axios, biblioteka JavaScript HTTP zahtjeva.
npm instalirati axiosKôd projekta možete pronaći ovdje GitHub spremište.
Stvorite komponentu za prijavu
U direktoriju src stvorite novi komponente/Login.js datoteku i dodajte sljedeći kod. Započnite definiranjem postupka poništavanja lozinke:
uvoz axios iz"aksios";
uvoz Reagiraj, {useState} iz"reagirati";
uvoz {useContext} iz"reagirati";
uvoz {RecoveryContext} iz"../Aplikacija";
uvoz"./global.component.css";izvozzadanofunkcijaPrijaviti se() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState("");funkcijasendOtp() {
ako (e-pošta korisnika) {
axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).zatim((odgovor) => {
ako (odgovor.status 200) {
konst OTP = matematika.kat(matematika.random() * 9000 + 1000);
konzola.log (OTP);
postaviOTP(OTP);
setE-mail (e-pošta korisnika);
axios.post(" http://localhost: 5000/pošalji_e-mail", {
OTP,
e-pošta_primatelja: e-pošta korisnika,
})
.zatim(() => setPage("otp"))
.ulov(konzola.log);
} drugo {
upozorenje("Korisnik s ovim emailom ne postoji!");
konzola.log (odgovor.podaci.poruka);
}}).ulov(konzola.log);
} drugo {
upozorenje("Molimo unesite svoju e-poštu");
}}
Ovaj kôd stvara funkciju koja šalje jednokratnu lozinku (OTP) na adresu e-pošte korisnika. Prvo provjerava korisnika provjerom njegove e-pošte u bazi podataka prije generiranja i slanja OTP-a. Konačno, ažurira korisničko sučelje s OTP stranicom.
Dovršite komponentu prijave dodavanjem koda za prikaz elementa obrasca JSX za prijavu:
povratak (Prijava</h2>
Lozinka:
"lozinka" />
Napravite OTP verifikacijsku komponentu
Kako biste osigurali valjanost koda koji je korisnik unio, morate ga usporediti s kodom poslan na njegovu e-poštu.
Stvorite novi komponente/OTPInput.js datoteku i dodajte ovaj kod:
uvoz Reagiraj, {useState, useContext, useEffect} iz"reagirati";
uvoz {RecoveryContext} iz"../Aplikacija";
uvoz axios iz"aksios";
uvoz"./global.component.css";izvozzadanofunkcijaOTPInput() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkcijapotvrdi OTP() {
ako (parseInt(OTPinput) otp) {
setPage("resetirati");
} drugo {
upozorenje("Kôd koji ste unijeli nije ispravan, pokušajte ponovo i pošaljite link");
}
}
Kod stvara React komponentu u kojoj korisnici provjeravaju svoj OTP kod. Provjerava podudara li se uneseni kod s onim pohranjenim u objektu konteksta. Ako je važeća, prikazuje stranicu za ponovno postavljanje lozinke. Nasuprot tome, prikazuje upozorenje koje poziva korisnika da pokuša ponovno ili ponovno pošalje OTP.
Ovdje možete provjeriti kod spremište koji implementira funkciju za ponovno slanje OTP-ova i mjerač vremena isteka za OTP kod.
Na kraju, generirajte ulazne JSX elemente.
povratak (
Potvrda e-pošte</h3>
Poslali smo kod za provjeru na vašu e-poštu.</p>
Napravite komponentu Reset Password
Stvorite novi komponente/Reset.js datoteku i dodajte ovaj kod:
uvoz Reagiraj, {useState, useContext} iz"reagirati";
uvoz {RecoveryContext} iz"../Aplikacija";
uvoz axios iz"aksios";
uvoz"./global.component.css";izvozzadanofunkcijaResetiraj() {
konst [lozinka, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);funkcijapromijeniti lozinku() {
ako (lozinka) {
probati {
axios.put(" http://localhost: 5000/zaporka za ažuriranje", {
email: email,
nova lozinka: lozinka,
}).zatim(() => setPage("prijaviti se"));povratak upozorenje("Lozinka je uspješno promijenjena, prijavite se!");
} ulov (pogreška) {konzola.log (pogreška);}}
povratak upozorenje("Molimo unesite svoju novu lozinku");
}
povratak (Promjena lozinke </h2>
Ovaj kod prikazuje obrazac koji korisnicima omogućuje unos nove lozinke. Kada korisnik klikne na podnošenje, poslat će zahtjev poslužitelju da ažurira svoju lozinku u bazi podataka. Zatim će ažurirati korisničko sučelje ako je zahtjev uspješan.
Ažurirajte svoju App.js komponentu
Napravite promjene u nastavku u svojoj datoteci src/App.js:
uvoz {useState, createContext} iz"reagirati";
uvoz Prijaviti se iz"./components/Login";
uvoz OTPInput iz"./components/OTPInput";
uvoz Resetiraj iz"./components/Reset";
uvoz"./App.css";
izvozkonst RecoveryContext = createContext();izvozzadanofunkcijaaplikacija() {
konst [stranica, setPage] = useState("prijaviti se");
konst [e-pošta, setEmail] = useState("");
konst [otp, setOTP] = useState("");funkcijaKretanje po komponentama() {
ako (stranica "prijaviti se") povratak<Prijaviti se />;
ako (stranica "otp") povratak<OTPInput />;
ako (stranica "resetirati") povratak<Resetiraj />;
}
povratak ("Zaglavlje aplikacije">
vrijednost={{ stranica, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Ovaj kod definira objekt konteksta koji upravlja stanjem aplikacije, što uključuje e-poštu korisnika, OTP kod i razne stranice unutar aplikacije. U biti, objekt konteksta omogućuje prijenos potrebnih stanja između različitih komponenti—alternativa korištenju rekvizita.
Također uključuje funkciju koja s lakoćom upravlja navigacijom stranica bez potrebe za ponovnim prikazivanjem cijelih komponenti.
Postavite poslužitelj Express.js
Uz postavku klijenta, konfigurirajte pozadinsku uslugu provjere autentičnosti za rukovanje funkcijom ponovnog postavljanja lozinke.
Započeti, stvoriti Express web poslužitelj, i instalirajte ove pakete:
npm instalirajte cors dotenv nodemailer mongooseSljedeći, stvoriti MongoDB bazu podataka ili konfigurirati MongoDB klaster u oblaku. Zatim kopirajte navedeni niz veze, stvorite ENV datoteku u korijenskom direktoriju i zalijepite niz veze.
Za kraj trebate konfigurirati vezu s bazom podataka i definirati podatkovne modele za svoje korisničke podatke. Koristite kod u ovom spremištu za postaviti vezu s bazom podataka i definirati modele podataka.
Definirajte API rute
Pozadinska usluga idealno ima nekoliko ruta koje obrađuju HTTP zahtjeve klijenata. U ovom slučaju, morat ćete definirati tri rute koje će upravljati API zahtjevima za slanje e-pošte, verifikaciju e-pošte i ažuriranje lozinke od React klijenta.
Napravite novu datoteku pod nazivom userRoutes.js u korijenskom direktoriju i dodajte sljedeći kod:
konst izraziti = zahtijevati('izraziti');
konst ruter = express. Usmjerivač();
konst korisnički kontroleri = zahtijevati('../controllers/userControllers');router.get('/provjeri email', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
usmjerivač.post('/Pošalji e-mail', userControllers.sendEmail);
modul.exports = usmjerivač;
Kontrolori za API rute
Kontrolori su odgovorni za obradu HTTP zahtjeva klijenata. Jednom kada klijent podnese zahtjev određenoj API ruti, funkcija kontrolera se poziva i izvršava kako bi obradila zahtjev i vratila odgovarajući odgovor.
Stvorite novi kontroleri/userControllers.js datoteku i dodajte kod u nastavku.
Koristite kod u ovom spremištu za definirajte kontrolore za potvrdu e-pošte i lozinku za ažuriranje API rute.
Započnite definiranjem kontrolera za slanje e-pošte:
exports.sendEmail = (zahtjev, res) => {
konst transporter = nodemailer.createTransport({
servis: 'gmail',
siguran: pravi,
autentifikacija: {
korisnik: proces.env. MOJ E-MAIL,
prolaz: proces.env. APP_PASSWORD,
},
});konst { e-pošta_primatelja, OTP } = req.body;
konst mailOptions = {
iz: proces.env. MOJ E-MAIL,
za: recipient_email,
predmet: 'PONIVANJE LOZINKE',
html: `Oporavak lozinke</h2>
Koristiti ovaj OTP za ponovno postavljanje lozinke. OTP je valjan za1 minuta</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (greška, info) => {
ako (pogreška) {
konzola.log (greška);
res.status(500).poslati({ poruka: "Došlo je do greške prilikom slanja e-pošte" });
} drugo {
konzola.log('E-mail poslan: ' + info.odgovor);
res.status(200).poslati({ poruka: "E-pošta je uspješno poslana" });
}
});
};
Ovaj kôd definira funkciju koja koristi Nodemailer za slanje e-pošte s resetiranjem OTP-a navedenom primatelju. Postavlja transporter koristeći vaš vlastiti Gmail račun i lozinku.
Da biste dobili zaporku aplikacije Gmail, morate generirajte zaporku aplikacije u postavkama Google računa. Tada ćete koristiti ovu zaporku umjesto svoje uobičajene zaporke za Gmail za provjeru autentičnosti Nodemailera.
Konfigurirajte ulaznu točku poslužitelja
Napravite datoteku server.js u korijenskom direktoriju i dodajte ovaj kod:
konst izraziti = zahtijevati('izraziti');
konst cors = zahtijevati('cors');
konst app = express();
konst luka = 5000;
zahtijevati('dotenv').config();
konst nodemailer = zahtijevati('nodemailer');
konst povezivanjeDB = zahtijevati('./utils/dbconfig');
povezivanjeDB();
app.use (express.json());
app.use (express.urlencoded({ proširena: pravi }));
app.use (cors());
konst userRoutes = zahtijevati('./routes/userRoutes');
app.use('/', korisničke rute);
app.listen (port, () => {
konzola.log(`Poslužitelj sluša http://localhost:${port}`);
});
S postavljenim klijentom i poslužiteljem, možete pokrenuti razvojne poslužitelje za testiranje funkcionalnosti lozinke.
Izrada prilagođene usluge ponovnog postavljanja lozinke
Stvaranje sustava za poništavanje lozinke prilagođavanjem vašoj aplikaciji i njenim korisnicima najbolji je pristup, iako postoje plaćena, unaprijed izrađena rješenja. Dok dizajnirate ovu značajku, trebali biste uzeti u obzir i korisničko iskustvo i sigurnost jer su napadi stalna prijetnja.