Multi-Faktor-Authentifizierung für Ihre Web-App hinzufügen

In diesem Artikel erfahren Sie, wie Sie einer Webanwendung die SMS-Multi-Faktor-Authentifizierung hinzufügen.

Die Multi-Faktor-Authentifizierung erhöht die Sicherheit Ihrer Anwendung. Während Angreifer häufig Passwörter und Konten bei sozialen Netzwerken missbrauchen, ist das Abfangen einer SMS schwieriger.

Vorbereitung

  1. Verwenden Sie einen Anbieter, der die Multi-Faktor-Authentifizierung unterstützt. Dazu gehören:

    • E-Mail-Adresse und Passwort
    • Link per E-Mail
    • Google
    • Facebook
    • Twitter
    • GitHub
    • Microsoft
    • Yahoo
    • LinkedIn
    • SAML
    • OIDC
  2. Achten Sie darauf, dass die Anwendung die E-Mail-Adressen der Nutzer überprüft. Die Multi-Faktor-Authentifizierung erfordert eine E-Mail-Bestätigung. So wird verhindert, dass sich böswillige Akteure bei einem Dienst mit einer E-Mail-Adresse registrieren, die ihnen nicht gehört, und dann den echten Inhaber sperren, indem sie einen zweiten Faktor hinzufügen.

Mehrmandantenfähigkeit verwenden

Wenn Sie die Multi-Faktor-Authentifizierung für die Verwendung in einer Multi-Mandanten-Umgebung aktivieren, führen Sie die folgenden Schritte zusätzlich zum Rest der Anleitung in diesem Dokument aus:

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

  • Setzen Sie in Ihrem Code das Feld tenantId in der Auth-Instanz auf die ID Ihres Mandanten. Beispiel:

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

Multi-Faktor-Authentifizierung aktivieren

  1. Rufen Sie in der Cloud Console die Seite Identity Platform MFA auf.
    Zur MFA-Seite

  2. Klicken Sie im Feld SMS-basierte Multi-Faktor-Authentifizierung auf Aktivieren.

  3. Geben Sie die Telefonnummern ein, mit denen Sie Ihre Anwendung testen möchten. Die Registrierung von Testnummern ist war optional, wird aber dringend empfohlen, um eine Drosselung während der Entwicklung zu vermeiden.

  4. Falls Sie die Domain Ihrer Anwendung noch nicht autorisiert haben, fügen Sie sie der Liste der zulässigen Anwendungen hinzu, indem Sie rechts auf Domain hinzufügen klicken.

  5. Klicken Sie auf Speichern.

Registrierungsmuster auswählen

Sie können auswählen, ob Ihre Anwendung eine Multi-Faktor-Authentifizierung erfordert, und wie und wann Ihre Nutzer registriert werden sollen. Hier einige gängige Muster:

  • Bieten Sie den zweiten Faktor des Nutzers als Teil der Registrierung an. Verwenden Sie diese Methode, wenn Ihre Anwendung eine Multi-Faktor-Authentifizierung für alle Nutzer erfordert.

  • Bieten Sie bei der Registrierung eine überspringbare Option an, mit der ein zweiter Faktor registriert werden kann. Anwendungen, die zwar zur Multi-Faktor-Authentifizierung ermutigen möchten, diese aber nicht erfordern, bevorzugen möglicherweise diesen Ansatz.

  • Ermöglichen Sie, dass ein zweiter Faktor über die Konto- oder Profilverwaltungsseite des Nutzers hinzufügbar ist anstelle über den Anmeldebildschirm. Dadurch wird der Registrierungsprozess vereinfacht und gleichzeitig die Multi-Faktor-Authentifizierung für sicherheitsorientierte Nutzer verfügbar gemacht.

  • Das Hinzufügen eines zweiten Faktors ist erforderlich, wenn der Nutzer auf Features mit höheren Sicherheitsanforderungen zugreifen möchte.

reCAPTCHA-Verifizierung einrichten

Bevor Sie SMS-Codes senden können, müssen Sie einen reCAPTCHA-Verifizierer konfigurieren. Identity Platform verwendet reCAPTCHA, um Missbrauch zu verhindern, indem sichergestellt wird, dass Anfragen zur Bestätigung der Telefonnummer von einer der zulässigen Domains Ihrer Anwendung stammen.

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

