كيفية إضافة المصادقة إلى تطبيق Vue باستخدام Firebase

مقدمة: لماذا تعد المصادقة عبر Firebase خياراً عملياً لتطبيقات Vue؟

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

في هذا الدليل العملي، سننشئ تطبيقاً بسيطاً باستخدام Vue CLI، ثم نربطه بخدمة Firebase Authentication لتمكين المستخدمين من:

• إنشاء حساب جديد باستخدام البريد الإلكتروني وكلمة المرور.
• تسجيل الدخول إلى التطبيق.
• الوصول إلى صفحة محمية بعد نجاح تسجيل الدخول.
• تسجيل الخروج بشكل آمن.

ما الذي سنبنيه في هذا المشروع؟

سنبدأ بتطبيق Vue افتراضي، ثم نعدله ليحتوي على الصفحات التالية:

• صفحة تسجيل الدخول.
• صفحة إنشاء حساب جديد.
• صفحة Dashboard لا تظهر إلا للمستخدمين الذين سجّلوا الدخول.
• زر لتسجيل الخروج.

الفكرة الأساسية هي الاعتماد على مزود المصادقة Email/Password داخل Firebase، بحيث يتمكن المستخدم من إنشاء حسابه ثم الدخول إلى التطبيق والوصول إلى المحتوى المحمي.

إنشاء مشروع Vue من البداية

تثبيت Vue CLI

إذا لم يكن Vue CLI مثبتاً على جهازك، يمكنك تثبيته عالمياً عبر الأمر التالي:

npm install -g @vue/cli

إنشاء مشروع جديد

بعد تثبيت الأداة، أنشئ مشروعاً جديداً باستخدام الأمر التالي:

vue create vue-firebase-auth-tutorial

أثناء الإعداد، اختر Manually select features ثم فعّل الخيارات التالية:

• babel
• Router
• Linter / Formatter

وعند سؤالك عن تفعيل نمط history mode في الموجّه router، اختر Yes. أما بالنسبة لأداة التنسيق، فيمكنك اختيار Eslint + Prettier.

بعد اكتمال إنشاء المشروع وتشغيل الخادم المحلي، افتح المتصفح على localhost:8080 وستشاهد التطبيق الافتراضي.

تثبيت Firebase داخل المشروع

قبل المتابعة، تأكد من امتلاك حساب على منصة Firebase. بعد ذلك ثبّت المكتبة داخل المشروع عبر الأمر التالي:

npm install firebase

إنشاء مشروع جديد في Firebase

انتقل إلى لوحة تحكم Firebase، ثم أنشئ مشروعاً جديداً من خلال زر إضافة مشروع.

يمكنك تفعيل Google Analytics إن أردت، لكنه ليس ضرورياً لهذا الشرح. بعد إنشاء المشروع، أضف تطبيق ويب جديداً عبر النقر على أيقونة الويب.

أدخل اسماً تعريفياً للتطبيق، ثم اضغط على Register app.

في الخطوة التالية ستظهر لك إعدادات firebaseConfig مع سطر تهيئة التطبيق. انسخ هذه البيانات لأننا سنستخدمها داخل ملف main.js.

تهيئة Firebase داخل تطبيق Vue

افتح ملف main.js وأضف استيراد مكتبة Firebase، ثم ألصق إعدادات المشروع وشفرة التهيئة كما يلي:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import firebase from "firebase";

