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

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

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

قبل ان تبدأ

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

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

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

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

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

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

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

    import { getAuth } from "firebase/auth";

const auth = getAuth(app);
auth.tenantId = "myTenantId1";

    واجهة برمجة تطبيقات Web namespaced

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

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

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

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

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

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

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

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

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

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

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

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

إعداد مدقق reCAPTCHA

قبل أن تتمكن من إرسال رموز SMS ، تحتاج إلى تكوين أداة تحقق 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);

واجهة برمجة تطبيقات Web namespaced

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
);

واجهة برمجة تطبيقات Web namespaced

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;
    });

واجهة برمجة تطبيقات Web namespaced

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);

    واجهة برمجة تطبيقات Web namespaced

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');

  4. احصل على جلسة متعددة العوامل للمستخدم:

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

    import { multiFactor } from "firebase/auth";

multiFactor(user).getSession().then(function (multiFactorSession) {
    // ...
});

    واجهة برمجة تطبيقات Web namespaced

    user.multiFactor.getSession().then(function(multiFactorSession) {
  // ...
})

  5. قم بتهيئة كائن PhoneInfoOptions برقم هاتف المستخدم والجلسة متعددة العوامل:

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

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

    واجهة برمجة تطبيقات Web namespaced

    // 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.
    });

    واجهة برمجة تطبيقات Web namespaced

    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();

    واجهة برمجة تطبيقات Web namespaced

    recaptchaVerifier.clear();

  8. بمجرد إرسال رمز SMS ، اطلب من المستخدم التحقق من الرمز:

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

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

    واجهة برمجة تطبيقات Web namespaced

    // 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);

    واجهة برمجة تطبيقات Web namespaced

    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");

    واجهة برمجة تطبيقات Web namespaced

    // 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);
    });

واجهة برمجة تطبيقات Web namespaced

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);
});

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

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

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

  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.
        }
});

    واجهة برمجة تطبيقات Web namespaced

    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.
}

    واجهة برمجة تطبيقات Web namespaced

    // 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);

    واجهة برمجة تطبيقات Web namespaced

    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
};

    واجهة برمجة تطبيقات Web namespaced

    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.
    });

    واجهة برمجة تطبيقات Web namespaced

    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();

    واجهة برمجة تطبيقات Web namespaced

    recaptchaVerifier.clear();

  7. بمجرد إرسال رمز SMS ، اطلب من المستخدم التحقق من الرمز:

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

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

    واجهة برمجة تطبيقات Web namespaced

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

  8. تهيئة كائن MultiFactorAssertion باستخدام PhoneAuthCredential :

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

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    واجهة برمجة تطبيقات Web namespaced

    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.
    });

    واجهة برمجة تطبيقات Web namespaced

    // 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.
        }
    });

واجهة برمجة تطبيقات Web namespaced

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.
    } ...
  });

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

ماذا بعد