Unsichtbares reCAPTCHA verwenden

Das RecaptchaVerifier-Objekt unterstützt unsichtbares reCAPTCHA, das den Nutzer häufig ohne Interaktion überprüfen kann. Wenn Sie ein unsichtbares reCAPTCHA verwenden möchten, erstellen Sie eine RecaptchaVerifier, wobei der Parameter size auf invisible gesetzt ist, und geben Sie die ID des UI-Elements an, das die Multi-Faktor-Anmeldung startet:

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

reCAPTCHA-Widget verwenden

Wenn Sie ein sichtbares reCAPTCHA-Widget verwenden möchten, 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 Callbacks einrichten, die aufgerufen werden, wenn das reCAPTCHA aufgelöst wird oder abläuft:

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 vorab rendern

Optional können Sie das reCAPTCHA vorab rendern, bevor Sie die Zwei-Faktor-Registrierung starten:

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

Nachdem render() aufgelöst wurde, erhalten Sie die Widget-ID des reCAPTCHAs, mit der Sie die reCAPTCHA API aufrufen können:

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

Zweiten Faktor registrieren

So registrieren Sie einen neuen zweiten Faktor für einen Nutzer:

  1. Authentifizieren Sie den Nutzer noch einmal.

  2. Fordern Sie den Nutzer zur Eingabe seiner Telefonnummer auf.

  3. Initialisieren Sie die reCAPTCHA-Verifizierung wie im vorherigen Abschnitt beschrieben. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert wurde:

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(container);
    
  4. Starten Sie eine Multi-Faktor-Sitzung für den Nutzer:

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

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

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

    Als Best Practice wird empfohlen, die Nutzer vorab darüber zu informieren, dass sie eine SMS erhalten und dabei die üblichen Gebühren anfallen.

  7. Wenn die Anfrage fehlschlägt, setzen Sie das reCAPTCHA zurück und wiederholen Sie den vorherigen Schritt, damit der Nutzer es noch einmal versuchen kann. Beachten Sie, dass verifyPhoneNumber() das reCAPTCHA automatisch zurückgesetzt, wenn ein Fehler auftritt, da reCAPTCHA-Tokens nur einmalig verwendet werden.

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  8. Nachdem der SMS-Code gesendet wurde, bitten Sie den Nutzer, den Code zu bestätigen:

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

    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 Nutzer mit mehreren zweiten Faktoren hilfreich, da die Telefonnummer während des Authentifizierungsvorgangs maskiert wird (z. B. +1******1234).

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

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(container);
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 Nutzer registriert.

Nutzer mit einem zweiten Faktor anmelden

So melden Sie einen Nutzer mit der SMS-Bestätigung in zwei Schritten an:

  1. Melden Sie den Nutzer mit dessen ersten Faktor an. Dann rufen Sie den Fehler auth/multi-factor-auth-required ab. Dieser Fehler enthält einen Resolver, enthält Hinweise zu den registrierten zweiten Faktoren und einer zugrunde liegenden Sitzung, die bestätigt, dass der Nutzer mit dem ersten Faktor authentifiziert wurde.

    Wenn der erste Faktor des Nutzers beispielsweise eine E-Mail und ein Passwort war, tun Sie Folgendes:

    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 Nutzers ein föderierter Anbieter wie OAuth, SAML oder OIDC ist, wird der Fehler nach dem Aufruf von signInWithPopup() oder signInWithRedirect() abgefangen.

  2. Wenn der Nutzer mehrere sekundäre Faktoren registriert hat, fragen Sie ihn, welchen er verwenden möchte:

    // 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 {
      // Unsupported second factor.
      // Note that only phone second factors are currently supported.
    }
    
  3. Initialisieren Sie die reCAPTCHA-Verifizierung wie im vorherigen Abschnitt beschrieben. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert wurde:

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

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

    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 das reCAPTCHA zurück und wiederholen Sie den vorherigen Schritt, damit der Nutzer es noch einmal versuchen kann:

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  7. Nachdem der SMS-Code gesendet wurde, bitten Sie den Nutzer, den Code zu bestätigen:

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

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

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

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 {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

Glückwunsch! Sie haben sich erfolgreich mit einer Multi-Faktor-Authentifizierung für einen Nutzer angemeldet.

Nächste Schritte