Multi-Faktor-Authentifizierung per TOTP zu Ihrer Webanwendung hinzufügen

Wenn Sie auf Firebase Authentication with Identity Platform aktualisiert haben, können Sie Ihrer App die Multi-Faktor-Authentifizierung (MFA) mit zeitbasierten Einmalpasswörtern (TOTP) hinzufügen.

Mit Firebase Authentication with Identity Platform können Sie ein TOTP als zusätzlichen Faktor für die MFA verwenden. Wenn Sie diese Funktion aktivieren, wird Nutzern, die versuchen, sich in Ihrer App anzumelden, eine Aufforderung zur Eingabe eines TOTP angezeigt. Dazu müssen sie eine Authenticator App verwenden, die gültige TOTP-Codes generieren kann, z. B. Google Authenticator.

Hinweis

  1. Aktivieren Sie mindestens einen Anbieter, der die Multi-Faktor-Authentifizierung unterstützt. Hinweis: Alle Anbieter außer den folgenden unterstützen die 2‑Faktor-Authentifizierung:

    • Telefonauthentifizierung
    • Anonyme Authentifizierung
    • Benutzerdefinierte Auth-Tokens
    • Apple Game Center
  2. Achten Sie darauf, dass Ihre App 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 Nutzer bei einem Dienst mit einer E‑Mail-Adresse registrieren, die ihnen nicht gehört, und dann den echten Inhaber der E‑Mail-Adresse sperren, indem sie einen zweiten Faktor hinzufügen.

  3. Installieren Sie das Firebase JavaScript SDK, falls noch nicht geschehen.

    Die TOTP-MFA wird nur im modularen Web-SDK ab Version 9.19.1 unterstützt.

TOTP-MFA aktivieren

Wenn Sie TOTP als zweiten Faktor aktivieren möchten, verwenden Sie die Admin SDK oder rufen Sie den REST-Endpunkt für die Projektkonfiguration auf.

So verwenden Sie das Admin SDK:

  1. Installieren Sie das Firebase Admin Node.js SDK, falls noch nicht geschehen.

    Die TOTP-MFA wird nur in Firebase Admin Node.js SDK-Versionen 11.6.0 und höher unterstützt.

  2. Führen Sie den folgenden Befehl aus:

    import { getAuth } from 'firebase-admin/auth';
    
    getAuth().projectConfigManager().updateProjectConfig(
    {
          multiFactorConfig: {
              providerConfigs: [{
                  state: "ENABLED",
                  totpProviderConfig: {
                      adjacentIntervals: NUM_ADJ_INTERVALS
                  }
              }]
          }
    })
    

    Ersetzen Sie Folgendes:

    • NUM_ADJ_INTERVALS: Die Anzahl der angrenzenden Zeitfensterintervalle, aus denen TOTPs akzeptiert werden sollen, von null bis zehn. Der Standardwert ist 5.

      TOTPs funktionieren, indem sichergestellt wird, dass zwei Parteien (der Prover und der Validator) dasselbe Passwort generieren, wenn sie OTPs innerhalb desselben Zeitfensters (in der Regel 30 Sekunden) generieren. Um jedoch die Zeitabweichung zwischen den Parteien und die menschliche Reaktionszeit zu berücksichtigen, können Sie den TOTP-Dienst so konfigurieren, dass er auch TOTPs aus angrenzenden Zeitfenstern akzeptiert.

So aktivieren Sie die TOTP-MFA mit der REST API:

curl -X PATCH "https://identitytoolkit.googleapis.com/admin/v2/projects/PROJECT_ID/config?updateMask=mfa" \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -H "X-Goog-User-Project: PROJECT_ID" \
    -d \
    '{
        "mfa": {
          "providerConfigs": [{
            "state": "ENABLED",
            "totpProviderConfig": {
              "adjacentIntervals": NUM_ADJ_INTERVALS
            }
          }]
       }
    }'

