بناء نظام مصادقة متكامل في Flutter باستخدام منصة Hosteday

في


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


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

ما يميز هذا التطبيق:

  • لا يتم تخزين بيانات المستخدم بشكل مباشر، بل يتم جلبها من السيرفر
  • يتم حفظ التوكن بشكل آمن باستخدام FlutterSecureStorage
  • يتم التحكم في واجهة المستخدم تلقائيًا بناءً على حالة تسجيل الدخول

توفر منصة Hosteday بيئة جاهزة لبناء الـ Backend دون الحاجة إلى إنشاء نظام كامل من الصفر، وهو ما يجعلها خيارًا عمليًا لمطوري تطبيقات Flutter. من أبرز ميزاتها أنها تقدم نظام مصادقة متكامل (تسجيل، تسجيل دخول، توكن)، وواجهات API جاهزة للتعامل مع المستخدمين والبيانات، مما يقلل الوقت المستغرق في التطوير الخلفي. كذلك تعتمد على REST APIs واضحة يمكن استهلاكها بسهولة داخل Flutter باستخدام مكتبات مثل http، مع دعم التوكن (Bearer Token) الذي يتوافق مباشرة مع آلية التخزين الآمن مثل FlutterSecureStorage. هذا يسمح للمطور بالتركيز على تجربة المستخدم والواجهة بدل الانشغال ببناء البنية التحتية. بالإضافة إلى ذلك، توفر Hosteday قابلية التوسع وتنظيم المشاريع (مثل إدارة المنتجات أو المستخدمين) بشكل مرتب، مما يجعلها مناسبة لبناء تطبيقات حقيقية بسرعة وبدون تعقيد كبير في الإعداد.

يمكنك تجربة المنصة الان hosteday.com

1. نقطة البداية (تشغيل التطبيق)

تشغيل التطبيق يتم عبر main.dart:

void main() {
  runApp(const App());
}

2. بوابة التحقق (Auth Gate)

بدلًا من توجيه المستخدم مباشرة، يتم أولًا التحقق من وجود جلسة محفوظة:

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: const FlutterSecureStorage().read(key: 'token'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final token = snapshot.data;
          if (token != null && token.isNotEmpty) {
            return const ProfilePage();
          }
        }

        return const RegisterPage();
      },
    );
  }
}

الفكرة:

  • وجود token يعني أن المستخدم مسجل دخول
  • عدم وجوده يعني عرض شاشة التسجيل

3. تسجيل المستخدم (Register)

عند إدخال البيانات:

await AuthApi.register(
  name: name.text,
  email: email.text,
  password: password.text,
);

الطلب إلى السيرفر:

POST /api/auth/register

ما يحدث:

  • يتم إرسال البيانات إلى Hosteday
  • يتم إرجاع token
  • يتم حفظه محليًا
  • يتم نقل المستخدم إلى صفحة البروفايل

4. تسجيل الدخول (Login)

نفس الفكرة ولكن باستخدام بيانات موجودة:

await AuthApi.login(
  email: email.text,
  password: password.text,
);

النتيجة:

  • استلام token
  • حفظه
  • الدخول مباشرة إلى التطبيق

5. جلب بيانات المستخدم (Profile)

بعد تسجيل الدخول، يتم استخدام التوكن لجلب بيانات المستخدم:

final token = await _storage.read(key: 'token');
return UserApi.getUser(token!);

الطلب:

GET /api/user
Authorization: Bearer TOKEN

البيانات المعروضة:

  • الاسم
  • البريد الإلكتروني
  • الصورة
  • حالة التفعيل

6. تسجيل الخروج (Logout)

await UserApi.logout();

ما يحدث:

  • إرسال طلب logout للسيرفر
  • حذف التوكن من الجهاز
  • إعادة المستخدم إلى شاشة البداية

7. تدفق النظام بالكامل

التطبيق يعمل وفق هذا التسلسل:

  • تشغيل التطبيق
  • التحقق من وجود Token
  • إذا وجد → عرض Profile
  • إذا لم يوجد → عرض Register/Login
  • عند نجاح المصادقة → حفظ Token
  • عند تسجيل الخروج → حذف Token وإعادة التوجيه

ملاحظات مهمة

  • جميع الطلبات المحمية تعتمد على Bearer Token
  • FlutterSecureStorage يوفر تخزين آمن
  • التصميم يفصل بين:
    • الواجهة (UI)
    • منطق الاتصال (API)

الدرس القادم

سيتم الانتقال إلى خطوة أكثر تقدمًا باستخدام نفس النظام، وهي:

  • إنشاء المنتجات (Products)
  • عرضها داخل التطبيق
  • ربطها بالمستخدم الحالي

وهذا سيعتمد بالكامل على نظام المصادقة الذي تم بناؤه في هذا الدرس.

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

رابط github

https://github.com/mustafa3max/lesson-hosteday-flutter/tree/lesson-1

تعليقات

إرسال تعليق