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

مقدمة: بناء نظام مصادقة احترافي داخل تطبيق Vue

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

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

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

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

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

سنبدأ بإنشاء مشروع جديد باستخدام Vue CLI. تأكد أولًا من تثبيت الأداة على جهازك، وإن لم تكن مثبتة يمكنك تنفيذ الأمر التالي:

npm install -g @vue/cli

بعد ذلك أنشئ المشروع بهذا الأمر:

vue create vue-amplify-auth-tutorial

أثناء الإعداد ستظهر لك عدة خيارات. يفضل اختيار:

• Manually select features
• babel
• Router
• Linter / Formatter

وعند السؤال عن استخدام وضع التاريخ للموجّه history mode اختر Yes. أما بالنسبة إلى أداة الفحص البرمجي، فيمكن اختيار ESLint with error prevention only.

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

ما هو AWS Amplify ولماذا نستخدمه؟

AWS Amplify هو إطار عمل مفتوح المصدر من أمازون، يوفر مجموعة من الأدوات والخدمات التي تساعد المطورين على بناء تطبيقات ويب وتطبيقات جوال بسرعة أكبر. من أهم هذه الأدوات خدمة Amplify Auth المسؤولة عن المصادقة وإدارة حسابات المستخدمين.

يعتمد Amplify Auth في الخلفية على Amazon Cognito، وهي خدمة قوية لإدارة المستخدمين تدعم:

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

الميزة الأساسية هنا أنك لا تحتاج إلى بناء نظام المصادقة من الصفر، بل تستفيد من بنية جاهزة وآمنة وقابلة للتوسع.

إنشاء حساب في AWS

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

تثبيت وإعداد Amplify CLI

أداة Amplify CLI هي الوسيلة التي سنستخدمها لإنشاء الخدمات الخلفية وربطها بالتطبيق. ثبّتها عالميًا عبر الأمر التالي:

npm install -g @aws-amplify/cli

ثم شغّل أمر الإعداد:

amplify configure

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

بعدها سيُطلب منك اختيار المنطقة السحابية AWS Region. اختر المنطقة الأقرب إليك لتقليل زمن الاستجابة.

ثم سيُطلب منك اسم مستخدم IAM جديد. يمكنك قبول الاسم الافتراضي أو استخدام اسم مخصص مثل auth-demo.

بعد الضغط على Enter ستعود إلى المتصفح لإكمال إنشاء المستخدم. اتبع التسلسل التالي:

1. انقر Next: Permissions
2. ثم Next: Tags
3. ثم Next: Review
4. ثم Create User

ارجع بعد ذلك إلى الطرفية واضغط Enter للمتابعة. سيُطلب منك إدخال كل من accessKeyId وsecretAccessKey للمستخدم الجديد، ثم اختيار اسم للملف الشخصي profile. يمكنك غالبًا الاكتفاء بالقيمة الافتراضية.

عند نجاح العملية ستظهر رسالة تؤكد أن الإعداد اكتمل بنجاح.

تهيئة الخلفية السحابية للمشروع

بعد أن أصبح تطبيق Vue جاهزًا، يمكننا الآن تهيئة خدمات Amplify داخل المشروع من خلال تنفيذ الأمر التالي من المجلد الجذر:

amplify init

هذا الأمر يبدأ ربط المشروع الحالي ببيئة خلفية سحابية جديدة، ويجهز ملفات الإعداد التي سيستخدمها التطبيق لاحقًا.

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

لإضافة نظام المصادقة، نفذ الأمر التالي داخل مجلد المشروع:

amplify add auth

أثناء التنفيذ ستظهر لك عدة أسئلة لإعداد المشروع والبيئة:

• أدخل اسم المشروع.
• اجعل اسم بيئة الخلفية dev.
• اختر محرر الأكواد المفضل لديك.
• حدد أن الواجهة الأمامية تستخدم JavaScript.
• اختر الإطار Vue.
• حدد مسار الملفات المصدرية على أنه src.
• اترك مجلد الإنتاج الافتراضي dist.
• استخدم أوامر البناء الافتراضية التي يوفّرها Vue CLI.
• فعّل استخدام ملف التعريف الذي أنشأته عبر amplify configure.

ماذا يحدث عند تنفيذ amplify init؟

عند تهيئة مشروع جديد، يقوم Amplify بعدة مهام مهمة تلقائيًا:

• إنشاء مجلد رئيسي باسم amplify لتخزين تعريف البنية الخلفية.
• إنشاء ملف aws-exports.js داخل مجلد src، وهو الملف الذي يحتوي على إعدادات الاتصال بين الواجهة الأمامية والخدمات السحابية.
• تعديل ملف .gitignore لإضافة بعض الملفات المولدة تلقائيًا.
• إنشاء مشروع سحابي يمكن الوصول إليه من خلال الأمر amplify console.

ولكي يتم نشر الخدمات فعليًا على حسابك السحابي، استخدم الأمر التالي:

amplify push

تثبيت مكتبات Amplify داخل مشروع Vue

بعد تجهيز البنية الخلفية، نحتاج إلى تثبيت المكتبات اللازمة داخل التطبيق:

npm install aws-amplify

هذه الحزمة توفر لنا أدوات مثل Auth للتعامل مع التسجيل وتسجيل الدخول وتسجيل الخروج.

ربط التطبيق مع إعدادات AWS Amplify

افتح ملف main.js وأضف الأسطر التالية بعد آخر سطر من أوامر الاستيراد:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

