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

إذا قمت بالترقية إلى مصادقة Firebase باستخدام Identity Platform، فيمكنك إضافة مصادقة متعددة العوامل عبر الرسائل النصية القصيرة إلى تطبيق الويب الخاص بك.

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

قبل ان تبدأ

  1. تمكين موفر واحد على الأقل يدعم المصادقة متعددة العوامل. يدعم كل مزود خدمة MFA، باستثناء مصادقة الهاتف والمصادقة المجهولة وApple Game Center.

  2. تأكد من أن تطبيقك يتحقق من رسائل البريد الإلكتروني للمستخدم. يتطلب MFA التحقق من البريد الإلكتروني. ويمنع هذا الجهات الفاعلة الخبيثة من التسجيل في خدمة باستخدام بريد إلكتروني لا يملكونه، ثم إغلاق المالك الحقيقي عن طريق إضافة عامل ثانٍ.

استخدام الإيجار المتعدد

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

  1. في وحدة تحكم GCP، حدد المستأجر الذي تريد العمل معه.

  2. في التعليمات البرمجية الخاصة بك، قم بتعيين حقل tenantId في مثيل Auth إلى معرف المستأجر الخاص بك. على سبيل المثال:

    واجهة برمجة تطبيقات الويب المعيارية

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth(app);
    auth.tenantId = "myTenantId1";
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    firebase.auth().tenantId = 'myTenantId1';
    

تمكين المصادقة متعددة العوامل

  1. افتح صفحة المصادقة > طريقة تسجيل الدخول لوحدة تحكم Firebase.

  2. في القسم المتقدم ، قم بتمكين المصادقة متعددة العوامل عبر الرسائل القصيرة .

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

  3. إذا لم تكن قد سمحت بالفعل بنطاق تطبيقك، فأضفه إلى قائمة السماح في صفحة المصادقة > الإعدادات في وحدة تحكم Firebase.

اختيار نمط التسجيل

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

  • قم بتسجيل العامل الثاني للمستخدم كجزء من التسجيل. استخدم هذه الطريقة إذا كان تطبيقك يتطلب مصادقة متعددة العوامل لجميع المستخدمين.

  • تقديم خيار قابل للتخطي لتسجيل عامل ثانٍ أثناء التسجيل. التطبيقات التي ترغب في تشجيع المصادقة متعددة العوامل، ولكنها لا تتطلبها، قد تفضل هذا الأسلوب.

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

  • يتطلب إضافة عامل ثانٍ بشكل تدريجي عندما يريد المستخدم الوصول إلى الميزات ذات متطلبات الأمان المتزايدة.

إعداد أداة التحقق reCAPTCHA

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

لا تحتاج إلى إعداد عميل reCAPTCHA يدويًا؛ يقوم كائن RecaptchaVerifier الخاص بالعميل SDK تلقائيًا بإنشاء وتهيئة أي مفاتيح وأسرار ضرورية للعميل.

باستخدام reCAPTCHA غير مرئية

يدعم كائن RecaptchaVerifier خاصية reCAPTCHA غير المرئية ، والتي يمكنها غالبًا التحقق من المستخدم دون الحاجة إلى أي تفاعل. لاستخدام reCAPTCHA غير المرئي، قم بإنشاء RecaptchaVerifier مع تعيين معلمة size على invisible ، وحدد معرف عنصر واجهة المستخدم الذي يبدأ التسجيل متعدد العوامل:

واجهة برمجة تطبيقات الويب المعيارية

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
    "size": "invisible",
    "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
    }
}, auth);

واجهة برمجة تطبيقات مساحة اسم الويب

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
  // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
  onSolvedRecaptcha();
}
});

باستخدام القطعة reCAPTCHA

لاستخدام عنصر واجهة مستخدم reCAPTCHA مرئي، قم بإنشاء عنصر HTML ليحتوي على عنصر واجهة المستخدم، ثم قم بإنشاء كائن RecaptchaVerifier بمعرف حاوية واجهة المستخدم. يمكنك أيضًا بشكل اختياري تعيين عمليات رد الاتصال التي يتم استدعاؤها عند حل اختبار reCAPTCHA أو انتهاء صلاحيته:

واجهة برمجة تطبيقات الويب المعيارية

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",

    // Optional reCAPTCHA parameters.
    {
      "size": "normal",
      "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
      },
      "expired-callback": function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
      }
    }, auth
);

واجهة برمجة تطبيقات مساحة اسم الويب

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  // Optional reCAPTCHA parameters.
  {
    'size': 'normal',
    'callback': function(response) {
      // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
      // ...
      onSolvedRecaptcha();
    },
    'expired-callback': function() {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
  });

