كيفية التعامل مع سير عمل نسيت كلمة المرور وإعادة تعيينها باستخدام React و Node.js

تلعب أنظمة المصادقة دورًا مهمًا في توفير تجربة مستخدم سلسة وآمنة. يتضمن سير عمل المصادقة عادةً عمليتين: التسجيل وتسجيل الدخول.

مع زيادة عدد الخدمات عبر الإنترنت ، ينشئ الأشخاص حسابات ، ويتطلب كل حساب بيانات اعتماد تسجيل دخول فريدة. ومع ذلك ، فإن هذا يجعل من السهل نسيان أو الخلط بين بيانات اعتماد تسجيل الدخول. لمعالجة هذا الأمر ، يجب أن ينفذ تطبيقك ميزة إعادة تعيين كلمة المرور التي تتيح للمستخدم إعادة تعيين كلمة المرور الخاصة به بشكل ملائم وآمن.

قم بإعداد مشروع React

يمكنك تنفيذ سير عمل إعادة تعيين كلمة المرور بعدة طرق - لا يوجد معيار عالمي يجب أن يتبعه كل تطبيق. بدلاً من ذلك ، يجب عليك تصميم النهج الذي تختاره لتلبية الاحتياجات المحددة لتطبيقك.

يتضمن سير العمل الذي ستتعرف عليه هنا الخطوات التالية:

للبدء، تمهيد سريع لمشروع React. بعد ذلك ، قم بتثبيت Axios ، مكتبة طلبات JavaScript HTTP.

npm تثبيت أكسيوس

يمكنك العثور على رمز المشروع في هذا مستودع جيثب.

قم بإنشاء مكون تسجيل الدخول

في دليل src ، أنشئ ملف المكونات / Login.js ملف وإضافة الكود التالي. ابدأ بتحديد عملية إعادة تعيين كلمة المرور:

يستورد أكسيوس من"أكسيوس";
يستورد رد فعل ، {useState} من"تتفاعل";
يستورد {useContext} من"تتفاعل";
يستورد {RecoveryContext} من"../برنامج";
يستورد"./global.component.css";
يصدّرتقصيروظيفةتسجيل الدخول() {
مقدار ثابت {setPage، setOTP، setEmail} = useContext (RecoveryContext) ؛
مقدار ثابت [userEmail، setUserEmail] = useState (""); 
وظيفةSendOtp() {
لو (البريد الالكتروني للمستخدم) {
 axios.get (` http://localhost: 5000 / check_email؟ البريد الإلكتروني =$ {userEmail}`).ثم((إجابة) => {
لو (الاستجابة. الحالة 200) {
مقدار ثابت OTP = رياضيات.أرضية(رياضيات.عشوائي() * 9000 + 1000);
وحدة التحكم.log (OTP) ؛
 setOTP (OTP) ؛
 setEmail (بريد المستخدم) ؛
 axios.post (" http://localhost: 5000 / send_email ", {
 OTP ،
 المستلم_البريد الإلكتروني: المستخدم البريد الإلكتروني ،
 })
 .ثم(() => تعيين الصفحة ("otp"))
 .يمسك(وحدة التحكم.سجل)؛
 } آخر {
 يُحذًِر("المستخدم بهذا البريد الإلكتروني غير موجود!");
وحدة التحكم.log (response.data.message) ؛
 }}).يمسك(وحدة التحكم.سجل)؛
 } آخر {
 يُحذًِر("رجاءا أدخل بريدك الإلكتروني");
 }}

ينشئ هذا الرمز وظيفة ترسل كلمة مرور لمرة واحدة (OTP) إلى عنوان البريد الإلكتروني للمستخدم. يتحقق أولاً من المستخدم عن طريق التحقق من بريده الإلكتروني في قاعدة البيانات قبل إنشاء كلمة المرور لمرة واحدة وإرسالها. أخيرًا ، يقوم بتحديث واجهة المستخدم بصفحة OTP.

أكمل مكون تسجيل الدخول عن طريق إضافة رمز لتقديم عنصر نموذج تسجيل الدخول JSX:

يعود (


تسجيل الدخول </h2>




 بريد إلكتروني: 
"بريد إلكتروني" القيمة = {userEmail} onChange = {(e) => {setUserEmail (e.target.value)}} />
 كلمة المرور:
"كلمة المرور" />
"يُقدِّم"> تسجيل الدخول </button>
 </form>
"#" onClick = {() => sendOtp ()}>
 هل نسيت كلمة السر
 </a>
 </div>
 );
}

