حسابات المستخدمين وتسجيل الدخول

الرسالة التي تغيّر كل شيء

بعد أسبوع من النشر، يتلقى توم الملاحظة الأكثر تكرارًا. لينا، تلميذة في الصف الأول الإعدادي، تكتب له: «أستاذ، أشّرت كل عاداتي على حاسوب مركز التوثيق، وفي المساء على هاتفي، كان كل شيء قد اختفى!». يفهم توم فورًا: لقد اختار التخزين المحلي في الفصل 3، وlocalStorage يحفظ البيانات في متصفح كل جهاز. حاسوب مركز التوثيق وهاتف لينا عالمان منفصلان لا يتحدثان. ولكي يتبع التطبيق لينا في كل مكان، يجب أن يستطيع التعرف عليها — والتعرف على شخص ما، على الويب، يسمى حساب مستخدم.

تذكّر: في الفصل 3، كان «حساب المستخدم» ضمن قائمة الكلمات الفخ الممنوعة من نسختك الأولى. لم يكن ذلك منعًا نهائيًا، بل مسألة توقيت. توم بنى أولًا، ونشر، وجمع ملاحظات حقيقية. الآن لم تعد الحاجة فرضية: إنها الطلب رقم واحد لدى مستخدميه. هذا هو الترتيب الصحيح بالضبط — التعقيد يبرَّر بحاجة مثبتة، لا أبدًا بـ«تحسبًا». وسترى أن هذا التعقيد، إذا أُحسن التعامل معه، في متناولك تمامًا.

المصادقة: ما يحدث فعلًا

ثلاث كلمات مفردات ستحوّل حواراتك مع الذكاء الاصطناعي حول هذا الموضوع. المصادقة هي إثبات من أنت («أنا فعلًا lina@college.fr»). الجلسة هي البقاء معروفًا لفترة دون الاضطرار إلى الإثبات عند كل نقرة — هي ما يجعلك لا تعيد تسجيل الدخول كل ثلاثين ثانية. التفويض هو ما يحق لك رؤيته أو فعله بعد التعرف عليك («لينا ترى عاداتها هي، لا عادات الآخرين»). عندما تستخدم هذه الكلمات في موجّهاتك، سيعرف الذكاء الاصطناعي بالضبط عمّا تتحدث.

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

خدمات المصادقة الجاهزة

تسمى هذه الخدمات أحيانًا BaaS (Backend as a Service): توفر لتطبيقك لبنات الخادم التي يحتاجها — ومنها المصادقة — دون أن تضطر إلى إدارة خادم. تنشئ حسابًا لديهم، تسترد مفتاحين، ويفوّض تطبيقك إليهم كل العمل الحساس. ثلاثة أسماء تتكرر في كل مكان، والذكاء الاصطناعي يحفظها عن ظهر قلب:

في هذه الدورة، سنتابع توم على Supabase: عرضه المجاني يغطي بسعة تطبيق صف دراسي، ووجود المصادقة وقاعدة البيانات في المكان نفسه سيبسّط الفصل 7. لكن احفظ المبدأ أكثر من الاسم — المنهجية التي ستتعلمها تنطبق حرفيًا لدى المنافسين.

أي طريقة تسجيل دخول لمستخدميك؟

توجد ثلاث طرق كبرى لتسجيل الدخول، والخيار الصحيح يعتمد كليًا على من هم مستخدموك. كلمة المرور الكلاسيكية عالمية لكنها مزعجة: الناس ينسونها، ويعيدون استخدامها في كل مكان، ويجب إدارة الاسترداد. تسجيل الدخول عبر Google أو Apple («OAuth») مريح... بشرط أن يملك مستخدموك حساب Google يستخدمونه فعلًا. الرابط السحري (magic link) يلغي كلمة المرور كليًا: يُدخل المستخدم بريده، يتلقى رابطًا، ينقر، وها هو متصل.

• كلمة المرور: عالمية، لكن النسيان متكرر وإدارة الاسترداد إلزامية.
• تسجيل الدخول عبر Google / Apple: نقرة واحدة وانتهى — إن كان مستخدموك يملكون (ويستخدمون) هذه الحسابات.
• الرابط السحري: لا شيء يُحفظ، لا شيء يُنسى. مثالي للمستخدمين العرضيين أو الصغار. الشرط الوحيد: الوصول إلى صندوق البريد.

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

sequenceDiagram
  participant E as التلميذ
  participant A as تطبيق توم
  participant S as خدمة Supabase
  E->>A: يُدخل عنوان بريده الإلكتروني
  A->>S: يطلب رابطًا سحريًا
  S-->>E: يرسل البريد مع الرابط
  E->>A: ينقر على الرابط المستلم
  A-->>E: جلسة مفتوحة وعادات معروضة