العرض المسبق لreCAPTCHA

اختياريًا، يمكنك عرض reCAPTCHA مسبقًا قبل بدء التسجيل الثنائي:

واجهة برمجة تطبيقات الويب المعيارية

recaptchaVerifier.render()
    .then(function (widgetId) {
        window.recaptchaWidgetId = widgetId;
    });

واجهة برمجة تطبيقات مساحة اسم الويب

recaptchaVerifier.render()
  .then(function(widgetId) {
    window.recaptchaWidgetId = widgetId;
  });

بعد حل render() ، ستحصل على معرف عنصر واجهة المستخدم الخاص بـ reCAPTCHA، والذي يمكنك استخدامه لإجراء استدعاءات لواجهة برمجة تطبيقات reCAPTCHA :

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

يلخص RecaptchaVerifier هذا المنطق باستخدام طريقة التحقق ، لذلك لا تحتاج إلى التعامل مع متغير grecaptcha مباشرة.

تسجيل العامل الثاني

لتسجيل عامل ثانوي جديد لمستخدم:

  1. إعادة مصادقة المستخدم.

  2. اطلب من المستخدم إدخال رقم هاتفه.

  3. قم بتهيئة أداة التحقق reCAPTCHA كما هو موضح في القسم السابق. قم بتخطي هذه الخطوة إذا تم تكوين مثيل RecaptchaVerifier بالفعل:

    واجهة برمجة تطبيقات الويب المعيارية

    import { RecaptchaVerifier } from "firebase/auth";
    
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. احصل على جلسة متعددة العوامل للمستخدم:

    واجهة برمجة تطبيقات الويب المعيارية

    import { multiFactor } from "firebase/auth";
    
    multiFactor(user).getSession().then(function (multiFactorSession) {
        // ...
    });
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. تهيئة كائن PhoneInfoOptions برقم هاتف المستخدم والجلسة متعددة العوامل:

    واجهة برمجة تطبيقات الويب المعيارية

    // Specify the phone number and pass the MFA session.
    const phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. إرسال رسالة تحقق إلى هاتف المستخدم:

    واجهة برمجة تطبيقات الويب المعيارية

    import { PhoneAuthProvider } from "firebase/auth";
    
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed to complete enrollment.
        });
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for enrollment completion.
      })
    

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

  7. إذا فشل الطلب، قم بإعادة تعيين reCAPTCHA، ثم كرر الخطوة السابقة حتى يتمكن المستخدم من المحاولة مرة أخرى. لاحظ أن verifyPhoneNumber() سيقوم بإعادة تعيين reCAPTCHA تلقائيًا عندما يلقي خطأً، حيث أن رموز reCAPTCHA المميزة تُستخدم لمرة واحدة فقط.

    واجهة برمجة تطبيقات الويب المعيارية

    recaptchaVerifier.clear();
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    recaptchaVerifier.clear();
    
  8. بمجرد إرسال رمز الرسائل القصيرة، اطلب من المستخدم التحقق من الرمز:

    واجهة برمجة تطبيقات الويب المعيارية

    // Ask user for the verification code. Then:
    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. تهيئة كائن MultiFactorAssertion باستخدام PhoneAuthCredential :

    واجهة برمجة تطبيقات الويب المعيارية

    import { PhoneMultiFactorGenerator } from "firebase/auth";
    
    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. أكمل التسجيل. اختياريًا، يمكنك تحديد اسم عرض للعامل الثاني. يعد هذا مفيدًا للمستخدمين الذين لديهم عوامل ثانية متعددة، حيث يتم إخفاء رقم الهاتف أثناء تدفق المصادقة (على سبيل المثال، +1******1234).

    واجهة برمجة تطبيقات الويب المعيارية

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
    

يوضح الكود أدناه مثالاً كاملاً لتسجيل العامل الثاني:

واجهة برمجة تطبيقات الويب المعيارية

