Dodawanie uwierzytelniania wielopoziomowego do aplikacji internetowej

Jeśli masz subskrypcję Firebase Authentication with Identity Platform, możesz dodać do aplikacji internetowej uwierzytelnianie wielopoziomowe z użyciem SMS-ów.

Uwierzytelnianie wielopoziomowe zwiększa poziom bezpieczeństwa aplikacji. Osoby przeprowadzające ataki często przejmują hasła i konta społecznościowe, ale przechwycenie SMS-a jest dużo trudniejsze.

Zanim zaczniesz

  1. Włącz co najmniej jednego dostawcę obsługującego uwierzytelnianie wielopoziomowe. Każdy dostawca obsługuje uwierzytelnianie wieloskładnikowe z wyjątkiem uwierzytelniania przez telefon, anonimowego i za pomocą Apple Game Center.

  2. Włącz regiony, w których planujesz używać uwierzytelniania SMS-em. Firebase korzysta z zasad dotyczących regionów SMS-ów, które w pełni blokują SMS-y. Pomaga to domyślnie tworzyć projekty w bezpieczniejszym stanie.

  3. Sprawdź, czy aplikacja weryfikuje adresy e-mail użytkowników. MFA wymaga weryfikacji adresu e-mail. Zapobiega to rejestrowaniu się hakerów w usłudze za pomocą adresu e-mail, który nie należy do nich, a następnie blokowaniu dostępu do konta prawdziwemu właścicielowi przez dodanie drugiego etapu weryfikacji.

Korzystanie ze środowiska wielu najemców

Jeśli włączasz uwierzytelnianie wielopoziomowe do użytku w środowisku wielodostępnym, wykonaj te czynności (oprócz pozostałych instrukcji w tym dokumencie):

  1. W konsoli Google Cloud wybierz klienta, z którym chcesz pracować.

  2. W kodzie ustaw pole tenantId w instancji Auth na identyfikator Twojej domeny. Przykład:

    Web 

    import { getAuth } from "firebase/auth";

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

    Web 

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

Włączanie uwierzytelniania wielopoziomowego

  1. Otwórz stronę Uwierzytelnianie > Metoda logowania w konsoli Firebase.

  2. W sekcji Zaawansowane włącz Uwierzytelnianie wielopoziomowe z użyciem SMS-ów.

    Podaj też numery telefonów, których użyjesz do testowania aplikacji. Chociaż rejestracja numerów telefonów do testów jest opcjonalna, zdecydowanie ją zalecamy, ponieważ pozwoli uniknąć ograniczeń podczas programowania.

  3. Jeśli domena aplikacji nie została jeszcze autoryzowana, dodaj ją do listy dozwolonych na stronie Uwierzytelnianie > Ustawienia w konsoli Firebase.

Wybieranie wzorca rejestracji

Możesz określić, czy Twoja aplikacja wymaga uwierzytelniania wielopoziomowego, a także jak i kiedy rejestrować użytkowników. Oto kilka typowych wzorców:

  • Zarejestruj drugi składnik użytkownika w ramach rejestracji. Użyj tej metody, jeśli Twoja aplikacja wymaga uwierzytelniania wielopoziomowego od wszystkich użytkowników.

  • Podczas rejestracji oferuj opcję pominięcia rejestracji drugiego składnika. Aplikacje, które chcą zachęcać do uwierzytelniania wielopoziomowego, ale nie wymagają go, mogą preferować to podejście.

  • Umożliwienie dodania drugiego czynnika na stronie zarządzania kontem lub profilem użytkownika, a nie na ekranie rejestracji. Minimalizuje to trudności podczas procesu rejestracji, a jednocześnie udostępnia uwierzytelnianie wielopoziomowe użytkownikom, dla których bezpieczeństwo jest priorytetem.

  • Wymagaj dodania drugiego etapu weryfikacji w przypadku, gdy użytkownik chce uzyskać dostęp do funkcji o zwiększonych wymaganiach dotyczących bezpieczeństwa.

