تجربة عملية لتسجيل الدخول وأمان الجلسات مع Gammal Tech

ابدأ بمشروع تدريب جاهز ومصرح به

أكمل تجربة المشروع الأول قبل هذه الخطوة: حسابك الفردي الموثق، ودومين HTTPS مصرح به ومسجل، وSDK الرسمي محملا مرة واحدة قبل ملف التطبيق. توضع الأمثلة التالية داخل صفحة التدريب نفسها، وتعتمد على وجود الكائن الموثق GammalTech.

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

راجع وصف دوال SDK الرسمي، واجعل الكود محدودا بما يسمح لك بشرح كل حدث ينفذ بعد الضغط على زر.

افصل بين ثلاث ملاحظات مختلفة

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

تشمل الدوال الموثقة isLoggedIn() وonAuth(onIn, onOut) وverify(). لا يحدد الدليل المنشور شكل القيمة التي تعيدها Promise الخاصة بـ verify()، لذلك لا يقرأ المثال حقولا مخترعة مثل result.valid. بعد العملية يحدث حالة SDK المعروضة، ولا يعتبر اكتمال Promise وحده إذنا لفتح سجل أو تسليم منتج.

توضح إرشادات OWASP للجلسات حساسية بيانات الجلسة. تستطيع فهم المسار دون طباعتها أو إضافتها إلى رابط.

أضف ثلاثة أزرار صريحة

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

<p id="auth-state" role="status" aria-live="polite">
  Checking sign-in state…
</p>
<p id="action-message" role="status" aria-live="polite"></p>
<button id="sign-in" type="button">Sign in</button>
<button id="check-session" type="button">Check session</button>
<button id="sign-out" type="button">Sign out</button>

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

اعرض الحالة دون كشف بيانات الجلسة

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

const state = document.getElementById("auth-state");
const message = document.getElementById("action-message");
const buttons = ["sign-in", "check-session", "sign-out"]
  .map(id => document.getElementById(id));
let busy = false;
function render() {
  state.textContent = GammalTech.isLoggedIn()
    ? "SDK reports signed in for this tab."
    : "SDK reports signed out for this tab.";
}
async function perform(task) {
  if (busy) return;
  busy = true;
  buttons.forEach(button => { button.disabled = true; });
  message.textContent = "Working…";
  try {
    await task();
    render();
    message.textContent = "Action completed. Read the tab state.";
  } catch {
    message.textContent = "Unable to finish. Please try again later.";
  } finally {
    busy = false;
    buttons.forEach(button => { button.disabled = false; });
  }
}
render();

أضف توصيل الأحداث مباشرة بعد الجزء السابق:

buttons[0].addEventListener("click", () =>
  perform(() => GammalTech.login()));
buttons[1].addEventListener("click", () =>
  perform(() => GammalTech.verify()));
buttons[2].addEventListener("click", () =>
  perform(() => GammalTech.logout()));
GammalTech.onAuth(render, render).catch(() => {
  message.textContent = "Sign-in state is unavailable. Try again later.";
});

يحدث استدعاء login() مباشرة من ضغطة المستخدم عبر perform. يتجاهل المثال التوكن المعاد عمدا ولا يطبع تفاصيل الاستثناء. تعطيل الأزرار مؤقتا لتنظيم الواجهة فقط، وليس للتحقق من الصلاحيات. يحتوي SDK على سلوك إعادة محاولة للشبكة؛ لا تضف حلقة تكرر استدعاء الدخول أو العمليات.

نفذ حالات القبول وسجل ما حدث

سجل هل يؤدي الإلغاء إلى رفض العملية أم يبقي الحالة دون تغيير. لا يحدد الدليل كل طريقة لتمثيل الإلغاء، فلا تشترط رسالة خطأ لم يعد بها SDK. اكتب «لم يختبر» أمام الحالة التي لم تنفذها.

اختبر فهما شائعا يحتاج إلى تصحيح

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

من الأخطاء الشائعة عرض نتيجة getToken() لتشخيص حالة غير واضحة. تجنب هذا الاختصار؛ تحتاج التجربة إلى وصف الحالة لا إلى كشف بياناتها السرية. يمكن لصور الشرح وملفات طلبات الشبكة أن تصل إلى أشخاص خارج بيئة التعلم.

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

انه التجربة بتحديد واضح لحدودها

اكتب: «تعرض هذه الصفحة دوال الجلسة الموثقة وطريقة التعامل مع الحالة. لا تقرر من يدير التطبيق أو يغير سعرا أو يحصل على منتج مدفوع». أضف شرحا لسبب عدم كفاية زر مخفي أو قيمة يستطيع المستخدم تعديلها لاتخاذ هذه القرارات.

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

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

أسئلة شائعة

لماذا لا نعرض التوكن لإثبات نجاح الدخول؟

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

هل تسمح verify() للواجهة بفتح ميزة مدفوعة؟

فحص الجلسة والاستحقاق المدفوع سؤالان مختلفان. لا يفسر هذا المثال نتيجة غير موثقة، ولا يستخدم حالة المتصفح دليلا موثوقا للدفع أو الصلاحيات.