ميزات المصادقة المتقدمة

1. إعداد

الحصول على رمز المصدر

في هذا الدرس التطبيقي، ستبدأ بإصدار من نموذج تطبيق Friendly Chat شبه مكتمل، لذا فإنّ أول ما عليك فعله هو استنساخ الرمز المصدر:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

بعد ذلك، انتقِل إلى الدليل security-start حيث ستعمل لبقية هذا الدرس العملي:

$ cd codelab-friendlychat-web/security-start

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

$ npm install && (cd functions && npm install)

التعرّف على هذا المستودع

يحتوي الدليل security-solution/ على الرمز الكامل لنموذج التطبيق. أما الدليل security-start، فهو المكان الذي ستعمل فيه خلال الدرس التطبيقي حول الترميز، وهو يفتقد إلى بعض الأجزاء المهمة من عملية تنفيذ المصادقة. في ما يلي الملفات والميزات الرئيسية في security-start/ وsecurity-solution/:

• يحتوي functions/index.js على رمز Cloud Functions، وهو المكان الذي ستكتب فيه دوال حظر المصادقة.
• ‫public/: يحتوي على الملفات الثابتة لتطبيق محادثاتك
• public/scripts/main.js: المكان الذي يتم فيه تجميع رمز JavaScript لتطبيق المحادثة (src/index.js)
• ‫src/firebase-config.js: يحتوي على عنصر إعدادات Firebase المستخدَم لإعداد تطبيق محادثات
• src/index.js - رمز JavaScript لتطبيق المحادثة

الحصول على Firebase CLI

تشكّل "مجموعة أدوات المحاكاة" جزءًا من Firebase CLI (واجهة سطر الأوامر)، ويمكن تثبيتها على جهازك باستخدام الأمر التالي:

$ npm install -g firebase-tools@latest

أنشئ ملف javascript باستخدام webpack، ما سيؤدي إلى إنشاء ملف main.js داخل الدليل public/scripts/.

webpack build

بعد ذلك، تأكَّد من تثبيت أحدث إصدار من واجهة سطر الأوامر. يعمل هذا الدرس العملي مع الإصدار 11.14 أو الإصدارات الأحدث.

$ firebase --version
11.14.2

الربط بمشروع Firebase

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

1. سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حساب Google.
2. انقر على الزر لإنشاء مشروع جديد، ثم أدخِل اسم المشروع (على سبيل المثال، Authentication MFA Codelab).
   
3. انقر على متابعة.
4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

ربط الرمز البرمجي بمشروعك على Firebase

عليك الآن ربط هذا الرمز بمشروع Firebase. نفِّذ الأمر التالي أولاً لتسجيل الدخول إلى Firebase CLI:

$ firebase login

بعد ذلك، شغِّل الأمر التالي لإنشاء اسم مستعار للمشروع. استبدِل $YOUR_PROJECT_ID بمعرّف مشروعك على Firebase.

$ firebase use $YOUR_PROJECT_ID

أنت الآن جاهز لتشغيل التطبيق.

2. تشغيل المحاكيات

في هذا القسم، ستشغّل التطبيق محليًا. وهذا يعني أنّه حان الوقت لتشغيل مجموعة أدوات المحاكاة.

بدء المحاكيات

من داخل دليل ملفات مصدر الدرس العملي، شغِّل الأمر التالي لبدء المحاكيات:

$ firebase emulators:start

سيؤدي ذلك إلى عرض تطبيقك على http://127.0.0.1:5170 وإعادة إنشاء رمز المصدر باستمرار أثناء إجراء التغييرات. ما عليك سوى إعادة التحميل بقوة (ctrl-shift-r) على جهازك في المتصفّح للاطّلاع على التغييرات.

من المفترض أن تظهر لك نتيجة مشابهة لما يلي:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

بعد ظهور الرسالة جميع المحاكيات جاهزة، يصبح التطبيق جاهزًا للاستخدام.

3- تنفيذ المصادقة المتعدّدة العوامل

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

في المحرّر، افتح الملف src/index.js وابحث عن الطريقة startEnrollMultiFactor(). أضِف الرمز التالي لإعداد أداة التحقّق من reCAPTCHA التي ستمنع إساءة استخدام الهاتف (تم ضبط أداة التحقّق من reCAPTCHA على الوضع غير المرئي ولن تظهر للمستخدمين):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

بعد ذلك، ابحث عن طريقة finishEnrollMultiFactor() وأضِف ما يلي لتسجيل العامل الثاني:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

بعد ذلك، ابحث عن الدالة signIn وأضِف مسار التحكّم التالي الذي يطلب من المستخدمين المسجّلين في المصادقة المتعددة العوامل إدخال عامل المصادقة الثاني:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

اكتملت بقية عملية التنفيذ، بما في ذلك الدوال التي تم استدعاؤها هنا. للاطّلاع على طريقة عملها، تصفَّح بقية الملف.

4. تجربة تسجيل الدخول باستخدام المصادقة المتعددة العوامل في المحاكيات

جرِّب الآن تنفيذ المصادقة المتعددة العوامل. تأكَّد من أنّ المحاكيات لا تزال تعمل وانتقِل إلى التطبيق المستضاف محليًا على localhost:5170. جرِّب تسجيل الدخول، وعندما يُطلب منك تقديم رمز المصادقة المتعدّدة العوامل، سيظهر لك رمز المصادقة المتعدّدة العوامل في نافذة الجهاز.

بما أنّ المحاكيات تتوافق تمامًا مع المصادقة المتعددة العوامل، يمكن أن تكون بيئة التطوير مستقلة تمامًا.

لمزيد من المعلومات عن تنفيذ المصادقة المتعددة العوامل، يُرجى الاطّلاع على المستندات المرجعية.

5- إنشاء دالة حظر

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

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

لإنشاء دالة حظر، افتح functions/index.js في المحرّر وابحث عن الدالة beforecreated التي تم التعليق عليها.

استبدِلها بهذا الرمز الذي يسمح فقط للمستخدمين الذين لديهم نطاق example.com بإنشاء حساب:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. تجربة وظيفة الحظر في المحاكيات

لتجربة وظيفة الحظر، تأكَّد من تشغيل المحاكيات، ثم سجِّل الخروج من تطبيق الويب على localhost:5170.

بعد ذلك، حاوِل إنشاء حساب باستخدام عنوان بريد إلكتروني لا ينتهي بـ example.com. ستمنع وظيفة الحظر إتمام العملية بنجاح.

الآن، أعِد المحاولة باستخدام عنوان بريد إلكتروني ينتهي بـ example.com. سيتم إنشاء الحساب بنجاح.

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

ملخّص

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