אל תשאיר את המבקרים באתר שלך תלויים - תן להם לאפס את הסיסמה שלהם אם הם שכחו אותה.

מערכות אימות ממלאות תפקיד מכריע במתן חווית משתמש חלקה ומאובטחת. זרימת עבודה של אימות כוללת בדרך כלל שני תהליכים: הרשמה והתחברות.

ככל שמספר השירותים המקוונים גדל, אנשים יוצרים חשבונות, וכל חשבון דורש אישורי התחברות ייחודיים. עם זאת, זה מקל לשכוח או לבלבל את אישורי הכניסה. כדי לטפל בזה, האפליקציה שלך צריכה ליישם תכונת איפוס סיסמה המאפשרת למשתמש לאפס את הסיסמה שלו בצורה נוחה ומאובטחת.

הגדר את פרויקט React

אתה יכול ליישם זרימת עבודה לאיפוס סיסמה בדרכים שונות - אין תקן אוניברסלי שכל יישום צריך לפעול לפיו. במקום זאת, עליך להתאים את הגישה שאתה בוחר כדי לענות על הצרכים הספציפיים של היישום שלך.

זרימת העבודה שתלמד עליה כאן כוללת את השלבים הבאים:

להתחיל, אתחול במהירות לפרויקט React. לאחר מכן, התקן Axios, ספריית בקשות HTTP של JavaScript.

npm להתקין אקסיות

אתה יכול למצוא את הקוד של הפרויקט בזה מאגר GitHub.

צור רכיב התחברות

בספריית src, צור חדש רכיבים/Login.js קובץ והוסיפו את הקוד הבא. התחל בהגדרת תהליך איפוס הסיסמה:

יְבוּא אקסיוס 





instagram viewer


מ"אקסיות";
יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא { useContext } מ"לְהָגִיב";
יְבוּא { RecoveryContext } מ"../אפליקציה";
יְבוּא"./global.component.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההתחברות() {
const { setPage, setOTP, setEmail } = useContext (RecoveryContext);
const [userEmail, setUserEmail] = useState(""); 


פוּנקצִיָהsendOtp() {
אם (דוא"ל משתמש) {
 axios.get(` http://localhost: 5000/check_email? אימייל=${userEmail}`).לאחר מכן((תְגוּבָה) => {
אם (תגובה.סטטוס 200) {
const OTP = מתמטיקה.קוֹמָה(מתמטיקה.random() * 9000 + 1000);
לְנַחֵם.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/send_email", {
 OTP,
 recipient_email: userEmail,
 })
 .לאחר מכן(() => setPage("אוטפ"))
 .לתפוס(לְנַחֵם.עֵץ);
 } אַחֵר {
 עֵרָנִי("המשתמש עם האימייל הזה לא קיים!");
לְנַחֵם.log (response.data.message);
 }}).לתפוס(לְנַחֵם.עֵץ);
 } אַחֵר {
 עֵרָנִי("אנא הכנס את המייל שלך");
 }}

קוד זה יוצר פונקציה ששולחת סיסמה חד פעמית (OTP) לכתובת הדוא"ל של המשתמש. תחילה הוא מאמת את המשתמש על ידי בדיקת הדוא"ל שלו במסד הנתונים לפני יצירה ושליחה של ה-OTP. לבסוף, הוא מעדכן את ממשק המשתמש עם דף ה-OTP.

השלם את רכיב הכניסה על ידי הוספת קוד כדי להציג את רכיב הטופס JSX לכניסה:

לַחֲזוֹר (


כניסה</h2>







 אימייל: 
"אימייל" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />


 סיסמה:
"סיסמה" />

צור רכיב אימות OTP

כדי להבטיח את תוקפו של קוד שהוזן על ידי משתמש, עליך להשוות אותו לקוד שנשלח למייל שלו.

ליצור חדש רכיבים/OTPInput.js קובץ והוסף את הקוד הזה:

יְבוּא React, { useState, useContext, useEffect } מ"לְהָגִיב";
יְבוּא { RecoveryContext } מ"../אפליקציה";
יְבוּא אקסיוס מ"אקסיות";
יְבוּא"./global.component.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהOTPInput() {
const { email, otp, setPage } = useContext (RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
פוּנקצִיָהverifyOTP() {
אם (parseInt(OTPinput) otp) {
 setPage("אִתחוּל");
 } אַחֵר {
 עֵרָנִי("הקוד שהזנת שגוי, נסה שוב שלח את הקישור מחדש");
 }
 }

הקוד יוצר רכיב React שבו משתמשים מאמתים את קוד ה-OTP שלהם. הוא בודק שהקוד שהוזן תואם לזה המאוחסן באובייקט ההקשר. אם זה חוקי, הוא מציג את דף איפוס הסיסמה. לעומת זאת, הוא מציג התראה המבקשת מהמשתמש לנסות שוב או לשלוח שוב את ה-OTP.

אתה יכול לבדוק את הקוד בזה מאגר שמיישמת פונקציה לשליחת OTP מחדש וטיימר תפוגה עבור קוד ה-OTP.

לבסוף, רנדר את רכיבי הקלט JSX.

לַחֲזוֹר (


אימות דוא"ל</h3>




שלחנו קוד אימות למייל שלך.</p>




"טֶקסט" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} />

צור את רכיב איפוס הסיסמה

ליצור חדש רכיבים/Reset.js קובץ והוסף את הקוד הזה:

יְבוּא תגובה, {useState, useContext} מ"לְהָגִיב";
יְבוּא { RecoveryContext } מ"../אפליקציה";
יְבוּא אקסיוס מ"אקסיות";
יְבוּא"./global.component.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאִתחוּל() {
const [סיסמה, setPassword] = useState("");
const { setPage, email } = useContext (RecoveryContext);


פוּנקצִיָהשנה סיסמא() {
אם (סיסמה) {
לְנַסוֹת {
 axios.put(" http://localhost: 5000/עדכון-סיסמה", {
 מייל: מייל,
 סיסמה חדשה: סיסמה,
 }).לאחר מכן(() => setPage("התחברות"));


לַחֲזוֹר עֵרָנִי("הסיסמה השתנתה בהצלחה, אנא התחבר!");
 } לתפוס (שגיאה) {לְנַחֵם.log (שגיאה);}}
לַחֲזוֹר עֵרָנִי("אנא הכנס את הסיסמה החדשה שלך");
 }
לַחֲזוֹר (


 שנה סיסמה </h2>






 סיסמה חדשה: 
 סוג="סיסמה"
 מציין מיקום="..."
 נדרש=""
 value={סיסמה}
 onChange={(e) => setPassword (e.target.value)} />

קוד זה יוצר טופס המאפשר למשתמשים להזין סיסמה חדשה. כאשר המשתמש ילחץ על שלח, הוא ישלח בקשה לשרת לעדכן את הסיסמה שלו במסד הנתונים. לאחר מכן, הוא יעדכן את ממשק המשתמש אם הבקשה תצליח.

עדכן את רכיב App.js שלך

בצע את השינויים למטה בקובץ src/App.js שלך:

יְבוּא { useState, createContext } מ"לְהָגִיב";
יְבוּא התחברות מ"./components/Login";
יְבוּא OTPInput מ"./components/OTPInput";
יְבוּא אִתחוּל מ"./components/Reset";
יְבוּא"./App.css";
יְצוּאconst RecoveryContext = createContext();
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [page, setPage] = useState("התחברות");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");


פוּנקצִיָהNavigateComponents() {
אם (עמוד "התחברות") לַחֲזוֹר<התחברות />;
אם (עמוד "אוטפ") לַחֲזוֹר<OTPInput />;
אם (עמוד "אִתחוּל") לַחֲזוֹר<אִתחוּל />;
 }
לַחֲזוֹר (
"כותרת אפליקציה"> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



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

קוד זה מגדיר אובייקט הקשר המנהל את מצב האפליקציה, הכולל את האימייל של המשתמש, קוד ה-OTP והדפים השונים בתוך האפליקציה. בעיקרו של דבר, אובייקט ההקשר מאפשר להעביר את המצבים הנדרשים בין רכיבים שונים - חלופה לשימוש באביזרים.

הוא כולל גם פונקציה שמטפלת בניווט בעמודים בקלות ללא צורך בעיבוד מחדש של רכיבים שלמים.

הגדר שרת Express.js

עם הגדרת הלקוח, הגדר שירות אימות עורפי כדי לטפל בפונקציונליות איפוס הסיסמה.

להתחיל, ליצור שרת אינטרנט Express, והתקן את החבילות הבאות:

npm להתקין את cors dotenv nodemailer נמייה

הַבָּא, צור מסד נתונים MongoDB אוֹ להגדיר אשכול MongoDB בענן. לאחר מכן העתק את מחרוזת החיבור שסופקה, צור קובץ ENV בספריית הבסיס והדבק את מחרוזת החיבור.

לסיום, עליך להגדיר את חיבור מסד הנתונים ולהגדיר את דגמי הנתונים עבור נתוני המשתמש שלך. השתמש בקוד במאגר זה כדי הגדר את חיבור מסד הנתונים ו להגדיר את מודל הנתונים.

הגדר את נתיבי ה-API

לשירות אחורי יש באופן אידיאלי מספר מסלולים המטפלים בבקשות HTTP של לקוחות. במקרה זה, תצטרך להגדיר שלושה מסלולים שינהלו את בקשות שליחת הדואר האלקטרוני, אימות הדואר האלקטרוני ועדכון סיסמת ה-API מלקוח React.

צור קובץ חדש בשם userRoutes.js בספריית השורש והוסף את הקוד הבא:

const express = לִדרוֹשׁ('אֶקְסְפּרֶס');
const נתב = אקספרס. נתב();
const userControllers = לִדרוֹשׁ('../controllers/userControllers');
router.get('/בדוק דואר אלקטרוני', userControllers.checkEmail);
router.put('/עדכן סיסמה', userControllers.updatePassword);
router.post('/שלח אימייל', userControllers.sendEmail);
מודול.exports = נתב;

בקרים לנתיבי API

בקרים אחראים לעיבוד בקשות HTTP של לקוחות. ברגע שלקוח מגיש בקשה למסלול API מסוים, פונקציית בקר מופעלת ומבוצעת כדי לעבד את הבקשה ולהחזיר תגובה מתאימה.

ליצור חדש controllers/userControllers.js קובץ והוסף את הקוד למטה.

השתמש בקוד במאגר זה כדי להגדיר בקרים עבור אימות הדוא"ל ועדכון-סיסמה מסלולי API.

התחל על ידי הגדרת בקר שליחת הדואר האלקטרוני:

exports.sendEmail = (דרישה, מילואים) => {
const transporter = nodemailer.createTransport({
 שֵׁרוּת: 'gmail',
 לבטח: נָכוֹן,
 אישור: {
 משתמש: process.env. האימייל שלי,
 לעבור: process.env. APP_PASSWORD,
 },
 });
const { recipient_email, OTP } = req.body;


const mailOptions = {
מ: process.env. האימייל שלי,
 אל: recipient_email,
 נושא: 'איפוס סיסמא',
 html: `


שחזור סיסמה</h2>




להשתמש זֶה OTP כדי לאפס את הסיסמה שלך. OTP חוקי ל1 דקה</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (שגיאה, מידע) => {
אם (שגיאה) {
לְנַחֵם.log (שגיאה);
 res.status(500).לִשְׁלוֹחַ({ הוֹדָעָה: "אירעה שגיאה בעת שליחת האימייל" });
 } אַחֵר {
לְנַחֵם.עֵץ('הדוא"ל נשלח: ' + info.response);
 res.status(200).לִשְׁלוֹחַ({ הוֹדָעָה: "אימייל נשלח בהצלחה" });
 }
 });
};

קוד זה מגדיר פונקציה המשתמשת ב-Nodemailer לשליחת אימייל עם איפוס OTP לנמען שצוין. זה מגדיר טרנספורטר באמצעות חשבון Gmail וסיסמה משלך.

כדי לקבל את סיסמת אפליקציית Gmail שלך, אתה צריך ליצור סיסמת אפליקציה בהגדרות חשבון Google שלך. לאחר מכן תשתמש בסיסמה זו במקום בסיסמת Gmail הרגילה שלך לאימות ה-Nodemailer.

הגדר את נקודת הכניסה לשרת

צור קובץ server.js בספריית השורש והוסף את הקוד הזה:

const express = לִדרוֹשׁ('אֶקְסְפּרֶס');
const cors = לִדרוֹשׁ('קורס');
const app = express();
const יציאה = 5000;
לִדרוֹשׁ('dotenv').config();
const nodemailer = לִדרוֹשׁ('nodemailer');
const connectDB = לִדרוֹשׁ('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ מורחב: נָכוֹן }));
app.use (cors());
const userroutes = לִדרוֹשׁ('./routes/userRoutes');
app.use('/', UserRoutes);
app.listen (פורט, () => {
לְנַחֵם.עֵץ(`השרת מאזין ל http://localhost:${port}`);
});

עם הגדרת הלקוח והשרת, אתה יכול להפעיל את שרתי הפיתוח כדי לבדוק את פונקציונליות הסיסמה.

בניית שירות איפוס סיסמה מותאם אישית

יצירת מערכת לאיפוס סיסמה על ידי התאמתה לאפליקציה שלך ולמשתמשים בה היא הגישה הטובה ביותר, למרות שקיימים פתרונות מובנים מראש בתשלום. בעת תכנון תכונה זו, עליך לקחת בחשבון הן חווית משתמש והן אבטחה, שכן התקפות מהוות איום מתמיד.