Ersetzen Sie Folgendes:

  • PROJECT_ID: die Projekt-ID
  • NUM_ADJ_INTERVALS: Die Anzahl der Zeitfensterintervalle, von 0 bis 10. Der Standardwert ist 5.

    TOTPs funktionieren, indem sichergestellt wird, dass zwei Parteien (der Prover und der Validator) dasselbe Passwort generieren, wenn sie OTPs innerhalb desselben Zeitfensters (in der Regel 30 Sekunden) generieren. Um jedoch die Zeitabweichung zwischen den Parteien und die menschliche Reaktionszeit zu berücksichtigen, können Sie den TOTP-Dienst so konfigurieren, dass er auch TOTPs aus angrenzenden Zeitfenstern akzeptiert.

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. Wenn Sie zwar zur Multi-Faktor-Authentifizierung in Ihrer App ermutigen möchten, diese aber nicht erfordern, können Sie diesen Ansatz verwenden.

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

Nutzer für TOTP-MFA registrieren

Nachdem Sie TOTP-MFA als zweiten Faktor für Ihre App aktiviert haben, müssen Sie clientseitige Logik implementieren, um Nutzer für TOTP-MFA zu registrieren:

  1. Importieren Sie die erforderlichen MFA-Klassen und ‑Funktionen:

    import {
      multiFactor,
      TotpMultiFactorGenerator,
      TotpSecret,
      getAuth,
    } from "firebase/auth";
    
  2. Authentifizieren Sie den Nutzer noch einmal.

  3. Generieren Sie ein TOTP-Secret für den authentifizierten Nutzer:

    // Generate a TOTP secret.
    const multiFactorSession = await multiFactor(currentUser).getSession();
    const totpSecret = await TotpMultiFactorGenerator.generateSecret(
      multiFactorSession
    );
    
  4. Zeigen Sie dem Nutzer den geheimen Schlüssel an und fordern Sie ihn auf, ihn in seine Authenticator App einzugeben.

    Mit vielen Authenticator-Apps können Nutzer schnell neue TOTP-Secrets hinzufügen, indem sie einen QR-Code scannen, der einen Google Authenticator-kompatiblen Schlüssel-URI darstellt. Um einen QR-Code für diesen Zweck zu generieren, erstellen Sie den URI mit generateQrCodeUrl() und codieren Sie ihn dann mit der QR-Code-Bibliothek Ihrer Wahl. Beispiel:

    const totpUri = totpSecret.generateQrCodeUrl(
        currentUser.email,
        "Your App's Name"
    );
    await QRExampleLib.toCanvas(totpUri, qrElement);
    

    Unabhängig davon, ob Sie einen QR‑Code anzeigen, sollten Sie immer den geheimen Schlüssel anzeigen, um Authenticator-Apps zu unterstützen, die keine QR‑Codes lesen können:

    // Also display this key:
    const secret = totpSecret.secretKey;
    

    Nachdem der Nutzer das vertrauliche Konto seiner Authenticator App hinzugefügt hat, werden TOTPs generiert.

  5. Fordern Sie den Nutzer auf, den in seiner Authenticator App angezeigten TOTP einzugeben, um die Einrichtung der 2‑Faktor-Authentifizierung abzuschließen:

    // Ask the user for a verification code from the authenticator app.
    const verificationCode = // Code from user input.
    
    // Finalize the enrollment.
    const multiFactorAssertion = TotpMultiFactorGenerator.assertionForEnrollment(
      totpSecret,
      verificationCode
    );
    await multiFactor(currentUser).enroll(multiFactorAssertion, mfaDisplayName);
    

Nutzer mit einem zweiten Faktor anmelden