var firebaseConfig = {
  apiKey: "YourConfigHere",
  authDomain: "YourConfigHere",
  projectId: "YourConfigHere",
  storageBucket: "YourConfigHere",
  messagingSenderId: "YourConfigHere",
  appId: "YourConfigHere"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

بعد هذه الخطوة، يصبح التطبيق جاهزاً للتواصل مع خدمات Firebase، بما في ذلك المصادقة.

تفعيل طريقة المصادقة Email/Password

من لوحة تحكم Firebase، افتح المشروع الذي أنشأته، ثم انتقل إلى قسم Authentication.

بعد ذلك اضغط على Get Started، ثم افتح تبويب Sign-in method.

اختر خيار Email/Password، ثم فعّله واحفظ التغييرات.

أصبحت خدمة المصادقة الآن مهيأة لاستقبال عمليات التسجيل وتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور.

تحديث التنقل داخل التطبيق

عند إنشاء المشروع بواسطة Vue Router، ستجد رابطين افتراضيين هما Home وAbout. سنعيد استخدامهما على النحو التالي:

• Home لصفحة تسجيل الدخول.
• About لصفحة التسجيل، مع تعديل المسار لاحقاً إلى /register.

كما سنضيف رابطاً لصفحة Dashboard وزراً لتسجيل الخروج. عدّل جزء التنقل داخل ملف App.vue ليصبح بالشكل التالي:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/register">Register</router-link> |
  <router-link to="/dashboard">Dashboard</router-link> |
  <button @click="logout">Logout</button>
</div>

إنشاء نموذج تسجيل الدخول

افتح الملف Home.vue داخل مجلد views، ثم استبدل محتواه داخل قسم template بالنموذج التالي:

<div>
  <form @submit.prevent="login">
    <h2>Login</h2>
    <input type="email" placeholder="Email address..." v-model="email" />
    <input type="password" placeholder="password..." v-model="password" />
    <button type="submit">Login</button>
  </form>
</div>

لتحسين المظهر وإضافة مسافة بين الحقول، أضف التنسيق التالي داخل ملف App.vue:

input {
  margin-right: 20px;
}

إنشاء نموذج التسجيل

افتح الملف About.vue داخل مجلد views، ثم استخدم نموذجاً مشابهاً لنموذج تسجيل الدخول مع تغيير النصوص واستدعاء الدالة register بدلاً من login:

<div>
  <form @submit.prevent="register">
    <h2>Register</h2>
    <input type="email" placeholder="Email address..." v-model="email" />
    <input type="password" placeholder="password..." v-model="password" />
    <button type="submit">Register</button>
  </form>
</div>

تحديث المسارات في Vue Router

بشكل افتراضي، قد تكون صفحة التسجيل مرتبطة بالمسار /about. من الأفضل استبداله بمسار أوضح مثل /register. افتح ملف index.js داخل مجلد router واجعل المصفوفة routes كما يلي:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/About.vue'),
  },
];

ثم أضف مسار صفحة Dashboard:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/About.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
  },
];

إنشاء صفحة Dashboard

أنشئ ملفاً جديداً باسم Dashboard.vue داخل مجلد views، ثم أضف إليه المحتوى التالي:

<div>
  <h2>Dashboard</h2>
  <p>This page is only visible to users that are currently logged in</p>
</div>

هذه الصفحة ستكون خاصة بالمستخدمين الذين أتموا تسجيل الدخول بنجاح.

تنفيذ تسجيل المستخدمين الجدد

الآن ننتقل إلى ربط نموذج التسجيل بخدمة Firebase Auth. أولاً، أضف البيانات email وpassword داخل كائن data() في ملف About.vue:

data() {
  return {
    email: '',
    password: '',
  };
},

بعد ذلك أضف الكائن methods الذي يحتوي على الدالة register(). سنستخدم الدالة createUserWithEmailAndPassword() التي يوفرها Firebase:

methods: {
  register() {
    firebase
      .auth()
      .createUserWithEmailAndPassword(this.email, this.password)
      .then(() => {
        alert('Successfully registered! Please login.');
        this.$router.push('/');
      })
      .catch(error => {
        alert(error.message);
      });
  },
},

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

وللتحقق من نجاح التسجيل، افتح قسم Authentication في لوحة تحكم Firebase ثم تبويب Users، وستجد المستخدم الجديد ضمن القائمة.

تنفيذ تسجيل الدخول للمستخدمين

بعد نجاح إنشاء الحسابات، نحتاج إلى تمكين المستخدم من تسجيل الدخول. افتح ملف Home.vue وأضف داخله دالة login() باستخدام الدالة signInWithEmailAndPassword():

methods: {
  login() {
    firebase
      .auth()
      .signInWithEmailAndPassword(this.email, this.password)
      .then(() => {
        alert('Successfully logged in');
        this.$router.push('/dashboard');
      })
      .catch(error => {
        alert(error.message);
      });
  },
},

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