بهذا الشكل يصبح تطبيق Vue قادرًا على قراءة إعدادات الخدمات التي أنشأها Amplify. وعند تعديل إعدادات الخلفية لاحقًا، يتم تحديث ملف aws-exports.js تلقائيًا.

إنشاء صفحة تسجيل حساب جديد

سننشئ الآن صفحة تسمح للمستخدم بإنشاء حساب جديد باستخدام البريد الإلكتروني وكلمة المرور.

إضافة ملف Register.vue

داخل مجلد views أنشئ ملفًا جديدًا باسم Register.vue. بعد ذلك أضف المسار التالي داخل مصفوفة routes في ملف router/index.js:

{
  path: '/register',
  name: 'Register',
  component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue'),
},

ثم افتح ملف App.vue وأضف رابط التنقل الخاص بصفحة التسجيل:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link> |
  <router-link to="/register">Register</router-link>
</div>

واجهة نموذج التسجيل

أضف الكود التالي داخل قسم template في ملف Register.vue:

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

ولتحسين مظهر الحقول على أكثر من صفحة، يمكنك وضع النمط التالي في ملف App.vue:

input {
  margin-right: 10px;
}

إضافة البيانات والدالة الخاصة بالتسجيل

داخل الكائن data() أضف المتغيرين email وpassword:

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

ثم أضف دالة التسجيل التالية:

async register() {
  try {
    await Auth.signUp({
      username: this.email,
      password: this.password,
    });
    alert('User successfully registered. Please login');
  } catch (error) {
    alert(error.message);
  }
},

ولا تنس استيراد Auth في بداية قسم script:

import { Auth } from 'aws-amplify';

بعد ذلك يمكنك تشغيل التطبيق وتجربة إنشاء مستخدم جديد. إذا نجحت العملية، ستظهر رسالة تؤكد اكتمال التسجيل.

إنشاء صفحة تسجيل الدخول

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

إضافة ملف Login.vue

داخل مجلد views أنشئ ملفًا جديدًا باسم Login.vue. ثم أضف هذا المسار في router/index.js:

{
  path: '/login',
  name: 'Login',
  component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
},

وأضف رابط الدخول في قائمة التنقل داخل App.vue:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link> |
  <router-link to="/register">Register</router-link> |
  <router-link to="/login">Login</router-link>
</div>

واجهة تسجيل الدخول

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

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

وفي قسم script أضف الاستيراد والبيانات الأساسية:

<script>
import { Auth } from 'aws-amplify';

export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: ''
    }
  },
}
</script>

ثم أضف دالة تسجيل الدخول:

async login() {
  try {
    await Auth.signIn(this.email, this.password);
    alert('Successfully logged in');
  } catch (error) {
    alert(error.message);
  }
},

بعد ذلك يمكنك استخدام الحساب الذي أنشأته سابقًا لتسجيل الدخول إلى التطبيق.

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

وجود زر لتسجيل الخروج عنصر أساسي في أي نظام مصادقة. لتنفيذه افتح ملف App.vue وأضف زرًا داخل شريط التنقل:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link> |
  <router-link to="/register">Register</router-link> |
  <router-link to="/login">Login</router-link> |
  <button @click="logout">Logout</button>
</div>

ثم داخل قسم script أضف الكائن methods والدالة التالية:

methods: {
  async logout() {
    try {
      await Auth.signOut();
    } catch (error) {
      alert(error.message);
    }
  },
},

بهذا أصبح المستخدم قادرًا على إنهاء جلسته بأمان.

نصائح مهمة لتحسين تجربة المصادقة في تطبيق Vue

رغم أن المثال هنا بسيط، فإن التطبيقات الحقيقية تحتاج غالبًا إلى تحسينات إضافية. من الأفضل التفكير في النقاط التالية:

• إعادة توجيه المستخدم تلقائيًا إلى صفحة محمية بعد تسجيل الدخول.
• منع الوصول إلى بعض المسارات إذا لم يكن المستخدم مصادقًا عليه.
• عرض رسائل خطأ واضحة بدل الاكتفاء برسائل alert.
• التحقق من قوة كلمة المرور قبل إرسالها.
• إضافة صفحة Dashboard لا تظهر إلا للمستخدمين المسجلين.

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

لماذا يعد AWS Amplify خيارًا جيدًا للمصادقة؟

الاعتماد على AWS Amplify لا يعني فقط تسريع التطوير، بل يمنحك أيضًا بنية قابلة للتوسع مستقبلًا. من أبرز مزاياه:

• تكامل مباشر مع Amazon Cognito.
• سهولة ربطه بتطبيقات Vue وReact وغيرها.
• إمكانية إضافة خدمات أخرى لاحقًا مثل التخزين وواجهات API.
• إدارة سحابية منظمة للبنية الخلفية عبر Infrastructure as Code.

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

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

إضافة المصادقة إلى تطبيق Vue باستخدام AWS Amplify تُعد خطوة ذكية لكل مطور يريد بناء نظام دخول آمن دون الغرق في التفاصيل الخلفية المعقدة. من خلال Amplify CLI ومكتبة aws-amplify، يمكنك تجهيز التسجيل وتسجيل الدخول والخروج في وقت قصير مع الاعتماد على بنية قوية مدعومة من Amazon Cognito. تقنيًا، هذا الحل مناسب جدًا للمشاريع التي تحتاج إلى سرعة في التنفيذ مع قابلية توسع مستقبلية، بشرط تنظيم المسارات المحمية وتحسين تجربة المستخدم في الواجهة الأمامية.