Dodawanie uwierzytelniania wielopoziomowego do aplikacji internetowej

Po przejściu na Uwierzytelnianie Firebase z Identity Platform możesz dodać do swojej aplikacji internetowej uwierzytelnianie wielopoziomowe przy użyciu SMS-ów.

Uwierzytelnianie wielopoziomowe zwiększa bezpieczeństwo aplikacji. Hakerzy często przejmują hasła i konta społecznościowe, ale przechwycenie SMS-a jest trudniejsze.

Zanim zaczniesz

  1. Włącz co najmniej 1 dostawcę, który obsługuje uwierzytelnianie wielopoziomowe. Każdy dostawca obsługuje MFA z wyjątkiem uwierzytelniania telefonicznego, uwierzytelniania anonimowego i Apple Game Center.

  2. Włącz regiony, w których chcesz używać uwierzytelniania SMS. Firebase wykorzystuje całkowicie blokujące SMS-y zasady dotyczące regionów, co pomaga domyślnie tworzyć projekty w bezpieczniejszym stanie.

  3. Upewnij się, że Twoja aplikacja weryfikuje adresy e-mail użytkowników. MFA wymaga weryfikacji adresu e-mail. Dzięki temu hakerzy nie będą mogli zarejestrować się w usłudze przy użyciu adresu e-mail, który nie należą do nich, i zablokować prawdziwego właściciela przez dodanie drugiego składnika.

Korzystanie ze środowiska wielu najemców

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

  1. W konsoli GCP wybierz najemcę, z którym chcesz współpracować.

  2. W kodzie w polu tenantId instancji Auth ustaw identyfikator najemcy. Przykład:

    Web Modular API 

    import { getAuth } from "firebase/auth";

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

    Interfejs API internetowej przestrzeni nazw 

    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 przez SMS-y.

    Wpisz też numery telefonów, które będą używane podczas testowania aplikacji. Choć jest to opcjonalne, zdecydowanie zalecamy zarejestrowanie testowych numerów telefonów, aby uniknąć ograniczenia przepustowości na etapie programowania.

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

Wybór wzorca rejestracji

Możesz określić, czy Twoja aplikacja wymaga uwierzytelniania wielopoziomowego oraz jak i kiedy rejestrować użytkowników. Oto kilka często spotykanych wzorców:

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

  • Zaoferować możliwą do pominięcia opcję rejestracji drugiego składnika podczas rejestracji. Mogą preferować aplikacje, które chcą zachęcać do uwierzytelniania wielopoziomowego, ale nie wymagają ich.

  • Umożliwienie dodawania drugiego składnika na stronie konta użytkownika lub na stronie zarządzania profilem użytkownika zamiast na ekranie rejestracji. Pozwala to zminimalizować utrudnienia podczas procesu rejestracji, a jednocześnie umożliwić korzystanie z uwierzytelniania wielopoziomowego użytkownikom, którym zależy na bezpieczeństwie.

  • Wymagaj stopniowego dodawania drugiego składnika, gdy użytkownik chce uzyskać dostęp do funkcji o wyższych wymaganiach w zakresie bezpieczeństwa.

Konfigurowanie weryfikatora reCAPTCHA

Zanim będzie można wysyłać kody SMS, musisz skonfigurować weryfikatora reCAPTCHA. Firebase używa reCAPTCHA, aby zapobiegać nadużyciom, sprawdzając, czy żądania weryfikacji numeru telefonu pochodzą z jednej z dozwolonych domen aplikacji.

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

Używanie niewidocznego reCAPTCHA

Obiekt RecaptchaVerifier obsługuje niewidoczną reCAPTCHA, która często weryfikuje użytkownika bez konieczności wykonywania żadnych interakcji. Aby użyć niewidocznego reCAPTCHA, utwórz RecaptchaVerifier z parametrem size ustawionym na invisible i podaj identyfikator elementu interfejsu, który rozpoczyna rejestrację wielopoziomową:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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 zawierający widżet, a następnie utwórz obiekt RecaptchaVerifier z identyfikatorem kontenera UI. Możesz też opcjonalnie ustawić wywołania zwrotne, które są wywoływane po rozwiązaniu lub wygaśnięciu reCAPTCHA:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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 dwuskładnikowej:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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

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

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

RecaptchaVerifier wyodrębnia tę logikę przy użyciu 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.

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

    Web Modular API 

    import { RecaptchaVerifier } from "firebase/auth";

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

    Interfejs API internetowej przestrzeni nazw 

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

  4. Pobierz sesję wielopoziomową dla użytkownika:

    Web Modular API 

    import { multiFactor } from "firebase/auth";

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

    Interfejs API internetowej przestrzeni nazw 

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

  5. Zainicjuj obiekt PhoneInfoOptions numerem telefonu użytkownika i rozpocznij sesję wielopoziomową:

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

    import { PhoneAuthProvider } from "firebase/auth";

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

    Interfejs API internetowej przestrzeni nazw 

    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 poinformować użytkowników z wyprzedzeniem, że otrzymają SMS-a i że zostaną naliczone standardowe opłaty.

  7. Jeśli żądanie się nie powiedzie, zresetuj reCAPTCHA i powtórz poprzedni krok, aby użytkownik mógł spróbować jeszcze raz. Pamiętaj, że verifyPhoneNumber() automatycznie resetuje reCAPTCHA po zgłoszeniu błędu, ponieważ tokeny reCAPTCHA są przeznaczone tylko do jednorazowego użytku.

    Web Modular API 

    recaptchaVerifier.clear();

    Interfejs API internetowej przestrzeni nazw 

    recaptchaVerifier.clear();

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

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

  9. Zainicjuj obiekt MultiFactorAssertion za pomocą interfejsu PhoneAuthCredential:

    Web Modular API 

    import { PhoneMultiFactorGenerator } from "firebase/auth";

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Interfejs API internetowej przestrzeni nazw 

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

  10. Dokończ rejestrację. Opcjonalnie możesz określić wyświetlaną nazwę drugiego składnika. Jest to przydatne w przypadku użytkowników z wieloma drugimi czynnikami, ponieważ numer telefonu jest maskowany podczas procesu uwierzytelniania (na przykład +1******1234).

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

Poniżej znajdziesz pełny przykład rejestrowania drugiego składnika:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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 etap uwierzytelniania dla użytkownika.

Logowanie użytkowników przy użyciu drugiego składnika

Aby zalogować użytkownika przy użyciu weryfikacji dwuetapowej przez SMS:

  1. Zaloguj użytkownika przy użyciu pierwszego składnika, a następnie wykryj błąd auth/multi-factor-auth-required. Ten błąd zawiera rozwiązanie do rozpoznawania nazw, wskazówki dotyczące zarejestrowanych drugich czynników i bazową sesję potwierdzającą, że użytkownik uwierzytelnił się przy użyciu pierwszego składnika.

    Jeśli np. pierwszym czynnikiem były adres e-mail i hasło użytkownika:

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

    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 składnikiem użytkownika jest dostawca sfederowany, taki jak OAuth, SAML lub OIDC, błąd zostanie wykryty po wywołaniu funkcji signInWithPopup() lub signInWithRedirect().

  2. Jeśli użytkownik ma zarejestrowanych kilka czynników dodatkowych, zapytaj go, którego z nich użyje:

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

    Web Modular API 

    import { RecaptchaVerifier } from "firebase/auth";

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

    Interfejs API internetowej przestrzeni nazw 

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

  4. Zainicjuj obiekt PhoneInfoOptions numerem telefonu użytkownika i rozpocznij sesję wielopoziomową. Te wartości znajdują się w obiekcie resolver przekazywanym do błędu auth/multi-factor-auth-required:

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

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

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

    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 i powtórz poprzedni krok, aby użytkownik mógł spróbować jeszcze raz:

    Web Modular API 

    recaptchaVerifier.clear();

    Interfejs API internetowej przestrzeni nazw 

    recaptchaVerifier.clear();

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

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

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

  8. Zainicjuj obiekt MultiFactorAssertion za pomocą interfejsu PhoneAuthCredential:

    Web Modular API 

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Interfejs API internetowej przestrzeni nazw 

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

  9. Wywołaj resolver.resolveSignIn(), aby ukończyć dodatkowe uwierzytelnianie. Następnie możesz uzyskać dostęp do pierwotnych wyników logowania, które zawierają standardowe dane uwierzytelniające dostawcy i dane uwierzytelniające:

    Web Modular API 

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

    Interfejs API internetowej przestrzeni nazw 

    // 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żej znajdziesz pełny przykład logowania użytkownika wielopoziomowego:

Web Modular API 

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

Interfejs API internetowej przestrzeni nazw 

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?