Verwenden Sie den folgenden Code, um Nutzer mit TOTP-MFA anzumelden:

  1. Importieren Sie die erforderlichen MFA-Klassen und ‑Funktionen:

    import {
        getAuth,
        getMultiFactorResolver,
        TotpMultiFactorGenerator,
    } from "firebase/auth";
    
  2. Rufen Sie eine der signInWith-Methoden auf, als würden Sie keine MFA verwenden. (z. B. signInWithEmailAndPassword()). Wenn die Methode einen auth/multi-factor-auth-required-Fehler ausgibt, starten Sie den MFA-Ablauf Ihrer App.

    try {
        const userCredential = await signInWithEmailAndPassword(
            getAuth(),
            email,
            password
        );
        // If the user is not enrolled with a second factor and provided valid
        // credentials, sign-in succeeds.
    
        // (If your app requires MFA, this could be considered an error
        // condition, which you would resolve by forcing the user to enroll a
        // second factor.)
    
        // ...
    } catch (error) {
        switch (error.code) {
            case "auth/multi-factor-auth-required":
                // Initiate your second factor sign-in flow. (See next step.)
                // ...
                break;
            case ...:  // Handle other errors, such as wrong passwords.
                break;
        }
    }
    
  3. Im MFA-Ablauf Ihrer App sollte der Nutzer zuerst aufgefordert werden, den zweiten Faktor auszuwählen, den er verwenden möchte. Eine Liste der unterstützten zweiten Faktoren können Sie abrufen, indem Sie die hints-Property einer MultiFactorResolver-Instanz untersuchen:

    const mfaResolver = getMultiFactorResolver(getAuth(), error);
    const enrolledFactors = mfaResolver.hints.map(info => info.displayName);
    
  4. Wenn der Nutzer TOTP verwenden möchte, fordern Sie ihn auf, den in seiner Authenticator App angezeigten TOTP-Code einzugeben und damit anzumelden:

    switch (mfaResolver.hints[selectedIndex].factorId) {
        case TotpMultiFactorGenerator.FACTOR_ID:
            const otpFromAuthenticator = // OTP typed by the user.
            const multiFactorAssertion =
                TotpMultiFactorGenerator.assertionForSignIn(
                    mfaResolver.hints[selectedIndex].uid,
                    otpFromAuthenticator
                );
            try {
                const userCredential = await mfaResolver.resolveSignIn(
                    multiFactorAssertion
                );
                // Successfully signed in!
            } catch (error) {
                // Invalid or expired OTP.
            }
            break;
        case PhoneMultiFactorGenerator.FACTOR_ID:
            // Handle SMS second factor.
            break;
        default:
            // Unsupported second factor?
            break;
    }
    

Von TOTP-MFA abmelden

In diesem Abschnitt wird beschrieben, wie Sie vorgehen, wenn ein Nutzer die TOTP-MFA deaktiviert.

Wenn ein Nutzer sich für mehrere MFA-Optionen registriert hat und die Registrierung für die zuletzt aktivierte Option aufhebt, erhält er eine auth/user-token-expired und wird abgemeldet. Der Nutzer muss sich noch einmal anmelden und seine vorhandenen Anmeldedaten bestätigen, z. B. eine E‑Mail-Adresse und ein Passwort.

Verwenden Sie den folgenden Code, um die Registrierung des Nutzers aufzuheben, den Fehler zu beheben und die erneute Authentifizierung auszulösen:

import {
    EmailAuthProvider,
    TotpMultiFactorGenerator,
    getAuth,
    multiFactor,
    reauthenticateWithCredential,
} from "firebase/auth";

try {
    // Unenroll from TOTP MFA.
    await multiFactor(currentUser).unenroll(mfaEnrollmentId);
} catch  (error) {
    if (error.code === 'auth/user-token-expired') {
        // If the user was signed out, re-authenticate them.

        // For example, if they signed in with a password, prompt them to
        // provide it again, then call `reauthenticateWithCredential()` as shown
        // below.

        const credential = EmailAuthProvider.credential(email, password);
        await reauthenticateWithCredential(
            currentUser,
            credential
        );
    }
}

Nächste Schritte