Lämna inte dina webbplatsbesökare hängande – låt dem återställa sitt lösenord om de har glömt det.

Autentiseringssystem spelar en avgörande roll för att ge en sömlös och säker användarupplevelse. Ett arbetsflöde för autentisering innefattar vanligtvis två processer: registrering och inloggning.

När antalet onlinetjänster ökar skapar människor konton och varje konto kräver unika inloggningsuppgifter. Detta gör det dock lätt att glömma eller förväxla inloggningsuppgifter. För att åtgärda detta bör din app implementera en funktion för återställning av lösenord som låter en användare återställa sitt lösenord bekvämt och säkert.

Konfigurera React Project

Du kan implementera ett arbetsflöde för återställning av lösenord på olika sätt – det finns inte en universell standard som varje applikation bör följa. Istället bör du skräddarsy det tillvägagångssätt du väljer för att möta de specifika behoven i din ansökan.

Arbetsflödet du kommer att lära dig om här inkluderar följande steg:

För att starta, starta snabbt upp ett React-projekt

instagram viewer
. Installera sedan Axios, ett JavaScript HTTP-förfrågningsbibliotek.

npm installera axios

Du hittar projektets kod i denna GitHub-förråd.

Skapa en inloggningskomponent

Skapa en ny i src-katalogen komponenter/Login.js fil och lägg till följande kod. Börja med att definiera processen för lösenordsåterställning:

importera axios från"axios";
importera Reagera, { useState } från"reagera";
importera { useContext } från"reagera";
importera { RecoveryContext } från"../App";
importera"./global.component.css";
exporterastandardfungeraLogga in() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 


fungeraskickaOtp() {
om (användarens e-post) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).sedan((svar) => {
om (respons.status 200) {
konst OTP = Matematik.golv(Matematik.random() * 9000 + 1000);
trösta.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/send_email", {
 OTP,
 recipient_email: userEmail,
 })
 .sedan(() => setPage("otp"))
 .fånga(trösta.logga);
 } annan {
 varna("Användare med denna e-postadress finns inte!");
trösta.log (response.data.meddelande);
 }}).fånga(trösta.logga);
 } annan {
 varna("Vänligen ange din e-postadress");
 }}

Denna kod skapar en funktion som skickar ett engångslösenord (OTP) till en användares e-postadress. Den verifierar först användaren genom att kontrollera deras e-post i databasen innan den genererar och skickar OTP. Slutligen uppdaterar den gränssnittet med OTP-sidan.

Slutför inloggningskomponenten genom att lägga till kod för att återge inloggnings JSX-formulärelementet:

lämna tillbaka (


Logga in</h2>







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


 Lösenord:
"Lösenord" />

Skapa en OTP-verifieringskomponent

För att säkerställa giltigheten av en kod som angetts av en användare, måste du jämföra den med koden som skickas till deras e-post.

Skapa en ny komponenter/OTPInput.js fil och lägg till denna kod:

importera React, { useState, useContext, useEffect } från"reagera";
importera { RecoveryContext } från"../App";
importera axios från"axios";
importera"./global.component.css";
exporterastandardfungeraOTP-ingång() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
fungeraverifieraOTP() {
om (parseInt(OTPinput) otp) {
 setPage("återställa");
 } annan {
 varna("Koden du har angett är inte korrekt, försök igen skicka länken igen");
 }
 }

Koden skapar en React-komponent där användare verifierar sin OTP-kod. Den kontrollerar att den inmatade koden matchar den som är lagrad i kontextobjektet. Om den är giltig visar den sidan för lösenordsåterställning. Omvänt visar den en varning som uppmanar användaren att försöka igen eller skicka om OTP.

Du kan kontrollera koden i denna förvaret som implementerar en funktion för att återsända OTP: er och en utgångstimer för OTP-koden.

Till sist, rendera de ingående JSX-elementen.

lämna tillbaka (


E-postverifiering</h3>




Vi har skickat en verifieringskod till din e-post.</p>




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

Skapa komponenten Återställ lösenord

Skapa en ny komponenter/Reset.js fil och lägg till denna kod:

importera Reagera, {useState, useContext} från"reagera";
importera { RecoveryContext } från"../App";
importera axios från"axios";
importera"./global.component.css";
exporterastandardfungeraÅterställa() {
konst [lösenord, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);


fungeraändra lösenord() {
om (Lösenord) {
Prova {
 axios.put(" http://localhost: 5000/uppdatera-lösenord", {
 e-post: e-post,
 newPassword: lösenord,
 }).sedan(() => setPage("logga in"));


lämna tillbaka varna("Lösenordet har ändrats, vänligen logga in!");
 } fånga (fel) {trösta.log (fel);}}
lämna tillbaka varna("Vänligen ange ditt nya lösenord");
 }
lämna tillbaka (


 Ändra lösenord </h2>






 Nytt lösenord: 
 typ="Lösenord"
 platshållare="..."
 krävs=""
 värde={lösenord}
 onChange={(e) => setPassword (e.target.value)} />

Denna kod återger ett formulär som tillåter användare att ange ett nytt lösenord. När användaren klickar på skicka skickar den en begäran till servern att uppdatera sitt lösenord i databasen. Det kommer sedan att uppdatera användargränssnittet om begäran lyckas.

Uppdatera din App.js-komponent

Gör ändringarna nedan i din src/App.js-fil:

importera { useState, createContext } från"reagera";
importera Logga in från"./components/Login";
importera OTP-ingång från"./components/OTPInput";
importera Återställa från"./components/Reset";
importera"./App.css";
exporterakonst RecoveryContext = createContext();
exporterastandardfungeraApp() {
konst [page, setPage] = useState("logga in");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");


fungeraNavigera i komponenter() {
om (sida "logga in") lämna tillbaka<Logga in />;
om (sida "otp") lämna tillbaka<OTP-ingång />;
om (sida "återställa") lämna tillbaka<Återställa />;
 }
lämna tillbaka (
"App-header"> 
 värde={{ sida, setPage, otp, setOTP, email, setEmail }}>



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

Den här koden definierar ett kontextobjekt som hanterar appens tillstånd, vilket inkluderar användarens e-post, OTP-koden och de olika sidorna i appen. I huvudsak gör kontextobjektet det möjligt att skicka de nödvändiga tillstånden mellan olika komponenter - ett alternativ till att använda rekvisita.

Den innehåller också en funktion som enkelt hanterar sidnavigering utan att behöva rendera om hela komponenter.

Konfigurera en Express.js-server

Med klientinställningen konfigurerar du en backend-autentiseringstjänst för att hantera lösenordsåterställningsfunktionen.

För att starta, skapa en Express-webbserver, och installera dessa paket:

npm installera cors dotenv nodemailer mongoose

Nästa, skapa en MongoDB-databas eller konfigurera ett MongoDB-kluster i molnet. Kopiera sedan anslutningssträngen som tillhandahålls, skapa en ENV-fil i rotkatalogen och klistra in anslutningssträngen.

För att avsluta måste du konfigurera databasanslutningen och definiera datamodellerna för dina användardata. Använd koden i det här arkivet för att ställ in databasanslutningen och definiera datamodellerna.

Definiera API-rutter

En backend-tjänst har helst flera rutter som hanterar klienters HTTP-förfrågningar. I det här fallet måste du definiera tre rutter som kommer att hantera förfrågningar om skicka-e-post, e-postverifiering och uppdatering av lösenords-API från React-klienten.

Skapa en ny fil som heter userRoutes.js i rotkatalogen och lägg till följande kod:

konst uttrycka = behöva('uttrycka');
konst router = express. Router();
konst userControllers = behöva('../controllers/userControllers');
router.get('/kolla e-post', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/skicka epost', userControllers.sendEmail);
modul.exports = router;

Styrenheter för API-rutter

Kontrollanter är ansvariga för att behandla klienters HTTP-förfrågningar. När en klient gör en begäran till en viss API-rutt, anropas och exekveras en kontrollfunktion för att behandla begäran och returnera ett lämpligt svar.

Skapa en ny controllers/userControllers.js fil och lägg till koden nedan.

Använd koden i det här arkivet för att definiera kontroller för e-postverifiering och uppdateringslösenord API-rutter.

Börja med att definiera kontrollenheten för skicka e-post:

exports.sendEmail = (req, res) => {
konst transporter = nodemailer.createTransport({
 service: "gmail",
 säkra: Sann,
 auth: {
 användare: process.env. MIN E-POST,
 passera: process.env. APP_PASSWORD,
 },
 });
konst { recipient_email, OTP } = req.body;


konst mailOptions = {
från: process.env. MIN E-POST,
 till: recipient_email,
 ämne: 'LÖSENORDSÅTERSTÄLLNING',
 html: `


Lösenordsåterställning</h2>




Använda sig av detta OTP för att återställa ditt lösenord. OTP är giltigt för1 minut</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (fel, info) => {
om (fel) {
trösta.log (fel);
 res.status(500).skicka({ meddelande: "Ett fel uppstod när e-postmeddelandet skickades" });
 } annan {
trösta.logga('Email skickat: ' + info.respons);
 res.status(200).skicka({ meddelande: "E-postmeddelandet har skickats" });
 }
 });
};

Denna kod definierar en funktion som använder Nodemailer för att skicka ett e-postmeddelande med en OTP-återställning till en angiven mottagare. Den ställer in en transportör med ditt eget Gmail-konto och lösenord.

För att få ditt Gmail-applösenord måste du generera ett applösenord i dina Google-kontoinställningar. Du kommer sedan att använda detta lösenord i stället för ditt vanliga Gmail-lösenord för autentisering av Nodemailer.

Konfigurera serveringångspunkten

Skapa en server.js-fil i rotkatalogen och lägg till denna kod:

konst uttrycka = behöva('uttrycka');
konst cors = behöva('cors');
konst app = express();
konst port = 5000;
behöva('dotenv').config();
konst nodemailer = behöva('nodemailer');
konst connectDB = behöva('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ förlängt: Sann }));
app.use (cors());
konst userRoutes = behöva('./routes/userRoutes');
app.use('/', användarvägar);
app.listen (port, () => {
trösta.logga(`Server lyssnar på http://localhost:${port}`);
});

Med både klienten och servern inställda kan du köra utvecklingsservrarna för att testa lösenordsfunktionaliteten.

Bygga en anpassad lösenordsåterställningstjänst

Att skapa ett lösenordsåterställningssystem genom att skräddarsy det efter din applikation och dess användare är den bästa metoden, även om det finns betalda, förbyggda lösningar. När du utformar den här funktionen bör du ta hänsyn till både användarupplevelse och säkerhet, eftersom attacker är ett konstant hot.