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

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: حيث يتم تجميع رمز JS لتطبيق الدردشة (src/index.js) عليه.
  • src/firebase-config.js - يحتوي على عنصر إعداد Firebase المستخدَم لإعداد تطبيق المحادثة
  • src/index.js - رمز JS لتطبيق المحادثات

الحصول على واجهة سطر الأوامر في Firebase

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

$ npm install -g firebase-tools@latest

قم بإنشاء جافا سكريبت باستخدام حزمة الويب، التي ستنشئ فيما يتعلق بـ main.js داخل الدليل public/scripts/.

webpack build

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

$ firebase --version
11.14.2

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

إذا لم يكن لديك مشروع على Firebase، أنشئ مشروع Firebase جديدًا في وحدة تحكُّم Firebase. دوّن رقم تعريف المشروع الذي تختاره، لأنك ستحتاج إليه لاحقًا.

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

$ 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- تنفيذ المواقع المصممة بغرض الإعلانات (MFA)

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

في المحرِّر، افتح ملف 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 وأضِف تدفق التحكّم التالي الذي يطلب من المستخدمين المسجّلين في MFA إدخال العامل الثاني:

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. تجربة تسجيل الدخول باستخدام MFA في أدوات المحاكاة

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

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

لمزيد من المعلومات عن تنفيذ المواقع المصممة بغرض الإعلانات (MFA)، يُرجى الاطّلاع على المستندات المرجعية.

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

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

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

لإنشاء دالة حظر، افتح 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!

ملف GIF لأشخاص من المكتب يؤدون رقصة رفع السقف