import {
    multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
    RecaptchaVerifier
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
multiFactor(user).getSession()
    .then(function (multiFactorSession) {
        // Specify the phone number and pass the MFA session.
        const phoneInfoOptions = {
            phoneNumber: phoneNumber,
            session: multiFactorSession
        };

        const phoneAuthProvider = new PhoneAuthProvider(auth);

        // Send SMS verification code.
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
    }).then(function (verificationId) {
        // Ask user for the verification code. Then:
        const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
        const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

        // Complete enrollment.
        return multiFactor(user).enroll(multiFactorAssertion, mfaDisplayName);
    });

واجهة برمجة تطبيقات مساحة اسم الويب

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
user.multiFactor.getSession().then(function(multiFactorSession) {
  // Specify the phone number and pass the MFA session.
  var phoneInfoOptions = {
    phoneNumber: phoneNumber,
    session: multiFactorSession
  };
  var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
  // Send SMS verification code.
  return phoneAuthProvider.verifyPhoneNumber(
      phoneInfoOptions, recaptchaVerifier);
})
.then(function(verificationId) {
  // Ask user for the verification code.
  var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
  var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
  // Complete enrollment.
  return user.multiFactor.enroll(multiFactorAssertion, mfaDisplayName);
});

تهانينا! لقد نجحت في تسجيل عامل مصادقة ثانٍ للمستخدم.

تسجيل دخول المستخدمين بالعامل الثاني

لتسجيل دخول مستخدم باستخدام التحقق الثنائي عبر الرسائل النصية القصيرة:

  1. قم بتسجيل دخول المستخدم باستخدام العامل الأول الخاص به، ثم اكتشف خطأ auth/multi-factor-auth-required . يحتوي هذا الخطأ على محلل وتلميحات حول العوامل الثانية المسجلة وجلسة أساسية تثبت نجاح مصادقة المستخدم باستخدام العامل الأول.

    على سبيل المثال، إذا كان العامل الأول للمستخدم هو البريد الإلكتروني وكلمة المرور:

    واجهة برمجة تطبيقات الويب المعيارية

    import { getAuth, getMultiFactorResolver} from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
        .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') {
                // The user is a multi-factor user. Second factor challenge is required.
                resolver = getMultiFactorResolver(auth, error);
                // ...
            } else if (error.code == 'auth/wrong-password') {
                // Handle other errors such as wrong password.
            }
    });
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    firebase.auth().signInWithEmailAndPassword(email, password)
      .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') {
          // The user is a multi-factor user. Second factor challenge is required.
          resolver = error.resolver;
          // ...
        } else if (error.code == 'auth/wrong-password') {
          // Handle other errors such as wrong password.
        } ...
      });
    

    إذا كان العامل الأول للمستخدم هو موفر موحد، مثل OAuth، أو SAML، أو OIDC، فاكتشف الخطأ بعد استدعاء signInWithPopup() أو signInWithRedirect() .

  2. إذا كان لدى المستخدم عدة عوامل ثانوية مسجلة، فاسأله عن العامل الذي سيستخدمه:

    واجهة برمجة تطبيقات الويب المعيارية

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    
    if (resolver.hints[selectedIndex].factorId ===
        PhoneMultiFactorGenerator.FACTOR_ID) {
        // User selected a phone second factor.
        // ...
    } else if (resolver.hints[selectedIndex].factorId ===
               TotpMultiFactorGenerator.FACTOR_ID) {
        // User selected a TOTP second factor.
        // ...
    } else {
        // Unsupported second factor.
    }
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    if (resolver.hints[selectedIndex].factorId === firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
      // User selected a phone second factor.
      // ...
    } else if (resolver.hints[selectedIndex].factorId === firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
      // User selected a TOTP second factor.
      // ...
    } else {
      // Unsupported second factor.
    }
    
  3. قم بتهيئة أداة التحقق reCAPTCHA كما هو موضح في القسم السابق. قم بتخطي هذه الخطوة إذا تم تكوين مثيل RecaptchaVerifier بالفعل:

    واجهة برمجة تطبيقات الويب المعيارية

    import { RecaptchaVerifier } from "firebase/auth";
    
    recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. قم بتهيئة كائن PhoneInfoOptions باستخدام رقم هاتف المستخدم والجلسة متعددة العوامل. هذه القيم موجودة في كائن resolver الذي تم تمريره إلى خطأ auth/multi-factor-auth-required :

    واجهة برمجة تطبيقات الويب المعيارية

    const phoneInfoOptions = {
        multiFactorHint: resolver.hints[selectedIndex],
        session: resolver.session
    };
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. إرسال رسالة تحقق إلى هاتف المستخدم:

    واجهة برمجة تطبيقات الويب المعيارية

    // Send SMS verification code.
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed for sign-in completion.
        });
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for sign-in completion.
      })
    
  6. إذا فشل الطلب، فأعد تعيين reCAPTCHA، ثم كرر الخطوة السابقة حتى يتمكن المستخدم من المحاولة مرة أخرى:

    واجهة برمجة تطبيقات الويب المعيارية

    recaptchaVerifier.clear();
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    recaptchaVerifier.clear();
    
  7. بمجرد إرسال رمز الرسائل القصيرة، اطلب من المستخدم التحقق من الرمز:

    واجهة برمجة تطبيقات الويب المعيارية

    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. تهيئة كائن MultiFactorAssertion باستخدام PhoneAuthCredential :

    واجهة برمجة تطبيقات الويب المعيارية

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. قم باستدعاء resolver.resolveSignIn() لإكمال المصادقة الثانوية. يمكنك بعد ذلك الوصول إلى نتيجة تسجيل الدخول الأصلية، والتي تتضمن البيانات القياسية الخاصة بالموفر وبيانات اعتماد المصادقة:

    واجهة برمجة تطبيقات الويب المعيارية

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
        .then(function (userCredential) {
            // userCredential will also contain the user, additionalUserInfo, optional
            // credential (null for email/password) associated with the first factor sign-in.
    
            // For example, if the user signed in with Google as a first factor,
            // userCredential.additionalUserInfo will contain data related to Google
            // provider that the user signed in with.
            // - user.credential contains the Google OAuth credential.
            // - user.credential.accessToken contains the Google OAuth access token.
            // - user.credential.idToken contains the Google OAuth ID token.
        });
    

    واجهة برمجة تطبيقات مساحة اسم الويب

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
      .then(function(userCredential) {
        // userCredential will also contain the user, additionalUserInfo, optional
        // credential (null for email/password) associated with the first factor sign-in.
        // For example, if the user signed in with Google as a first factor,
        // userCredential.additionalUserInfo will contain data related to Google provider that
        // the user signed in with.
        // user.credential contains the Google OAuth credential.
        // user.credential.accessToken contains the Google OAuth access token.
        // user.credential.idToken contains the Google OAuth ID token.
      });
    