دمج المصادقة مع الذكاء الاصطناعي

المنهجية في ثلاثة أزمنة: إنشاء مشروعك على Supabase (حساب، نقرة «New project»)، استرداد مفتاحي الوصول، ثم الطلب من الذكاء الاصطناعي توصيل كل ذلك. وكما في النشر بالفصل 5، لا تحتاج إلى حفظ الإجراء — تطلب دليلًا خطوة بخطوة مناسبًا لمستواك. إليك موجّه توم الكامل:

أريد إضافة حسابات مستخدمين إلى تطبيقي لتتبع العادات.
السياق: تطبيق HTML/CSS/JS منشور على Vercel، البيانات في localStorage حاليًا.
استخدم Supabase Auth مع تسجيل الدخول بالرابط السحري، دون كلمة مرور.
ما أريده:
1. شاشة تسجيل دخول بسيطة: حقل بريد إلكتروني + زر «استلام رابطي»
2. بعد النقر على الرابط المستلم بالبريد، يعود المستخدم إلى التطبيق متصلًا
3. زر «تسجيل الخروج» غير لافت أعلى الصفحة
4. إن لم يكن المستخدم متصلًا، يرى شاشة الدخول؛ وإلا فعاداته
هام: لا تلمس البيانات بعد — نُبقي localStorage حاليًا.
أرشدني أولًا لإنشاء مشروع Supabase وإيجاد مفتاحيّ، خطوة بخطوة، قبل كتابة أي سطر كود.

السطر «لا تلمس البيانات بعد» استراتيجي. إضافة المصادقة وترحيل البيانات معًا تغييران كبيران دفعة واحدة — بالضبط ما علّمك الفصل 4 تجنبه. هذا الفصل يوصّل التعرف على المستخدمين؛ والفصل 7 سيتولى بياناتهم. درجة واحدة في كل مرة، حتى عندما يكون السلّم كبيرًا.

مفاتيح API: أسرارك الأولى

عند إنشاء مشروع Supabase، ستقابل مفتاحين. المفتاح العام (المسمى «anon») يعرّف تطبيقك: يمكنه العيش في كود المتصفح، فهو مصمم لذلك. المفتاح السري (المسمى «service_role») يمنح كل الصلاحيات على مشروعك: يجب ألا يظهر أبدًا، أبدًا في كود مرئي للمتصفح. هذه الأسرار تُرتَّب في ملف خاص، الـ.env، الذي يتجاهله Git:

# ملف .env — يبقى على جهازك، لا يُنشر أبدًا
SUPABASE_URL=https://tonprojet.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIs...   # عام: مقبول في المتصفح
SUPABASE_SERVICE_ROLE_KEY=eyJzZXJ2aWNl...   # سري: أبدًا في المتصفح

اختبار المسار كمستخدم

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

خلل اتصال يجب تصحيحه.
ما أفعله: أُدخل عنواني، أتلقى بريد الرابط السحري، أنقر على الرابط.
ما توقعته: العودة إلى التطبيق متصلًا.
ما يحدث: أعود إلى التطبيق لكنني ما زلت أرى شاشة تسجيل الدخول.
الخطأ في وحدة التحكم: [ألصق هنا السطر الأحمر الحرفي، إن وُجد]
تحقق بالأولوية من إعداد عناوين URL لإعادة التوجيه في Supabase — عنوان موقعي المنشور هو https://mon-app.vercel.app — وقل لي ماذا أصحح، خطوة بخطوة.

هذا الموجّه يُظهر انعكاسًا من مستوى أعلى: توم يوجّه التشخيص («تحقق بالأولوية من عناوين إعادة التوجيه») لأنها السبب الكلاسيكي لهذا العرَض — الخدمة تعيد المستخدم إلى عنوان لا يطابق الموقع المنشور. لست ملزمًا بمعرفة هذه الأسباب الكلاسيكية: اسأل الذكاء الاصطناعي «ما الأسباب الثلاثة الأكثر شيوعًا لهذه المشكلة؟» وسيسردها لك.

ما ينتظرك في الفصل التالي

في نهاية هذه المرحلة، يتعرف تطبيق توم على كل تلميذ... لكن عاداتهم ما زالت تعيش في localStorage كل جهاز. تستطيع لينا الاتصال في مركز التوثيق وعلى هاتفها، لكنها لا ترى فيهما البيانات نفسها بعد. ينقص النصف الثاني من الحل: قاعدة بيانات على الإنترنت، تُخزَّن فيها عادات كل حساب مرة واحدة وإلى الأبد، متاحة من أي مكان. هذا كل برنامج الفصل 7 — وقد وضعت للتو الأساس المثالي لاستقباله.