Fügen Sie Ihrer Web-App die Multi-Faktor-Authentifizierung hinzu

Wenn Sie mit Identity Platform auf Firebase Authentication aktualisiert haben, können Sie Ihrer Web-App eine mehrstufige SMS-Authentifizierung hinzufügen.

Die Multi-Faktor-Authentifizierung erhöht die Sicherheit Ihrer App. Während Angreifer häufig Passwörter und soziale Konten kompromittieren, ist das Abfangen einer Textnachricht schwieriger.

Bevor Sie beginnen

  1. Aktivieren Sie mindestens einen Anbieter, der die Multi-Faktor-Authentifizierung unterstützt. Jeder Anbieter unterstützt MFA, außer Telefonauthentifizierung, anonyme Authentifizierung und Apple Game Center.

  2. Stellen Sie sicher, dass Ihre App die E-Mails der Benutzer überprüft. MFA erfordert eine E-Mail-Bestätigung. Dies verhindert, dass sich böswillige Akteure mit einer E-Mail-Adresse, die ihnen nicht gehört, für einen Dienst registrieren und dann den tatsächlichen Eigentümer ausschließen, indem sie einen zweiten Faktor hinzufügen.

Verwendung von Mandantenfähigkeit

Wenn Sie die Multi-Faktor-Authentifizierung für die Verwendung in einer mandantenfähigen Umgebung aktivieren, stellen Sie sicher, dass Sie die folgenden Schritte ausführen (zusätzlich zu den restlichen Anweisungen in diesem Dokument):

  1. Wählen Sie in der GCP Console den Mandanten aus, mit dem Sie arbeiten möchten.

  2. Legen Sie in Ihrem Code das Feld tenantId in der Auth Instanz auf die ID Ihres Mandanten fest. Zum Beispiel:

    Modulare Web-API

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

    Web-Namespace-API

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

Multi-Faktor-Authentifizierung aktivieren

  1. Öffnen Sie die Seite Authentifizierung > Anmeldemethode der Firebase-Konsole.

  2. Aktivieren Sie im Abschnitt „Erweitert“ die SMS-Multifaktor-Authentifizierung .

    Sie sollten auch die Telefonnummern eingeben, mit denen Sie Ihre App testen möchten. Die Registrierung von Testtelefonnummern ist zwar optional, wird jedoch dringend empfohlen, um eine Drosselung während der Entwicklung zu vermeiden.

  3. Wenn Sie die Domäne Ihrer App noch nicht autorisiert haben, fügen Sie sie der Zulassungsliste auf der Seite „Authentifizierung“ > „Einstellungen“ der Firebase-Konsole hinzu.

Auswählen eines Anmeldemusters

Sie können wählen, ob Ihre App eine Multi-Faktor-Authentifizierung erfordert und wie und wann Sie Ihre Benutzer registrieren. Einige häufige Muster sind:

  • Registrieren Sie den zweiten Faktor des Benutzers im Rahmen der Registrierung. Verwenden Sie diese Methode, wenn Ihre App eine mehrstufige Authentifizierung für alle Benutzer erfordert.

  • Bieten Sie bei der Registrierung eine überspringbare Option zur Registrierung eines zweiten Faktors an. Apps, die die Multi-Faktor-Authentifizierung fördern, aber nicht erfordern möchten, bevorzugen möglicherweise diesen Ansatz.

  • Bieten Sie die Möglichkeit, einen zweiten Faktor über die Konto- oder Profilverwaltungsseite des Benutzers anstelle des Anmeldebildschirms hinzuzufügen. Dies minimiert die Reibung während des Registrierungsprozesses und stellt gleichzeitig die Multi-Faktor-Authentifizierung für sicherheitsempfindliche Benutzer zur Verfügung.

  • Erfordern Sie das schrittweise Hinzufügen eines zweiten Faktors, wenn der Benutzer auf Funktionen mit erhöhten Sicherheitsanforderungen zugreifen möchte.

