Lad ikke dine besøgende blive hængende – lad dem nulstille deres adgangskode, hvis de har glemt det.
Autentificeringssystemer spiller en afgørende rolle i at give en problemfri og sikker brugeroplevelse. En godkendelsesworkflow involverer typisk to processer: tilmelding og login.
Efterhånden som antallet af onlinetjenester stiger, opretter folk konti, og hver konto kræver unikke login-legitimationsoplysninger. Dette gør det dog nemt at glemme eller forveksle loginoplysninger. For at løse dette skal din app implementere en funktion til nulstilling af adgangskode, der lader en bruger nulstille sin adgangskode bekvemt og sikkert.
Opsæt React-projektet
Du kan implementere en arbejdsgang til nulstilling af adgangskode på forskellige måder - der er ikke en universel standard, som enhver applikation bør følge. I stedet bør du skræddersy den tilgang, du vælger, for at imødekomme de specifikke behov i din ansøgning.
Den arbejdsgang, du vil lære om her, inkluderer følgende trin:
For at komme i gang,
bootstrap hurtigt et React-projekt. Installer derefter Axios, et JavaScript HTTP-anmodningsbibliotek.npm installere aksioerDu kan finde projektets kode heri GitHub-depot.
Opret en login-komponent
Opret en ny i src-mappen komponenter/Login.js fil og tilføj følgende kode. Start med at definere processen til nulstilling af adgangskode:
importere axios fra"aksios";
importere Reager, { useState } fra"reagere";
importere { useContext } fra"reagere";
importere { RecoveryContext } fra"../App";
importere"./global.component.css";eksportStandardfungereLog på() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState("");fungeresendOtp() {
hvis (brugerE-mail) {
axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).derefter((respons) => {
hvis (svar.status 200) {
konst OTP = Matematik.etage(Matematik.random() * 9000 + 1000);
konsol.log (OTP);
sætOTP(OTP);
setEmail (brugerE-mail);
axios.post(" http://localhost: 5000/send_e-mail", {
OTP,
recipient_email: userEmail,
})
.derefter(() => sætPage("otp"))
.fangst(konsol.log);
} andet {
alert("Bruger med denne e-mail eksisterer ikke!");
konsol.log (respons.data.meddelelse);
}}).fangst(konsol.log);
} andet {
alert("Indtast venligst din e-mail");
}}
Denne kode opretter en funktion, der sender en One-Time Password (OTP) til en brugers e-mailadresse. Den verificerer først brugeren ved at tjekke deres e-mail i databasen, før den genererer og sender OTP'en. Endelig opdaterer den brugergrænsefladen med OTP-siden.
Fuldfør login-komponenten ved at tilføje kode for at gengive login-JSX-formularelementet:
Vend tilbage (Log ind</h2>
Adgangskode:
"adgangskode" />
Opret en OTP-bekræftelseskomponent
For at sikre gyldigheden af en kode, som er indtastet af en bruger, skal du sammenligne den med den kode, der sendes til vedkommendes e-mail.
Opret en ny komponenter/OTPInput.js fil og tilføj denne kode:
importere React, { useState, useContext, useEffect } fra"reagere";
importere { RecoveryContext } fra"../App";
importere axios fra"aksios";
importere"./global.component.css";eksportStandardfungereOTP-input() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
fungereverifyOTP() {
hvis (parseInt(OTPinput) otp) {
sætPage("Nulstil");
} andet {
alert("Koden du har indtastet er ikke korrekt, prøv igen og send linket igen");
}
}
Koden opretter en React-komponent, hvor brugere bekræfter deres OTP-kode. Den kontrollerer, at den indtastede kode matcher den, der er gemt i kontekstobjektet. Hvis den er gyldig, viser den siden for nulstilling af adgangskode. Omvendt viser den en advarsel, der beder brugeren om at prøve igen eller sende OTP'en igen.
Du kan tjekke koden i denne depot der implementerer en funktion til at gensende OTP'er og en udløbstimer for OTP-koden.
Til sidst skal du gengive input JSX-elementerne.
Vend tilbage (
E-mailbekræftelse</h3>
Vi har sendt en bekræftelseskode til din e-mail.</p>
Opret komponenten Nulstil adgangskode
Opret en ny komponenter/Reset.js fil og tilføj denne kode:
importere Reager, {useState, useContext} fra"reagere";
importere { RecoveryContext } fra"../App";
importere axios fra"aksios";
importere"./global.component.css";eksportStandardfungereNulstil() {
konst [adgangskode, sætPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);fungereskift kodeord() {
hvis (adgangskode) {
prøve {
axios.put(" http://localhost: 5000/opdater-adgangskode", {
email: email,
nyt kodeord: adgangskode,
}).derefter(() => sætPage("Log på"));Vend tilbage alert("Adgangskoden blev ændret, log venligst ind!");
} fangst (fejl) {konsol.log (fejl);}}
Vend tilbage alert("Indtast venligst din nye adgangskode");
}
Vend tilbage (Skift adgangskode </h2>
Denne kode gengiver en formular, der giver brugerne mulighed for at indtaste en ny adgangskode. Når brugeren klikker på send, sender den en anmodning til serveren om at opdatere deres adgangskode i databasen. Det vil derefter opdatere brugergrænsefladen, hvis anmodningen lykkes.
Opdater din App.js-komponent
Foretag ændringerne nedenfor til din src/App.js-fil:
importere { useState, createContext } fra"reagere";
importere Log på fra"./components/Login";
importere OTP-input fra"./components/OTPInput";
importere Nulstil fra"./komponenter/Nulstil";
importere"./App.css";
eksportkonst RecoveryContext = createContext();eksportStandardfungereApp() {
konst [side, setPage] = useState("Log på");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");fungereNaviger i komponenter() {
hvis (side "Log på") Vend tilbage<Log på />;
hvis (side "otp") Vend tilbage<OTP-input />;
hvis (side "Nulstil") Vend tilbage<Nulstil />;
}
Vend tilbage ("App-header">
værdi={{ side, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Denne kode definerer et kontekstobjekt, der administrerer appens tilstand, som inkluderer brugerens e-mail, OTP-koden og de forskellige sider i appen. I det væsentlige gør kontekstobjektet det muligt at overføre de nødvendige tilstande mellem forskellige komponenter - et alternativ til at bruge rekvisitter.
Den indeholder også en funktion, der håndterer sidenavigation med lethed uden at skulle gengive hele komponenter.
Konfigurer en Express.js-server
Med klientopsætningen skal du konfigurere en backend-godkendelsestjeneste til at håndtere funktionen til nulstilling af adgangskode.
For at komme i gang, oprette en Express-webserver, og installer disse pakker:
npm installer cors dotenv nodemailer mongooseNæste, oprette en MongoDB-database eller konfigurere en MongoDB-klynge i skyen. Kopier derefter den medfølgende forbindelsesstreng, opret en ENV-fil i rodmappen, og indsæt forbindelsesstrengen.
For at afslutte skal du konfigurere databaseforbindelsen og definere datamodellerne for dine brugerdata. Brug koden i dette lager til at opsætte databaseforbindelsen og definere datamodellerne.
Definer API-ruterne
En backend-tjeneste har ideelt set flere ruter, der håndterer klienters HTTP-anmodninger. I dette tilfælde skal du definere tre ruter, der administrerer anmodningerne om send-e-mail, e-mailbekræftelse og opdatering af adgangskode API fra React-klienten.
Opret en ny fil kaldet userRoutes.js i rodmappen og tilføj følgende kode:
konst udtrykke = kræve('udtrykke');
konst router = ekspres. Router();
konst userControllers = kræve('../controllers/userControllers');router.get('/Tjek email', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/Send e-mail', userControllers.sendEmail);
modul.exports = router;
Controllere til API-ruterne
Controllere er ansvarlige for at behandle klienters HTTP-anmodninger. Når en klient først fremsætter en anmodning til en bestemt API-rute, bliver en controllerfunktion påkaldt og udført for at behandle anmodningen og returnere et passende svar.
Opret en ny controllere/userControllers.js fil og tilføj koden nedenfor.
Brug koden i dette lager til at definere controllere til e-mailbekræftelse og opdateringsadgangskode API-ruter.
Start med at definere sende-e-mail-controlleren:
exports.sendEmail = (kræve, res) => {
konst transporter = nodemailer.createTransport({
service: 'gmail',
sikker: rigtigt,
auth: {
bruger: process.env. MIN EMAIL,
bestå: process.env. APP_PASSWORD,
},
});konst { recipient_email, OTP } = req.body;
konst mailOptions = {
fra: process.env. MIN EMAIL,
til: modtager_e-mail,
emne: 'NULSTIL KODEORD',
html: `Adgangskodegendannelse</h2>
Brug det her OTP for at nulstille din adgangskode. OTP er gyldig til1 minut</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (fejl, info) => {
hvis (fejl) {
konsol.log (fejl);
res.status(500).sende({ besked: "Der opstod en fejl under afsendelse af e-mailen" });
} andet {
konsol.log('Email sendt: ' + info.svar);
res.status(200).sende({ besked: "E-mail blev sendt" });
}
});
};
Denne kode definerer en funktion, der bruger Nodemailer til at sende en e-mail med en OTP-nulstilling til en specificeret modtager. Det opsætter en transporter ved hjælp af din egen Gmail-konto og adgangskode.
For at få adgangskoden til din Gmail-app skal du generere en app-adgangskode i dine Google-kontoindstillinger. Du skal derefter bruge denne adgangskode i stedet for din almindelige Gmail-adgangskode til at godkende Nodemaileren.
Konfigurer serverindgangspunktet
Opret en server.js-fil i rodmappen og tilføj denne kode:
konst udtrykke = kræve('udtrykke');
konst cors = kræve('cors');
konst app = express();
konst port = 5000;
kræve('dotenv').config();
konst nodemailer = kræve('nodemailer');
konst connectDB = kræve('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ udvidet: rigtigt }));
app.use (cors());
konst brugerruter = kræve('./routes/brugerRoutes');
app.brug('/', brugerruter);
app.listen (port, () => {
konsol.log(`Serveren lytter kl http://localhost:${port}`);
});
Med både klienten og serveren sat op, kan du køre udviklingsserverne for at teste adgangskodefunktionaliteten.
Opbygning af en brugerdefineret adgangskode-nulstillingstjeneste
Oprettelse af et system til nulstilling af adgangskode ved at skræddersy det til din applikation og dets brugere er den bedste tilgang, selvom der findes betalte, forudbyggede løsninger. Mens du designer denne funktion, bør du tage hensyn til både brugeroplevelse og sikkerhed, da angreb er en konstant trussel.