Konfigurowanie weryfikatora reCAPTCHA

Zanim zaczniesz wysyłać kody SMS, musisz skonfigurować weryfikator reCAPTCHA. Firebase korzysta z reCAPTCHA, aby zapobiegać nadużyciom, zapewniając, że żądania weryfikacji numeru telefonu pochodzą z jednej z dozwolonych domen aplikacji.

Nie musisz ręcznie konfigurować klienta reCAPTCHA. Obiekt RecaptchaVerifier pakietu SDK klienta automatycznie tworzy i inicjuje wszystkie niezbędne klucze i tajne kody klienta.

Korzystanie z niewidocznej reCAPTCHA

Obiekt RecaptchaVerifier obsługuje niewidoczną reCAPTCHA, która często może zweryfikować użytkownika bez konieczności podejmowania przez niego żadnych działań. Aby użyć niewidocznej reCAPTCHA, utwórz element RecaptchaVerifier z parametrem size ustawionym na invisible i określ identyfikator elementu interfejsu, który rozpoczyna rejestrację wieloskładnikową:

Web 

import { RecaptchaVerifier, getAuth } from "firebase/auth";

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

Web 

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

Korzystanie z widżetu reCAPTCHA

Aby użyć widocznego widżetu reCAPTCHA, utwórz element HTML, który będzie zawierać widżet, a następnie utwórz obiekt RecaptchaVerifier z identyfikatorem kontenera interfejsu. Możesz też opcjonalnie ustawić wywołania zwrotne, które są wywoływane po rozwiązaniu lub wygaśnięciu reCAPTCHA:

Web 

import { RecaptchaVerifier, getAuth } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier(
    getAuth(),
    "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.
        // ...
      }
    }
);

Web 

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

Wstępne renderowanie reCAPTCHA

Opcjonalnie możesz wstępnie wyrenderować reCAPTCHA przed rozpoczęciem rejestracji w ramach weryfikacji dwuetapowej:

Web 

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

Web 

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

Po rozwiązaniu obietnicy render() otrzymasz identyfikator widżetu reCAPTCHA, którego możesz użyć do wywoływania interfejsu reCAPTCHA API:

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

Klasa RecaptchaVerifier ukrywa tę logikę za pomocą metody verify, więc nie musisz bezpośrednio obsługiwać zmiennej grecaptcha.

Rejestrowanie drugiego składnika

Aby zarejestrować nowy czynnik dodatkowy dla użytkownika:

  1. Ponownie uwierzytelnij użytkownika.

  2. Poproś użytkownika o podanie numeru telefonu.

    musisz uzyskać ich odpowiednią zgodę.

  3. Zainicjuj weryfikator reCAPTCHA zgodnie z opisem w poprzedniej sekcji. Pomiń ten krok, jeśli instancja RecaptchaVerifier jest już skonfigurowana:

    Web 

    import { RecaptchaVerifier, getAuth } from "firebase/auth";

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

    Web 

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

  4. Uzyskiwanie sesji uwierzytelniania wielopoziomowego dla użytkownika:

    Web 

    import { multiFactor } from "firebase/auth";

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

    Web 

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

  5. Zainicjuj obiekt PhoneInfoOptions za pomocą numeru telefonu użytkownika i sesji uwierzytelniania wieloskładnikowego:

    Web 

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

    Web 

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

  6. Wyślij wiadomość weryfikacyjną na telefon użytkownika:

    Web 

    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 

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

    Chociaż nie jest to wymagane, warto wcześniej poinformować użytkowników, że otrzymają SMS-a, i że obowiązują standardowe stawki.

  7. Jeśli żądanie się nie powiedzie, zresetuj reCAPTCHA, a potem powtórz poprzedni krok, aby użytkownik mógł spróbować ponownie. Pamiętaj, że verifyPhoneNumber() automatycznie zresetuje reCAPTCHA, gdy wystąpi błąd, ponieważ tokeny reCAPTCHA są jednorazowe.

    Web 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  8. Gdy kod SMS zostanie wysłany, poproś użytkownika o jego weryfikację:

    Web 

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

    Web 

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

  9. Zainicjuj obiekt MultiFactorAssertion za pomocą PhoneAuthCredential:

    Web 

    import { PhoneMultiFactorGenerator } from "firebase/auth";

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

  10. Dokończ rejestrację. Opcjonalnie możesz podać wyświetlaną nazwę drugiego czynnika. Jest to przydatne dla użytkowników, którzy mają kilka składników uwierzytelniania dwuskładnikowego, ponieważ numer telefonu jest maskowany podczas procesu uwierzytelniania (np. +1******1234).

    Web 

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

    Web 

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