Einrichten des reCAPTCHA-Verifizierers

Bevor Sie SMS-Codes senden können, müssen Sie einen reCAPTCHA-Verifizierer konfigurieren. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern, indem sichergestellt wird, dass Anfragen zur Telefonnummernüberprüfung von einer der zulässigen Domänen Ihrer App stammen.

Sie müssen einen reCAPTCHA-Client nicht manuell einrichten; Das RecaptchaVerifier Objekt des Client-SDK erstellt und initialisiert automatisch alle erforderlichen Client-Schlüssel und Geheimnisse.

Verwendung von unsichtbarem reCAPTCHA

Das RecaptchaVerifier Objekt unterstützt unsichtbares reCAPTCHA , das den Benutzer häufig verifizieren kann, ohne dass eine Interaktion erforderlich ist. Um ein unsichtbares reCAPTCHA zu verwenden, erstellen Sie einen RecaptchaVerifier , dessen size auf invisible festgelegt ist, und geben Sie die ID des UI-Elements an, das die Multi-Faktor-Registrierung startet:

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

Web-Namespace-API

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

Verwendung des reCAPTCHA-Widgets

Um ein sichtbares reCAPTCHA-Widget zu verwenden, erstellen Sie ein HTML-Element, das das Widget enthält, und erstellen Sie dann ein RecaptchaVerifier -Objekt mit der ID des UI-Containers. Sie können optional auch Rückrufe festlegen, die aufgerufen werden, wenn das reCAPTCHA gelöst wird oder abläuft:

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

Web-Namespace-API

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

Vorab-Rendering des reCAPTCHA

Optional können Sie das reCAPTCHA vorab rendern, bevor Sie mit der Zwei-Faktor-Registrierung beginnen:

Modulare Web-API

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

Web-Namespace-API

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

Nachdem render() aufgelöst wurde, erhalten Sie die Widget-ID des reCAPTCHA, die Sie verwenden können, um Aufrufe an die reCAPTCHA-API zu tätigen:

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

RecaptchaVerifier abstrahiert diese Logik mit der Prüfmethode , sodass Sie die grecaptcha Variable nicht direkt verarbeiten müssen.

Einschreiben eines zweiten Faktors

So registrieren Sie einen neuen sekundären Faktor für einen Benutzer:

  1. Authentifizieren Sie den Benutzer erneut.

  2. Bitten Sie den Benutzer, seine Telefonnummer einzugeben.

  3. Initialisieren Sie den reCAPTCHA-Verifizierer wie im vorherigen Abschnitt dargestellt. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert ist:

    Modulare Web-API

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

    Web-Namespace-API

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Holen Sie sich eine Multi-Faktor-Sitzung für den Benutzer:

    Modulare Web-API

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

    Web-Namespace-API

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. Initialisieren Sie ein PhoneInfoOptions Objekt mit der Telefonnummer des Benutzers und der Multi-Faktor-Sitzung:

    Modulare Web-API

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

    Web-Namespace-API

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. Senden Sie eine Bestätigungsnachricht an das Telefon des Benutzers:

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

    Web-Namespace-API

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

    Obwohl dies nicht erforderlich ist, empfiehlt es sich, die Benutzer im Voraus darüber zu informieren, dass sie eine SMS-Nachricht erhalten und dass Standardtarife gelten.

  7. Wenn die Anfrage fehlschlägt, setzen Sie reCAPTCHA zurück und wiederholen Sie dann den vorherigen Schritt, damit der Benutzer es erneut versuchen kann. Beachten Sie, dass verifyPhoneNumber() das reCAPTCHA automatisch zurücksetzt, wenn es einen Fehler auslöst, da reCAPTCHA-Tokens nur zur einmaligen Verwendung bestimmt sind.

    Modulare Web-API

    recaptchaVerifier.clear();
    

    Web-Namespace-API

    recaptchaVerifier.clear();
    
  8. Sobald der SMS-Code gesendet wurde, bitten Sie den Benutzer, den Code zu bestätigen:

    Modulare Web-API

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

    Web-Namespace-API

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. Initialisieren Sie ein MultiFactorAssertion Objekt mit PhoneAuthCredential :

    Modulare Web-API

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

    Web-Namespace-API

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. Schließen Sie die Anmeldung ab. Optional können Sie einen Anzeigenamen für den zweiten Faktor angeben. Dies ist für Benutzer mit mehreren zweiten Faktoren nützlich, da die Telefonnummer während des Authentifizierungsvorgangs maskiert wird (z. B. +1******1234).

    Modulare Web-API

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

    Web-Namespace-API

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

Der folgende Code zeigt ein vollständiges Beispiel für die Registrierung eines zweiten Faktors:

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

Web-Namespace-API

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

Glückwunsch! Sie haben erfolgreich einen zweiten Authentifizierungsfaktor für einen Benutzer registriert.

Benutzer mit einem zweiten Faktor anmelden

So melden Sie einen Benutzer mit der Zwei-Faktor-SMS-Verifizierung an:

  1. Melden Sie den Benutzer mit seinem ersten Faktor an und fangen Sie dann den Fehler auth/multi-factor-auth-required ab. Dieser Fehler enthält einen Resolver, Hinweise zu den registrierten zweiten Faktoren und eine zugrunde liegende Sitzung, die beweist, dass sich der Benutzer erfolgreich mit dem ersten Faktor authentifiziert hat.

    Wenn der erste Faktor des Benutzers beispielsweise eine E-Mail-Adresse und ein Passwort wäre:

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

    Web-Namespace-API

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

    Wenn der erste Faktor des Benutzers ein Verbundanbieter wie OAuth, SAML oder OIDC ist, fangen Sie den Fehler nach dem Aufruf signInWithPopup() oder signInWithRedirect() ab.

  2. Wenn der Benutzer mehrere sekundäre Faktoren registriert hat, fragen Sie ihn, welchen er verwenden soll:

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

    Web-Namespace-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 === 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. Initialisieren Sie den reCAPTCHA-Verifizierer wie im vorherigen Abschnitt dargestellt. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert ist:

    Modulare Web-API

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

    Web-Namespace-API

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Initialisieren Sie ein PhoneInfoOptions Objekt mit der Telefonnummer des Benutzers und der Multi-Faktor-Sitzung. Diese Werte sind im resolver Objekt enthalten, das an den auth/multi-factor-auth-required Fehler übergeben wird:

    Modulare Web-API

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

    Web-Namespace-API

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. Senden Sie eine Bestätigungsnachricht an das Telefon des Benutzers:

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

    Web-Namespace-API

    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. Wenn die Anfrage fehlschlägt, setzen Sie reCAPTCHA zurück und wiederholen Sie dann den vorherigen Schritt, damit der Benutzer es erneut versuchen kann:

    Modulare Web-API

    recaptchaVerifier.clear();
    

    Web-Namespace-API

    recaptchaVerifier.clear();
    
  7. Sobald der SMS-Code gesendet wurde, bitten Sie den Benutzer, den Code zu bestätigen:

    Modulare Web-API

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

    Web-Namespace-API

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. Initialisieren Sie ein MultiFactorAssertion Objekt mit PhoneAuthCredential :

    Modulare Web-API

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Web-Namespace-API

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. Rufen Sie resolver.resolveSignIn() auf, um die sekundäre Authentifizierung abzuschließen. Anschließend können Sie auf das ursprüngliche Anmeldeergebnis zugreifen, das die standardmäßigen anbieterspezifischen Daten und Authentifizierungsdaten enthält:

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

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

Der folgende Code zeigt ein vollständiges Beispiel für die Anmeldung eines Multi-Faktor-Benutzers:

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

Web-Namespace-API

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

Glückwunsch! Sie haben einen Benutzer erfolgreich mithilfe der Multi-Faktor-Authentifizierung angemeldet.

Was kommt als nächstes