ما هو تدفق المصادقة؟

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

كيف يعمل في رد الفعل؟

في React، عندما تريد التعامل مع مصادقة المستخدم، فإنك عادةً ما تتفاعل مع خادم خلفي يتولى المهام الثقيلة. وإليك كيفية العمل عادةً:

1. نقاط نهاية التسجيل وتسجيل الدخول

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

2. الرموز: رمز الوصول ورمز التحديث

بعد تسجيل الدخول الناجح، يرسل الخادم رمزين مميزين مهمين:

• رمز الوصول:

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

• رمز التحديث:

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

3. تخزين الرموز في المتصفح

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

• التخزين المحلي: هذه ميزة في متصفحات الويب تسمح لك بتخزين البيانات (مثل الرموز المميزة) في متصفح المستخدم.
  • طريقة setItem(): يستخدم لتخزين البيانات. على سبيل المثال، يمكنك تخزين رمز الوصول ورمز التحديث باستخدام شيء مثل localStorage.setItem('accessToken', tokenValue).
  • طريقة getItem(): يستخدم هذا لاسترداد البيانات المخزنة. على سبيل المثال، يمكنك الحصول على رمز الوصول المخزن باستخدام شيء مثل localStorage.getItem('accessToken').

4. تقديم الطلبات باستخدام رمز الوصول

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

5. التعامل مع الرموز منتهية الصلاحية

• انتهاء صلاحية رمز الوصول: إذا استجاب الخادم بخطأ 401، فهذا يعني أن رمز الوصول قد انتهت صلاحيته. سيستخدم التطبيق بعد ذلك رمز التحديث لطلب رمز وصول جديد.

• انتهاء صلاحية رمز التحديث: إذا انتهت صلاحية رمز التحديث أيضًا (وهو ما قد يحدث بعد فترة طويلة)، فسوف يستجيب الخادم مرة أخرى بخطأ 401. في هذه المرحلة، سيقوم التطبيق بإعادة توجيه المستخدم إلى صفحة تسجيل الدخول، ويطلب منه تسجيل الدخول مرة أخرى للحصول على رموز جديدة.

6. إعادة إرسال الطلب الفاشل

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

ملخص

• تدفق المصادقة: هذه هي الطريقة التي يؤكد بها التطبيق هويتك ويمنحك الوصول إلى الميزات.
• رمز الوصول: مفتاح قصير المدى للوصول إلى الموارد في التطبيق. تنتهي صلاحيته بسرعة.
• تحديث الرمز: مفتاح احتياطي طويل الأمد للحصول على رمز وصول جديد عند انتهاء صلاحية الرمز القديم.
• التخزين المحلي: طريقة المتصفح لتخزين هذه الرموز المميزة على جهاز المستخدم.
• رأس التفويض: حيث يتم تضمين رمز الوصول في الطلبات المقدمة إلى الخادم.
• خطأ 401: إشارة إلى انتهاء صلاحية الرمز المميز وأن التطبيق بحاجة إلى اتخاذ إجراء (إما تحديث الرمز المميز أو مطالبة المستخدم بتسجيل الدخول مرة أخرى).

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