قم بإنشاء مكون التحقق من OTP

للتأكد من صحة الرمز الذي أدخله المستخدم ، تحتاج إلى مقارنته بالرمز المرسل إلى بريده الإلكتروني.

إنشاء ملف المكونات / OTPInput.js ملف وإضافة هذا الرمز:

يستورد React ، {useState ، useContext ، useEffect} من"تتفاعل";
يستورد {RecoveryContext} من"../برنامج";
يستورد أكسيوس من"أكسيوس";
يستورد"./global.component.css";
يصدّرتقصيروظيفةإدخال OTP() {
مقدار ثابت {email، otp، setPage} = useContext (RecoveryContext)؛
مقدار ثابت [OTPinput، setOTPinput] = useState ( "");
وظيفةتحقق من OTP() {
لو (التحليل اللغوي(إدخال OTP) otp) {
 تعيين الصفحة ("إعادة ضبط");
 } آخر {
 يُحذًِر("الرمز الذي أدخلته غير صحيح ، حاول مرة أخرى إعادة إرسال الرابط");
 }
 }

يقوم الكود بإنشاء مكون React حيث يتحقق المستخدمون من رمز OTP الخاص بهم. يتحقق من أن الكود الذي تم إدخاله يطابق الرمز المخزن في كائن السياق. إذا كانت صحيحة ، فإنها تعرض صفحة إعادة تعيين كلمة المرور. على العكس من ذلك ، فإنه يعرض تنبيهًا يحث المستخدم على المحاولة مرة أخرى أو إعادة إرسال كلمة المرور لمرة واحدة.

يمكنك التحقق من الرمز في هذا مخزن التي تنفذ وظيفة لإعادة إرسال OTPs وجهاز ضبط وقت انتهاء الصلاحية لرمز OTP.

أخيرًا ، قم بتصيير عناصر JSX المدخلة.

يعود (


التحقق من البريد الإلكتروني </h3>


لقد أرسلنا رمز التحقق إلى بريدك الإلكتروني. </p>



"نص" القيمة = {OTPinput} onChange = {(e) => {setOTPinput (e.target.value)}} /> 
 VerifyOTP ()}> التحقق من الحساب </button> 
 resendOTP ()}> لملا تتلقى رمز؟ 
 {إبطال؟ إعادة إرسال OTP بتنسيق $ {timerCount}s`: "إعادة إرسال OTP"}
 </a> 
 </form>
 </div>
 );}

قم بإنشاء مكون إعادة تعيين كلمة المرور

إنشاء ملف المكونات / Reset.js ملف وإضافة هذا الرمز:

يستورد React ، {useState ، useContext} من"تتفاعل";
يستورد {RecoveryContext} من"../برنامج";
يستورد أكسيوس من"أكسيوس";
يستورد"./global.component.css";
يصدّرتقصيروظيفةإعادة ضبط() {
مقدار ثابت [password، setPassword] = useState ("");
مقدار ثابت {setPage، email} = useContext (RecoveryContext) ؛
وظيفةتغيير كلمة المرور() {
لو (كلمة المرور) {
يحاول {
 axios.put (" http://localhost: 5000 / تحديث كلمة المرور ", {
 البريد الإلكتروني: البريد الإلكتروني ،
 newPassword: كلمة المرور ،
 }).ثم(() => تعيين الصفحة ("تسجيل الدخول"));
يعود يُحذًِر("تم تغيير كلمة المرور بنجاح ، يرجى تسجيل الدخول!");
 } يمسك (خطأ) {وحدة التحكم.log (خطأ) ؛}}
يعود يُحذًِر("الرجاء إدخال كلمة المرور الجديدة");
 }
يعود (


 تغيير كلمة المرور </h2>




 كلمة المرور الجديدة: 
 اكتب ="كلمة المرور"
 نائب ="..."
 مطلوب =""
 القيمة = {كلمة المرور}
 onChange = {(e) => setPassword (e.target.value)} />
 changePassword ()}> إعادة تعيين كلمة المرور </button>
 </form>
 </div>
 );
}

يعرض هذا الرمز نموذجًا يسمح للمستخدمين بإدخال كلمة مرور جديدة. عندما ينقر المستخدم على إرسال ، سيرسل طلبًا إلى الخادم لتحديث كلمة المرور الخاصة به في قاعدة البيانات. سيتم بعد ذلك تحديث واجهة المستخدم إذا نجح الطلب.

قم بتحديث مكون App.js الخاص بك

قم بإجراء التغييرات أدناه على ملف src / App.js الخاص بك:

يستورد {useState، createContext} من"تتفاعل";
يستورد تسجيل الدخول من"./components/Login";
يستورد إدخال OTP من"./components/OTPInput";
يستورد إعادة ضبط من"./components/Reset";
يستورد"./App.css";
يصدّرمقدار ثابت RecoveryContext = createContext () ،
يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [page، setPage] = useState ("تسجيل الدخول");
مقدار ثابت [email، setEmail] = useState ("");
مقدار ثابت [otp، setOTP] = useState ("");
وظيفةNavigateComponents() {
لو (صفحة "تسجيل الدخول") يعود<تسجيل الدخول />;
لو (صفحة "otp") يعود<إدخال OTP />;
لو (صفحة "إعادة ضبط") يعود<إعادة ضبط />;
 }
يعود (
"عنوان التطبيق"> 
 القيمة = {{page، setPage، otp، setOTP، email، setEmail}}>



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

يحدد هذا الرمز كائن سياق يدير حالة التطبيق ، والذي يتضمن البريد الإلكتروني للمستخدم ، وكود OTP ، والصفحات المختلفة داخل التطبيق. بشكل أساسي ، يجعل كائن السياق من الممكن تمرير الحالات المطلوبة بين المكونات المختلفة - كبديل لاستخدام الخاصيات.

يتضمن أيضًا وظيفة تتعامل مع التنقل في الصفحة بسهولة دون الحاجة إلى إعادة عرض المكونات بالكامل.

قم بإعداد خادم Express.js

باستخدام إعداد العميل ، قم بتكوين خدمة مصادقة خلفية للتعامل مع وظيفة إعادة تعيين كلمة المرور.

للبدء، إنشاء خادم ويب سريع، وتثبيت هذه الحزم:

npm تثبيت cors dotenv nodemailer النمس

التالي، إنشاء قاعدة بيانات MongoDB أو تكوين كتلة MongoDB على السحابة. ثم انسخ سلسلة الاتصال المتوفرة ، وأنشئ ملف ENV في الدليل الجذر ، والصق سلسلة الاتصال.

للإنهاء ، تحتاج إلى تكوين اتصال قاعدة البيانات وتحديد نماذج البيانات لبيانات المستخدم الخاصة بك. استخدم الكود الموجود في هذا المستودع لـ إعداد اتصال قاعدة البيانات و تحديد نماذج البيانات.

تحديد مسارات API

تحتوي خدمة الواجهة الخلفية بشكل مثالي على العديد من المسارات التي تتعامل مع طلبات HTTP للعملاء. في هذه الحالة ، ستحتاج إلى تحديد ثلاثة مسارات لإدارة إرسال البريد الإلكتروني والتحقق من البريد الإلكتروني وطلبات واجهة برمجة تطبيقات تحديث كلمة المرور من عميل React.

أنشئ ملفًا جديدًا يسمى userRoutes.js في الدليل الجذر وأضف الكود التالي:

مقدار ثابت صريح = يتطلب('يعبر');
مقدار ثابت جهاز التوجيه = صريح. جهاز التوجيه () ؛
مقدار ثابت userControllers = يتطلب("../controllers/userControllers");
router.get ('/تفقد البريد الإلكتروني'، userControllers.checkEmail) ؛
router.put ('/تطوير كلمة السر'، userControllers.updatePassword) ؛
router.post ('/ارسل بريد الكتروني'، userControllers.sendEmail) ؛
وحدة.exports = جهاز التوجيه ؛

وحدات تحكم لمسارات API

المتحكمون مسؤولون عن معالجة طلبات العملاء HTTP. بمجرد أن يقدم العميل طلبًا إلى مسار API معين ، يتم استدعاء وظيفة وحدة التحكم وتنفيذها لمعالجة الطلب وإرجاع الاستجابة المناسبة.

إنشاء ملف وحدات تحكم / userControllers.js ملف وإضافة الرمز أدناه.

استخدم الكود الموجود في هذا المستودع لـ تحديد وحدات التحكم للتحقق من البريد الإلكتروني وتحديث كلمة المرور طرق API.

ابدأ بتعريف وحدة التحكم في إرسال البريد الإلكتروني:

الصادرات.sendEmail = (مطلوب ، الدقة) => {
مقدار ثابت الناقل = nodemailer.createTransport ({
 خدمة: "gmail",
 يؤمن: حقيقي,
 المصادقة: {
 المستخدم: process.env. بريدي الالكتروني،
 تمرير: process.env. APP_PASSWORD ،
 },
 });
مقدار ثابت {Receient_email، OTP} = req.body؛
مقدار ثابت mailOptions = {
من: process.env. بريدي الالكتروني،
 to: المستلم_البريد الإلكتروني ،
 موضوع: "إعادة تعيين كلمة المرور",
 لغة البرمجة: `


استعادة كلمة المرور </h2>


يستخدم هذا OTP لإعادة تعيين كلمة المرور الخاصة بك. OTP صالح ل1 دقيقة </p>

$ {OTP} </h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions، (error، info) => {
لو (خطأ) {
وحدة التحكم.log (خطأ) ؛
 res.status (500).يرسل({ رسالة: "حدث خطأ أثناء إرسال البريد الإلكتروني" });
 } آخر {
وحدة التحكم.سجل('أرسل البريد الإلكتروني: ' + info.response) ؛
 res.status (200).يرسل({ رسالة: "تم إرسال البريد الإلكتروني بنجاح" });
 }
 });
};

