كيفية إنشاء قائمة تحقق من كلمة المرور باستخدام Next.js

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

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

تعرف على كيفية تنفيذ قائمة التحقق من كلمة المرور باستخدام Next.js.

لماذا تستخدم قائمة التحقق من كلمة المرور؟

هناك العديد من الأسباب التي قد تجعلك ترغب في استخدام قائمة التحقق من كلمة المرور.

أولاً ، يمكن أن تساعدك على التأكد من أن كلمات مرور المستخدمين قوية وفريدة من نوعها. من خلال وجود قائمة مرجعية بالمتطلبات ، يمكنك التأكد من أن كل كلمة مرور تلبي معيارًا معينًا.

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

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

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

كيفية إنشاء قائمة التحقق من كلمة المرور

توجد طريقتان لإنشاء قائمة التحقق من كلمة المرور في Next.js. يمكنك إما استخدام الميزات المضمنة أو يمكنك استخدام وحدة خارجية.

ما سوف تحتاجه

لإنشاء قائمة التحقق من كلمة المرور في Next.js ، ستحتاج إلى ما يلي:

• تم تثبيت Node.js
• محرر نصوص
• مشروع Next.js

الطريقة الأولى: استخدام الميزات المضمنة

يأتي Next.js مع ميزات مضمنة مثل الخطافات والسياق. هناك أنواع مختلفة من الخطافات يمكنك استخدامها لإنشاء قائمة تحقق لكلمات المرور.

أولاً ، قم بإنشاء ملف جديد في تطبيق Next.js الخاص بك وقم بتسميته passwordChecklist.js. في هذا الملف ، يمكنك أخذ إدخال كلمة المرور من المستخدمين ، ويمكنك التحقق مما إذا كانت كلمة المرور تفي بالمتطلبات.

يستورد رد فعل ، {useState} من 'تتفاعل'
وظيفةكلمة المرور() {
 const [password، setPassword] = useState ('')
مقدار ثابت [error، setError] = useState (خطأ شنيع)
وظيفةالتعامل مع التغيير(ه) {
ضبط كلمة السر(ه.هدف.قيمة)
 }
وظيفةمقبض(ه) {
ه.منع افتراضي()
// متطلبات كلمة المرور
مقدار ثابت المتطلبات = [
// يجب ألا يقل عن 8 أحرف
 طول كلمة المرور >= 8,
// يجب أن يحتوي على حرف واحد كبير على الأقل
 /[A-Z]/.امتحان(كلمة المرور)،
// يجب أن يحتوي على حرف واحد صغير على الأقل
 /[a-z]/.امتحان(كلمة المرور)،
// يجب أن يحتوي على رقم واحد على الأقل
 /\d/.امتحان(كلمة المرور)
 ]
// إذا تم استيفاء جميع المتطلبات ، فإن كلمة المرور صالحة
مقدار ثابت isValid = requirements. every (قيمة منطقية)
 إذا (غير صالح) {
 يُحذًِر('كلمة المرور صالحة!')
 } آخر {
 setError (حقيقي)
 }
 }
يعود (
<النموذج onSubmit = {handleSubmit}>
<ملصق>
 كلمة المرور:
<مدخل
 اكتب ="كلمة المرور"
 القيمة = {كلمة المرور}
 onChange = {handleChange}
 />
</label>
<نوع الإدخال ="يُقدِّم" القيمة ="يُقدِّم" />
 {خطأ &&<ص>كلمة المرور غير صالحة!</ ص>}
</form>
 )
}
يصدّرتقصير كلمة المرور

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

بعد ذلك ، تحتاج إلى إنشاء وظيفة للتعامل مع إرسال النموذج. ستمنع هذه الوظيفة الإجراء الافتراضي للنموذج (وهو إرسال النموذج) وستتحقق مما إذا كانت كلمة المرور تفي بالمتطلبات.

متطلبات كلمة المرور هي أنه يجب أن:

• تتكون من ثمانية أحرف على الأقل
• تحتوي على حرف كبير واحد على الأقل
• تحتوي على حرف صغير واحد على الأقل
• تحتوي على رقم واحد على الأقل

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

الطريقة الثالثة: استخدام وحدة قائمة التحقق من كلمة المرور

هناك طريقة أخرى لإنشاء قائمة التحقق من كلمة المرور في Next.js وهي استخدام الامتداد رد فعل كلمة المرور قائمة التحقق وحدة. هذه الوحدة سهلة الاستخدام ، وتحتوي على الكثير من الميزات.

أولاً ، قم بتثبيت الوحدة باستخدام الأمر التالي:

npm ثَبَّتَ تتفاعل-كلمة المرور-قائمة تدقيق --يحفظ

ثم قم باستيراد الوحدة النمطية في ملف passwordChecklist.js ملف:

يستورد رد فعل ، {useState} من "تتفاعل"
يستورد كلمة المرور من "رد فعل-كلمة المرور-قائمة التحقق"
مقدار ثابت التطبيق = () => {
 const [password، setPassword] = useState ("")
يعود (
<استمارة>
<ملصق>كلمة المرور:</label>
<نوع الإدخال ="كلمة المرور" عند التغيير = {e => setPassword (e.target.value)} />
<كلمة المرور
 القواعد = {["طول دقيقة","خاص","رقم","عاصمة"]}
 minLength = {5}
 القيمة = {كلمة المرور}
 />
</form>
 )
}
يصدّرتقصير برنامج

يمرر هذا الرمز الدعائم minLength ، و specialChar ، و number ، و capital إلى ملف كلمة المرور عنصر. سيستخدم المكون هذه الخاصيات للتحقق مما إذا كانت كلمة المرور تفي بالمتطلبات.

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

يستورد رد فعل ، {useState} من "تتفاعل"
يستورد كلمة المرور من "رد فعل-كلمة المرور-قائمة التحقق"
مقدار ثابت التطبيق = () => {
 const [password، setPassword] = useState ("")
يعود (
<استمارة>
<ملصق>كلمة المرور:</label>
<نوع الإدخال ="كلمة المرور" عند التغيير = {e => setPassword (e.target.value)} />
<كلمة المرور
 القواعد = {["طول دقيقة", "خاص", "رقم", "عاصمة"]}
 minLength = {5}
 القيمة = {كلمة المرور}
 الرسائل = {{
 طول دقيقة: "لا كونتراسيñأ تيني مáق من 8 caracteres.",
 خاص "لا كونتراسيña tiene caracteres على وجه الخصوص.",
 رقم: "لا كونتراسيña tiene un núميرو.",
 عاصمة: "لا كونتراسيña tiene una letra قدúلوح الكتف.",
 مباراة: "لاس كونتراسيñكمصادفة.",
 }}
 />
</form>
 )
}
يصدّرتقصير برنامج

في الكود أعلاه ، فإن ملف رسائل الدعامة تخزن رسائل خطأ بديلة. سيعرض المكون هذه الرسائل عندما لا تفي كلمة المرور بالمتطلبات.

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

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

تحسين أمان المستخدم من خلال قائمة التحقق من كلمة المرور

كلمة المرور القوية هي مفتاح الأمان على الإنترنت. من المهم أن يكون لديك كلمة مرور قوية وفريدة من نوعها لكل حساب على الإنترنت. باستخدام قائمة التحقق من كلمة المرور ، يمكنك التأكد من أن كل كلمة مرور تلبي معيارًا معينًا.

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