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

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 CLI

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

$ npm install -g firebase-tools@latest

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

webpack build

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

$ firebase --version
11.14.2

اتصل بمشروع Firebase الخاص بك

إذا لم يكن لديك مشروع Firebase، في وحدة تحكم Firebase ، قم بإنشاء مشروع Firebase جديد. قم بتدوين معرف المشروع الذي اخترته، حيث ستحتاج إليه لاحقًا.

أنت الآن بحاجة إلى توصيل هذا الرمز بمشروع Firebase الخاص بك. قم أولاً بتشغيل الأمر التالي لتسجيل الدخول إلى Firebase CLI:

$ firebase login

قم بعد ذلك بتشغيل الأمر التالي لإنشاء اسم مستعار للمشروع. استبدل $YOUR_PROJECT_ID بمعرف مشروع Firebase الخاص بك.

$ firebase use $YOUR_PROJECT_ID

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

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

في هذا القسم، ستقوم بتشغيل التطبيق محليًا. هذا يعني أن الوقت قد حان لتشغيل Emulator Suite.

ابدأ تشغيل المحاكيات

من داخل دليل مصدر Codelab، قم بتشغيل الأمر التالي لبدء المحاكيات:

$ 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 بالعامل الثاني.

في المحرر الخاص بك، افتح الملف 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 في نافذتك الطرفية.

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

لمعرفة المزيد حول تنفيذ أسلوب MFA، راجع مستنداتنا المرجعية .

5. إنشاء وظيفة الحظر

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

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

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