يحدد هذا الرمز وظيفة تستخدم Nodemailer لإرسال بريد إلكتروني مع إعادة تعيين OTP إلى مستلم محدد. يقوم بإعداد ناقل باستخدام حساب Gmail الخاص بك وكلمة المرور.

للحصول على كلمة مرور تطبيق Gmail ، تحتاج إلى ذلك إنشاء كلمة مرور التطبيق في إعدادات حساب Google الخاص بك. ستستخدم بعد ذلك كلمة المرور هذه بدلاً من كلمة مرور Gmail العادية لمصادقة Nodemailer.

تكوين نقطة دخول الخادم

أنشئ ملف server.js في الدليل الجذر وأضف هذا الرمز:

مقدار ثابت صريح = يتطلب('يعبر');
مقدار ثابت كور = يتطلب("كورس");
مقدار ثابت التطبيق = صريح () ؛
مقدار ثابت المنفذ = 5000;
يتطلب("dotenv") .config () ؛
مقدار ثابت nodemailer = يتطلب("nodemailer");
مقدار ثابت connectDB = يتطلب("./utils/dbconfig");
connectDB () ،
app.use (express.json ()) ؛
app.use (express.urlencoded ({ ممتد: حقيقي }));
app.use (cors ()) ؛
مقدار ثابت userRoutes = يتطلب("./routes/userRoutes");
app.use ('/'، userRoutes) ؛
app.listen (المنفذ ، () => {
وحدة التحكم.سجل("الخادم يستمع عند http://localhost:$ {منفذ}`);
});

مع إعداد كل من العميل والخادم ، يمكنك تشغيل خوادم التطوير لاختبار وظيفة كلمة المرور.

بناء خدمة إعادة تعيين كلمة المرور المخصصة

يعد إنشاء نظام إعادة تعيين كلمة المرور من خلال تكييفه مع تطبيقك ومستخدميه هو أفضل نهج ، على الرغم من وجود حلول مسبقة الدفع مدفوعة الأجر. أثناء تصميم هذه الميزة ، يجب أن تأخذ في الاعتبار تجربة المستخدم والأمان ، لأن الهجمات تشكل تهديدًا دائمًا.