Poniższy kod pokazuje kompletny przykład rejestracji drugiego czynnika:

Web 

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

const recaptchaVerifier = new RecaptchaVerifier(getAuth(),
    'recaptcha-container-id', undefined);
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 

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

Gratulacje! Udało Ci się zarejestrować drugi składnik uwierzytelniania dla użytkownika.

Logowanie użytkowników za pomocą drugiego składnika

Aby zalogować użytkownika za pomocą weryfikacji dwuskładnikowej przez SMS:

  1. Zaloguj użytkownika za pomocą pierwszego czynnika, a następnie przechwyć błąd auth/multi-factor-auth-required. Ten błąd zawiera resolver, wskazówki dotyczące zarejestrowanych metod uwierzytelniania dwuskładnikowego i sesję bazową, która potwierdza, że użytkownik został uwierzytelniony przy użyciu pierwszego poziomu uwierzytelnienia wielopoziomowego.

    Jeśli na przykład pierwszym składnikiem uwierzytelniania użytkownika był adres e-mail i hasło:

    Web 

    import { getAuth, signInWithEmailAndPassword, 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 

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

    Jeśli pierwszym czynnikiem użytkownika jest dostawca federacyjny, np. OAuth, SAML lub OIDC, przechwyć błąd po wywołaniu funkcji signInWithPopup() lub signInWithRedirect().

  2. Jeśli użytkownik ma zarejestrowanych kilka składników dodatkowych, zapytaj go, którego z nich chce użyć:

    Web 

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

    // 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. Zainicjuj weryfikator reCAPTCHA zgodnie z opisem w poprzedniej sekcji. Pomiń ten krok, jeśli instancja RecaptchaVerifier jest już skonfigurowana:

    Web 

    import { RecaptchaVerifier, getAuth } from "firebase/auth";

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

    Web 

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

  4. Zainicjuj obiekt PhoneInfoOptions za pomocą numeru telefonu użytkownika i sesji uwierzytelniania wieloskładnikowego. Wartości te znajdują się w obiekcie resolver przekazywanym do błędu auth/multi-factor-auth-required:

    Web 

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

    Web 

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

  5. Wyślij wiadomość weryfikacyjną na telefon użytkownika:

    Web 

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

    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. Jeśli żądanie się nie powiedzie, zresetuj reCAPTCHA, a potem powtórz poprzedni krok, aby użytkownik mógł spróbować ponownie:

    Web 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  7. Gdy kod SMS zostanie wysłany, poproś użytkownika o jego weryfikację:

    Web 

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

    Web 

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

  8. Zainicjuj obiekt MultiFactorAssertion za pomocą PhoneAuthCredential:

    Web 

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

  9. Zadzwoń pod numer resolver.resolveSignIn(), aby dokończyć uwierzytelnianie dodatkowe. Następnie możesz uzyskać dostęp do pierwotnego wyniku logowania, który zawiera standardowe dane specyficzne dla dostawcy i dane logowania:

    Web 

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

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

Poniższy kod przedstawia pełny przykład logowania użytkownika z uwierzytelnianiem wieloskładnikowym:

Web 

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

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

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 

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

Gratulacje! Udało Ci się zalogować użytkownika za pomocą uwierzytelniania wielopoziomowego.

Co dalej?