يوضح الكود أدناه مثالاً كاملاً لتسجيل الدخول لمستخدم متعدد العوامل:

واجهة برمجة تطبيقات الويب المعيارية

import {
    getAuth,
    getMultiFactorResolver,
    PhoneAuthProvider,
    PhoneMultiFactorGenerator,
    RecaptchaVerifier,
    signInWithEmailAndPassword
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
    .then(function (userCredential) {
        // User is not enrolled with a second factor and is successfully
        // signed in.
        // ...
    })
    .catch(function (error) {
        if (error.code == 'auth/multi-factor-auth-required') {
            const resolver = getMultiFactorResolver(auth, error);
            // Ask user which second factor to use.
            if (resolver.hints[selectedIndex].factorId ===
                PhoneMultiFactorGenerator.FACTOR_ID) {
                const phoneInfoOptions = {
                    multiFactorHint: resolver.hints[selectedIndex],
                    session: resolver.session
                };
                const phoneAuthProvider = new PhoneAuthProvider(auth);
                // Send SMS verification code
                return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
                    .then(function (verificationId) {
                        // Ask user for the SMS verification code. Then:
                        const cred = PhoneAuthProvider.credential(
                            verificationId, verificationCode);
                        const multiFactorAssertion =
                            PhoneMultiFactorGenerator.assertion(cred);
                        // Complete sign-in.
                        return resolver.resolveSignIn(multiFactorAssertion)
                    })
                    .then(function (userCredential) {
                        // User successfully signed in with the second factor phone number.
                    });
            } else if (resolver.hints[selectedIndex].factorId ===
                       TotpMultiFactorGenerator.FACTOR_ID) {
                // Handle TOTP MFA.
                // ...
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

واجهة برمجة تطبيقات مساحة اسم الويب

var resolver;
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    // User is not enrolled with a second factor and is successfully signed in.
    // ...
  })
  .catch(function(error) {
    if (error.code == 'auth/multi-factor-auth-required') {
      resolver = error.resolver;
      // Ask user which second factor to use.
      if (resolver.hints[selectedIndex].factorId ===
          firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
        var phoneInfoOptions = {
          multiFactorHint: resolver.hints[selectedIndex],
          session: resolver.session
        };
        var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
        // Send SMS verification code
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
          .then(function(verificationId) {
            // Ask user for the SMS verification code.
            var cred = firebase.auth.PhoneAuthProvider.credential(
                verificationId, verificationCode);
            var multiFactorAssertion =
                firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
            // Complete sign-in.
            return resolver.resolveSignIn(multiFactorAssertion)
          })
          .then(function(userCredential) {
            // User successfully signed in with the second factor phone number.
          });
      } else if (resolver.hints[selectedIndex].factorId ===
        firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
        // Handle TOTP MFA.
        // ...
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

تهانينا! لقد قمت بتسجيل دخول المستخدم بنجاح باستخدام المصادقة متعددة العوامل.

ماذا بعد