Vue Academy · درس

أنماط المصادقة الآمنة

تخزين الرموز (في الذاكرة مقابل localStorage مقابل ملف تعريف ارتباط httpOnly)، والتحديث الصامت، وتسجيل الخروج عند إغلاق التبويب

الدرس 4 من 413 خطوة

أنماط المصادقة الآمنة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

الرموز ومكان تخزينها

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

مشكلة localStorage

يُعد تخزين الرموز في localStorage مريحًا لكنه خطير؛ إذ يمكن لأي نص برمجي تحقنه XSS قراءته وتهريب الرمز. تجنب وضع بيانات الاعتماد هناك.

// AVOID
localStorage.setItem("token", accessToken);

رمز الوصول في الذاكرة

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

import { ref } from "vue";

export const accessToken = ref(null);

رمز التحديث في ملف تعريف ارتباط httpOnly

يُخزّن رمز التحديث في ملف تعريف ارتباط HttpOnly وSecure وSameSite. ولا تستطيع JavaScript قراءته، لذلك لا يمكن لـ XSS سرقته، كما لا يرسله المتصفح إلا إلى نقطة نهاية المصادقة الخاصة بك.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

إرفاق رمز الوصول

يضيف معترض طلبات Axios رمز الوصول الموجود في الذاكرة إلى ترويسة Authorization مع كل استدعاء.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

اكتشاف انتهاء الصلاحية: 401

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

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

تحديث الرمز

عند تلقي 401، استدعِ نقطة نهاية التحديث. يرسل المتصفح ملف تعريف ارتباط التحديث httpOnly تلقائيًا (withCredentials)، ويعيد الخادم رمز وصول جديدًا.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

إعادة محاولة الطلب الأصلي

بعد التحديث، أعد إرسال الطلب الأصلي الذي فشل باستخدام الرمز الجديد، حتى لا يلاحظ المستخدم أي شيء.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

تجنّب ازدحام عمليات التحديث

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

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

تسجيل الخروج

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

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

الدمج مع الحماية من CSRF

بما أن ملف تعريف ارتباط التحديث يُرسل تلقائيًا، فاحمِ نقطة النهاية هذه باستخدام SameSite ورموز CSRF، تمامًا مثل مسارات المصادقة الأخرى المعتمدة على ملفات تعريف الارتباط.

تحقق سريع

أين ينبغي تخزين رمز الوصول ورمز التحديث كلٌّ على حدة؟

أجب عليها في الدرس التفاعلي

مراجعة

خزّن رمز الوصول في مرجع موجود في الذاكرة (وليس في localStorage مطلقًا)، وخزّن رمز التحديث في ملف تعريف ارتباط HttpOnly. يضيف معترض الطلب رمز Bearer، بينما يلتقط معترض الاستجابة الحالة 401، ويستدعي نقطة نهاية التحديث، ويحدّث الرمز، ثم يعيد محاولة الطلب الأصلي، مع إزالة تكرار عمليات التحديث المتزامنة ودمج ذلك مع وسائل الحماية من CSRF.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «أنماط المصادقة الآمنة» مجاني؟

نعم — نص درس «أنماط المصادقة الآمنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «أنماط المصادقة الآمنة»؟

تخزين الرموز (في الذاكرة مقابل localStorage مقابل ملف تعريف ارتباط httpOnly)، والتحديث الصامت، وتسجيل الخروج عند إغلاق التبويب تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «أنماط المصادقة الآمنة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy