Az elfelejtett jelszó és a visszaállítási munkafolyamat kezelése a React és a Node.js használatával

A hitelesítési rendszerek döntő szerepet játszanak a zökkenőmentes és biztonságos felhasználói élmény biztosításában. A hitelesítési munkafolyamat általában két folyamatból áll: a regisztrációból és a bejelentkezésből.

Az online szolgáltatások számának növekedésével az emberek fiókokat hoznak létre, és minden fiókhoz egyedi bejelentkezési adatokra van szükség. Ez azonban megkönnyíti a bejelentkezési adatok elfelejtését vagy összetévesztését. Ennek megoldásához az alkalmazásnak be kell építenie egy jelszó-visszaállítási funkciót, amely lehetővé teszi a felhasználó számára, hogy kényelmesen és biztonságosan visszaállítsa jelszavát.

Állítsa be a React projektet

A jelszó-visszaállítási munkafolyamatot többféleképpen is megvalósíthatja – nincs olyan univerzális szabvány, amelyet minden alkalmazásnak követnie kellene. Ehelyett a választott megközelítést az alkalmazás speciális igényeihez kell igazítania.

Az itt megismert munkafolyamat a következő lépéseket tartalmazza:

A kezdéshez gyorsan indítsa el a React projektet. Ezután telepítse Az Axios, egy JavaScript HTTP-kérés könyvtár.

npm install axios

Ebben megtalálod a projekt kódját GitHub adattár.

Hozzon létre egy bejelentkezési összetevőt

Az src könyvtárban hozzon létre egy újat összetevők/Login.js fájlt, és adja hozzá a következő kódot. Kezdje a jelszó-visszaállítási folyamat meghatározásával:

import axiók tól től"axiók";
import React, { useState } tól től"reagál";
import { useContext } tól től"reagál";
import { RecoveryContext } tól től"../app";
import"./global.component.css";
exportalapértelmezettfunkcióBelépés() {
const { setPage, setOTP, setEmail } = useContext (RecoveryContext);
const [userEmail, setUserEmail] = useState(""); 
funkciósendOtp() {
ha (felhasználói e-mail) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).akkor((válasz) => {
ha (válasz.állapot 200) {
const OTP = Math.padló(Math.random() * 9000 + 1000);
konzol.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/e-mail küldése", {
 OTP,
 recipient_email: userEmail,
 })
 .akkor(() => setPage("otp"))
 .fogás(konzol.log);
 } más {
 éber("Az ezzel az e-mail-címmel rendelkező felhasználó nem létezik!");
konzol.log (response.data.message);
 }}).fogás(konzol.log);
 } más {
 éber("Kérem, írja be az e-mail címét");
 }}

Ez a kód egy funkciót hoz létre, amely egyszeri jelszót (OTP) küld a felhasználó e-mail címére. Az OTP generálása és elküldése előtt először ellenőrzi a felhasználót az e-mailek ellenőrzésével az adatbázisban. Végül frissíti a felhasználói felületet az OTP oldallal.

Fejezze be a bejelentkezési összetevőt kód hozzáadásával a bejelentkezési JSX űrlapelem megjelenítéséhez:

Visszatérés (


Bejelentkezés</h2>




 Email: 
"email" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Jelszó:
"Jelszó" />
"Beküldés">bejelentkezés</button>
 </form>
"#" onClick={() => sendOtp()}>
 Elfelejtett jelszó
 </a>
 </div>
 );
}

Hozzon létre egy OTP-ellenőrzési összetevőt

A felhasználó által beírt kód érvényességének biztosításához össze kell hasonlítania azt az e-mail címére küldött kóddal.

Újat csinálni összetevők/OTPInput.js fájlt, és add hozzá ezt a kódot:

import React, { useState, useContext, useEffect } tól től"reagál";
import { RecoveryContext } tól től"../app";
import axiók tól től"axiók";
import"./global.component.css";
exportalapértelmezettfunkcióOTPInput() {
const { email, otp, setPage } = useContext (RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
funkcióellenőrizze az OTP-t() {
ha (parseInt(OTPinput) otp) {
 setPage("Visszaállítás");
 } más {
 éber("A megadott kód helytelen, próbálja meg újra elküldeni a linket");
 }
 }

A kód létrehoz egy React összetevőt, ahol a felhasználók ellenőrzik OTP-kódjukat. Ellenőrzi, hogy a beírt kód egyezik-e a környezeti objektumban tárolt kóddal. Ha érvényes, akkor megjelenik a jelszó-visszaállító oldal. Ezzel szemben figyelmeztetést jelenít meg, amely arra kéri a felhasználót, hogy próbálkozzon újra, vagy küldje el újra az OTP-t.

Ebben ellenőrizheti a kódot adattár amely egy funkciót valósít meg az OTP-k újraküldésére és egy lejárati időzítőt az OTP-kódhoz.

Végül rendereli a bemeneti JSX elemeket.

Visszatérés (


E-mail ellenőrzés</h3>


Ellenőrző kódot küldtünk az e-mail címére.</p>



"szöveg" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Fiók ellenőrzése</button> 
 resendOTP()} > Nemnem kapod meg a kódot? 
 {letiltja? „OTP újraküldése ${timerCount}s`: "OTP újraküldése"}
 </a> 
 </form>
 </div>
 );}

Hozza létre a Jelszó visszaállítása komponenst

Újat csinálni összetevők/Reset.js fájlt, és add hozzá ezt a kódot:

import React, {useState, useContext} tól től"reagál";
import { RecoveryContext } tól től"../app";
import axiók tól től"axiók";
import"./global.component.css";
exportalapértelmezettfunkcióVisszaállítás() {
const [password, setPassword] = useState("");
const { setPage, email } = useContext (RecoveryContext);
funkcióJelszó módosítása() {
ha (Jelszó) {
próbáld ki {
 axios.put(" http://localhost: 5000/jelszó frissítése", {
 email: email,
 newPassword: jelszó,
 }).akkor(() => setPage("Belépés"));
Visszatérés éber("A jelszó sikeresen megváltozott, kérjük jelentkezzen be!");
 } fogás (hiba) {konzol.log (hiba);}}
Visszatérés éber("Kérjük, adja meg új jelszavát");
 }
Visszatérés (


 Jelszó módosítása </h2>




 Új jelszó: 
 típus="Jelszó"
 helyőrző="..."
 kötelező =""
 érték={jelszó}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Jelszó visszaállítása </button>
 </form>
 </div>
 );
}

Ez a kód egy űrlapot jelenít meg, amely lehetővé teszi a felhasználók számára új jelszó megadását. Amikor a felhasználó rákattint az elküldésre, kérést küld a szervernek, hogy frissítse jelszavát az adatbázisban. Ezután frissíti a felhasználói felületet, ha a kérés sikeres.

Frissítse App.js komponensét

Hajtsa végre az alábbi módosításokat az src/App.js fájlban:

import { useState, createContext } tól től"reagál";
import Belépés tól től"./components/Login";
import OTPInput tól től"./components/OTPIinput";
import Visszaállítás tól től"./components/Reset";
import"./App.css";
exportconst RecoveryContext = createContext();
exportalapértelmezettfunkcióApp() {
const [oldal, setPage] = useState("Belépés");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");
funkcióNavigateComponents() {
ha (oldal "Belépés") Visszatérés<Belépés />;
ha (oldal "otp") Visszatérés<OTPInput />;
ha (oldal "Visszaállítás") Visszatérés<Visszaállítás />;
 }
Visszatérés (
"Alkalmazás fejléc"> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



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

Ez a kód egy kontextusobjektumot határoz meg, amely kezeli az alkalmazás állapotát, amely magában foglalja a felhasználó e-mail-címét, az OTP-kódot és az alkalmazáson belüli különböző oldalakat. Lényegében a kontextusobjektum lehetővé teszi a szükséges állapotok átadását a különböző összetevők között – ez a kellékek használatának alternatívája.

Tartalmaz egy olyan funkciót is, amely könnyedén kezeli az oldalnavigációt anélkül, hogy a teljes komponenseket újra kellene renderelni.

Állítson be egy Express.js szervert

Az ügyfél beállításával konfiguráljon egy háttér-hitelesítési szolgáltatást a jelszó-visszaállítási funkció kezelésére.

A kezdéshez hozzon létre egy Express webszervert, és telepítse ezeket a csomagokat:

npm install cors dotenv nodemailer mongoose

Következő, Hozzon létre egy MongoDB adatbázist vagy konfiguráljon egy MongoDB-fürtöt a felhőben. Ezután másolja ki a megadott kapcsolati karakterláncot, hozzon létre egy ENV-fájlt a gyökérkönyvtárban, és illessze be a kapcsolati karakterláncot.

A befejezéshez konfigurálnia kell az adatbázis-kapcsolatot, és meg kell határoznia a felhasználói adatok adatmodelljeit. Használja az ebben a tárolóban található kódot állítsa be az adatbázis-kapcsolatot és definiálja az adatmodelleket.

Határozza meg az API-útvonalakat

Egy háttérszolgáltatás ideális esetben több útvonallal rendelkezik, amelyek kezelik az ügyfelek HTTP-kéréseit. Ebben az esetben meg kell határoznia három útvonalat, amelyek kezelik a React-ügyféltől érkező e-mail-küldési, e-mail-ellenőrzési és jelszófrissítési API-kéréseket.

Hozzon létre egy új fájlt userRoutes.js néven a gyökérkönyvtárban, és adja hozzá a következő kódot:

const expressz = igényelnek('Expressz');
const router = expressz. Router();
const userControllers = igényelnek("../controllers/userControllers");
router.get('/emailek megtekintése', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/küldjön e-mailt', userControllers.sendEmail);
modult.exports = útválasztó;

Az API-útvonalak vezérlői

A vezérlők felelősek az ügyfelek HTTP-kéréseinek feldolgozásáért. Miután egy kliens kérelmet küld egy adott API-útvonalhoz, a vezérlő függvény meghívódik és végrehajtódik, hogy feldolgozza a kérést, és visszaadja a megfelelő választ.

Újat csinálni controllers/userControllers.js fájlt, és adja hozzá az alábbi kódot.

Használja az ebben a tárolóban található kódot határozzon meg vezérlőket az e-mail ellenőrzéshez és a frissítési jelszóhoz API útvonalak.

Kezdje az e-mail küldés vezérlőjének meghatározásával:

exports.sendEmail = (req, res) => {
const transporter = nodemailer.createTransport({
 szolgáltatás: 'gmail',
 biztonságos: igaz,
 hitelesítés: {
 felhasználó: process.env. AZ EMAILEM,
 pass: process.env. APP_PASSWORD,
 },
 });
const { címzett_e-mail, OTP } = req.body;
const mailOptions = {
tól től: folyamat.env. AZ EMAILEM,
 címzett: címzett_e-mail,
 tantárgy: 'JELSZÓ VISSZAÁLLÍTÁSA',
 html: `


Jelszó helyreállítás</h2>


Használat ez OTP a jelszó visszaállításához. Az OTP érvényes számára1 perc</p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (hiba, info) => {
ha (hiba) {
konzol.log (hiba);
 res.status(500).Küld({ üzenet: "Hiba történt az e-mail küldése közben" });
 } más {
konzol.log('Email elküldve: ' + info.response);
 res.status(200).Küld({ üzenet: "Az e-mail sikeresen elküldve" });
 }
 });
};

Ez a kód egy olyan funkciót határoz meg, amely a Nodemailer segítségével OTP-visszaállítással e-mailt küld egy megadott címzettnek. Beállít egy szállítót a saját Gmail-fiókjával és jelszavával.

A Gmail-alkalmazás jelszavának beszerzéséhez meg kell adnia generáljon alkalmazásjelszót a Google-fiókja beállításaiban. Ezután ezt a jelszót fogja használni a szokásos Gmail-jelszó helyett a Nodemailer hitelesítéséhez.

Konfigurálja a kiszolgáló belépési pontot

Hozzon létre egy server.js fájlt a gyökérkönyvtárban, és adja hozzá ezt a kódot:

const expressz = igényelnek('Expressz');
const cors = igényelnek("cors");
const app = express();
const port = 5000;
igényelnek("dotenv").config();
const nodemailer = igényelnek("nodemailer");
const connectDB = igényelnek('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ kiterjedt: igaz }));
app.use (cors());
const userRoutes = igényelnek('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
konzol.log(`A szerver figyel itt http://localhost:${port}`);
});

Ha az ügyfél és a kiszolgáló is be van állítva, futtathatja a fejlesztői kiszolgálókat a jelszófunkciók teszteléséhez.

Egyéni jelszó-visszaállító szolgáltatás létrehozása

A legjobb megoldás a jelszó-visszaállító rendszer létrehozása az alkalmazáshoz és a felhasználókhoz igazítva, még akkor is, ha léteznek fizetős, előre elkészített megoldások. A funkció megtervezésénél figyelembe kell venni a felhasználói élményt és a biztonságot is, mivel a támadások állandó fenyegetést jelentenek.