Ikke la besøkende på nettstedet henge – la dem tilbakestille passordet hvis de har glemt det.
Autentiseringssystemer spiller en avgjørende rolle for å gi en sømløs og sikker brukeropplevelse. En arbeidsflyt for autentisering involverer vanligvis to prosesser: påmelding og pålogging.
Etter hvert som antallet nettjenester øker, oppretter folk kontoer, og hver konto krever unike påloggingsinformasjon. Dette gjør det imidlertid lett å glemme eller forvirre påloggingsinformasjon. For å løse dette, bør appen din implementere en funksjon for tilbakestilling av passord som lar en bruker tilbakestille passordet sitt enkelt og sikkert.
Sett opp React-prosjektet
Du kan implementere en arbeidsflyt for tilbakestilling av passord på forskjellige måter – det er ikke en universell standard som hver applikasjon bør følge. I stedet bør du skreddersy tilnærmingen du velger for å møte de spesifikke behovene til søknaden din.
Arbeidsflyten du lærer om her inkluderer følgende trinn:
For å komme i gang, start raskt opp et React-prosjekt. Neste, installer Axios, et JavaScript HTTP-forespørselsbibliotek.
npm installer aksioerDu finner prosjektets kode i denne GitHub-depot.
Opprett en påloggingskomponent
Opprett en ny i src-katalogen komponenter/Login.js fil og legg til følgende kode. Start med å definere prosessen for tilbakestilling av passord:
import aksioer fra"aksios";
import Reager, { useState } fra"reagere";
import { useContext } fra"reagere";
import { RecoveryContext } fra"../App";
import"./global.component.css";eksportmisligholdefunksjonLogg Inn() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState("");funksjonsendOtp() {
hvis (brukerE-post) {
axios.get(` http://localhost: 5000/check_email? e-post=${userEmail}`).deretter((respons) => {
hvis (respons.status 200) {
konst OTP = Matte.gulv(Matte.random() * 9000 + 1000);
konsoll.log (OTP);
settOTP(OTP);
setEmail (brukerE-post);
axios.post(" http://localhost: 5000/send_email", {
OTP,
mottaker_e-post: brukere-post,
})
.deretter(() => setPage("otp"))
.å fange(konsoll.Logg);
} ellers {
varsling("Bruker med denne e-posten eksisterer ikke!");
konsoll.log (respons.data.melding);
}}).å fange(konsoll.Logg);
} ellers {
varsling("Vennligst skriv inn e-posten din");
}}
Denne koden oppretter en funksjon som sender et engangspassord (OTP) til en brukers e-postadresse. Den verifiserer først brukeren ved å sjekke e-posten deres i databasen før den genererer og sender OTP. Til slutt oppdaterer den brukergrensesnittet med OTP-siden.
Fullfør påloggingskomponenten ved å legge til kode for å gjengi innloggings-JSX-skjemaelementet:
komme tilbake (Logg inn</h2>
Passord:
"passord" />
Opprett en OTP-verifiseringskomponent
For å sikre gyldigheten til en kode som er skrevet inn av en bruker, må du sammenligne den med koden sendt til e-posten.
Lage en ny komponenter/OTPInput.js fil og legg til denne koden:
import React, { useState, useContext, useEffect } fra"reagere";
import { RecoveryContext } fra"../App";
import aksioer fra"aksios";
import"./global.component.css";eksportmisligholdefunksjonOTP-inngang() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funksjonverifiserOTP() {
hvis (parseInt(OTPinput) otp) {
setPage("nullstille");
} ellers {
varsling("Koden du har skrevet inn er feil, prøv igjen og send lenken på nytt");
}
}
Koden oppretter en React-komponent der brukere bekrefter sin OTP-kode. Den sjekker at den angitte koden samsvarer med den som er lagret i kontekstobjektet. Hvis den er gyldig, viser den siden for tilbakestilling av passord. Motsatt viser den et varsel som ber brukeren om å prøve igjen eller sende OTP på nytt.
Du kan sjekke koden i denne oppbevaringssted som implementerer en funksjon for å sende OTP-er på nytt og en utløpstidtaker for OTP-koden.
Til slutt, gjengi inndata JSX-elementene.
komme tilbake (
E-postbekreftelse</h3>
Vi har sendt en bekreftelseskode til e-posten din.</p>
Opprett Tilbakestill passord-komponenten
Lage en ny komponenter/Reset.js fil og legg til denne koden:
import Reager, {useState, useContext} fra"reagere";
import { RecoveryContext } fra"../App";
import aksioer fra"aksios";
import"./global.component.css";eksportmisligholdefunksjonNullstille() {
konst [passord, setPassword] = brukState("");
konst { setPage, email } = useContext (RecoveryContext);funksjonBytt passord() {
hvis (passord) {
prøve {
axios.put(" http://localhost: 5000/oppdatering-passord", {
e-post: e-post,
nyttPassord: passord,
}).deretter(() => setPage("Logg Inn"));komme tilbake varsling("Passordet ble endret, vennligst logg på!");
} å fange (feil) {konsoll.log (feil);}}
komme tilbake varsling("Vennligst skriv inn ditt nye passord");
}
komme tilbake (Endre passord </h2>
Denne koden gjengir et skjema som lar brukere skrive inn et nytt passord. Når brukeren klikker på send, vil den sende en forespørsel til serveren om å oppdatere passordet sitt i databasen. Den vil deretter oppdatere brukergrensesnittet hvis forespørselen er vellykket.
Oppdater App.js-komponenten din
Gjør endringene nedenfor i src/App.js-filen din:
import { useState, createContext } fra"reagere";
import Logg Inn fra"./components/Login";
import OTP-inngang fra"./components/OTPInput";
import Nullstille fra"./components/Reset";
import"./App.css";
eksportkonst RecoveryContext = createContext();eksportmisligholdefunksjonApp() {
konst [side, setPage] = useState("Logg Inn");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = brukState("");funksjonNaviger i komponenter() {
hvis (side "Logg Inn") komme tilbake<Logg Inn />;
hvis (side "otp") komme tilbake<OTP-inngang />;
hvis (side "nullstille") komme tilbake<Nullstille />;
}
komme tilbake ("App-header">
verdi={{ side, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Denne koden definerer et kontekstobjekt som administrerer appens tilstand, som inkluderer brukerens e-post, OTP-koden og de ulike sidene i appen. I hovedsak gjør kontekstobjektet det mulig å overføre de nødvendige tilstandene mellom forskjellige komponenter - et alternativ til å bruke rekvisitter.
Den inkluderer også en funksjon som enkelt håndterer sidenavigering uten å måtte gjengi hele komponenter.
Sett opp en Express.js-server
Med klientoppsettet, konfigurer en backend-autentiseringstjeneste for å håndtere funksjonaliteten for tilbakestilling av passord.
For å komme i gang, opprette en Express-webserver, og installer disse pakkene:
npm installer cors dotenv nodemailer mongooseNeste, opprette en MongoDB-database eller konfigurere en MongoDB-klynge på skyen. Kopier deretter tilkoblingsstrengen som følger med, lag en ENV-fil i rotkatalogen og lim inn tilkoblingsstrengen.
For å fullføre må du konfigurere databasetilkoblingen og definere datamodellene for brukerdataene dine. Bruk koden i dette depotet for å sette opp databasetilkoblingen og definere datamodellene.
Definer API-rutene
En backend-tjeneste har ideelt sett flere ruter som håndterer klienters HTTP-forespørsler. I dette tilfellet må du definere tre ruter som skal administrere forespørslene om sending av e-post, e-postbekreftelse og API for oppdatering av passord fra React-klienten.
Opprett en ny fil kalt userRoutes.js i rotkatalogen og legg til følgende kode:
konst uttrykke = krever('uttrykke');
konst ruter = ekspress. Ruter();
konst userControllers = krever('../controllers/userControllers');router.get('/Sjekk epost', userControllers.checkEmail);
router.put('/oppdatering-passord', userControllers.updatePassword);
router.post('/Send e-post', userControllers.sendEmail);
modul.exports = ruter;
Kontrollere for API-rutene
Kontrollører er ansvarlige for å behandle klienters HTTP-forespørsler. Når en klient sender en forespørsel til en bestemt API-rute, blir en kontrollerfunksjon påkalt og utført for å behandle forespørselen og returnere et passende svar.
Lage en ny kontrollere/brukerkontrollere.js fil og legg til koden nedenfor.
Bruk koden i dette depotet for å definere kontroller for e-postbekreftelse og oppdateringspassord API-ruter.
Start med å definere kontrolleren for send e-post:
exports.sendEmail = (krav, res) => {
konst transporter = nodemailer.createTransport({
service: 'gmail',
sikre: ekte,
auth: {
bruker: process.env. MIN E-POST,
pass: process.env. APP_PASSWORD,
},
});konst { recipient_email, OTP } = req.body;
konst mailOptions = {
fra: process.env. MIN E-POST,
til: mottaker_e-post,
Emne: 'RESET PASSORD',
html: `Passordgjenoppretting</h2>
Bruk dette OTP for å tilbakestille passordet ditt. OTP er gyldig til1 minutt</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (feil, info) => {
hvis (feil) {
konsoll.log (feil);
res.status(500).sende({ beskjed: "Det oppstod en feil under sending av e-posten" });
} ellers {
konsoll.Logg('Epost sendt: ' + info.respons);
res.status(200).sende({ beskjed: "E-post sendt" });
}
});
};
Denne koden definerer en funksjon som bruker Nodemailer til å sende en e-post med en OTP-tilbakestilling til en spesifisert mottaker. Den setter opp en transporter ved å bruke din egen Gmail-konto og passord.
For å få passordet ditt for Gmail-appen må du generere et app-passord i Google-kontoinnstillingene dine. Du vil da bruke dette passordet i stedet for ditt vanlige Gmail-passord for å autentisere Nodemailer.
Konfigurer serverinngangspunktet
Opprett en server.js-fil i rotkatalogen og legg til denne koden:
konst uttrykke = krever('uttrykke');
konst cors = krever('cors');
konst app = express();
konst port = 5000;
krever('dotenv').config();
konst nodemailer = krever('nodemailer');
konst connectDB = krever('./utils/dbconfig');
koble DB();
app.use (express.json());
app.use (express.urlencoded({ forlenget: ekte }));
app.use (cors());
konst brukerruter = krever('./ruter/brukerruter');
app.bruk('/', brukerruter);
app.listen (port, () => {
konsoll.Logg(`Tjeneren lytter til http://localhost:${port}`);
});
Med både klienten og serveren satt opp, kan du kjøre utviklingsserverne for å teste passordfunksjonaliteten.
Bygge en tilpasset passordtilbakestillingstjeneste
Å lage et system for tilbakestilling av passord ved å skreddersy det til din applikasjon og dens brukere er den beste tilnærmingen, selv om det finnes betalte, forhåndsbygde løsninger. Når du designer denne funksjonen, bør du ta hensyn til både brukeropplevelse og sikkerhet, siden angrep er en konstant trussel.