حماية المسارات عبر Route Guard

لا يكفي وجود صفحة Dashboard، بل يجب منع الوصول إليها إذا لم يكن المستخدم مسجلاً دخوله. لهذا الغرض سنستخدم Route Guard داخل Vue Router.

أضف الخاصية meta إلى مسار /dashboard كالتالي:

{
  path: '/dashboard',
  name: 'Dashboard',
  component: () => import('../views/Dashboard.vue'),
  meta: {
    authRequired: true,
  },
},

ثم أضف دالة beforeEach() داخل ملف router/index.js لفحص حالة المستخدم قبل الانتقال إلى أي صفحة:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.authRequired)) {
    if (firebase.auth().currentUser) {
      next();
    } else {
      alert('You must be logged in to see this page');
      next({
        path: '/',
      });
    }
  } else {
    next();
  }
});

ولا تنس استيراد firebase في أعلى الملف:

import firebase from 'firebase';

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

إضافة وظيفة تسجيل الخروج

الخطوة الأخيرة هي تمكين المستخدم من إنهاء جلسته. افتح ملف App.vue وأضف الدالة logout() التالية:

methods: {
  logout() {
    firebase
      .auth()
      .signOut()
      .then(() => {
        alert('Successfully logged out');
        this.$router.push('/');
      })
      .catch(error => {
        alert(error.message);
        this.$router.push('/');
      });
  },
},

تعتمد هذه العملية على الدالة signOut() المدمجة في Firebase Auth، وهي كافية لإنهاء جلسة المستخدم وإعادته إلى الصفحة الرئيسية.

نصائح عملية لتحسين بنية المشروع

تجنب وضع منطق المصادقة بشكل مشتت

رغم أن هذا المثال التعليمي يضع الدوال داخل المكونات نفسها، إلا أن التطبيقات الأكبر تستفيد من نقل عمليات المصادقة إلى ملف خدمة مستقل مثل auth.js، مما يسهل إعادة الاستخدام والصيانة.

استبدال رسائل alert() بواجهة أفضل

استخدام alert() مناسب للتجربة السريعة، لكنه ليس الأفضل في بيئات الإنتاج. من الأفضل الاعتماد على إشعارات مرئية toast notifications أو رسائل خطأ داخل النموذج نفسه.

إضافة التحقق من الحقول قبل الإرسال

قبل إرسال البريد الإلكتروني وكلمة المرور إلى Firebase، يفضل التحقق من:

• أن البريد مكتوب بصيغة صحيحة.
• أن كلمة المرور تستوفي الحد الأدنى من الأمان.
• أن الحقول ليست فارغة.

فوائد استخدام Firebase Authentication مع Vue

• سهولة الدمج وسرعة الإعداد.
• تقليل الحاجة إلى بناء واجهة خلفية مخصصة للمصادقة.
• إمكانية التوسع لاحقاً نحو طرق دخول أخرى مثل Google أو GitHub.
• توفر كائنات جاهزة مثل currentUser لتبسيط التحقق من حالة المستخدم.
• مناسب للتطبيقات الصغيرة والمتوسطة والنماذج الأولية.

الخلاصة التقنية

الدمج بين Vue.js وFirebase Authentication يقدم حلاً عملياً وسريعاً لبناء نظام مصادقة دون تعقيد بنية الخادم الخلفي. في هذا الشرح مررنا بجميع الأساسيات: إنشاء المشروع، إعداد Firebase، تفعيل المصادقة بالبريد الإلكتروني، بناء واجهات التسجيل وتسجيل الدخول، حماية المسارات، ثم تسجيل الخروج. من الناحية التقنية، هذا النهج مناسب جداً للتطبيقات التي تحتاج إلى إطلاق سريع مع مستوى جيد من الاعتمادية، لكن في المشاريع الأكبر يفضل تنظيم منطق المصادقة داخل طبقة خدمات مستقلة وتحسين تجربة المستخدم عبر رسائل تفاعلية وتحكم أدق في الجلسات.