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 eine zeitbasierte Multi-Faktor-Authentifizierung (MFA) mit Einmalpasswort (TOTP) hinzufügen.

Firebase Authentication with Identity Platform können Sie ein TOTP als zusätzlichen Faktor für die MFA verwenden. Wenn Sie diese Funktion aktivieren, werden Nutzer, die sich in Ihrer App anmelden möchten, aufgefordert, ein TOTP einzugeben. 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 MFA unterstützt. Alle Anbieter außer den folgenden unterstützen MFA:

    • Telefonauthentifizierung
    • Anonyme Authentifizierung
    • Benutzerdefinierte Authentifizierungstokens
    • Apple Game Center
  2. Achten Sie darauf, dass Ihre App die E-Mail-Adressen der Nutzer bestätigt. Die MFA 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 tatsächlichen Inhaber der E-Mail-Adresse sperren, indem sie einen zweiten Faktor hinzufügen.

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

    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 das Admin SDK oder rufen Sie den REST-Endpunkt für die Projekt konfiguration auf.

So verwenden Sie das Admin SDK:

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

    TOTP MFA wird nur im Firebase Admin Node.js SDK ab Version 11.6.0 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. Der Wert kann zwischen 0 und 10 liegen. Der Standardwert ist 5.

      TOTPs funktionieren so: Wenn zwei Parteien (der Nachweiser und der Prüfer) innerhalb desselben Zeitfensters (in der Regel 30 Sekunden lang) OTPs generieren, generieren sie dasselbe Passwort. Um jedoch die Zeitverschiebung zwischen den Parteien und die Reaktionszeit des Nutzers zu berücksichtigen, können Sie den TOTP-Dienst so konfigurieren, dass er auch TOTPs aus angrenzenden Zeitfenstern akzeptiert.

Führen Sie den folgenden Befehl aus, um TOTP MFA mit der REST API zu aktivieren:

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. Der Wert kann zwischen 0 und 10 liegen. Der Standardwert ist 5.

    TOTPs funktionieren so: Wenn zwei Parteien (der Nachweiser und der Prüfer) innerhalb desselben Zeitfensters (in der Regel 30 Sekunden lang) OTPs generieren, generieren sie dasselbe Passwort. Um jedoch die Zeitverschiebung zwischen den Parteien und die Reaktionszeit des Nutzers 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. Einige gängige Muster sind:

  • 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 die Multi-Faktor-Authentifizierung in Ihrer App empfehlen, aber nicht erzwingen möchten, 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, implementieren Sie die clientseitige Logik, 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 das Secret an und fordern Sie ihn auf, es in seine Authenticator App einzugeben.

    In vielen Authenticator Apps können Nutzer schnell neue TOTP-Secrets hinzufügen, indem sie einen QR-Code scannen, der eine mit Google Authenticator kompatible Schlüssel-URIdarstellt. Wenn Sie einen QR-Code für diesen Zweck generieren möchten, generieren Sie die URI mit generateQrCodeUrl() und codieren Sie sie 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, zeigen Sie immer den geheimen Schlüssel an, 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 Secret zu seiner Authenticator App hinzugefügt hat, werden TOTPs generiert.

  5. Fordern Sie den Nutzer auf, das in seiner Authenticator App angezeigte TOTP einzugeben und damit die MFA-Registrierung 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, so als würden Sie keine MFA verwenden. Beispiel: signInWithEmailAndPassword() Wenn die Methode einen auth/multi-factor-auth-required-Fehler auslöst, 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 finden Sie in der Eigenschaft hints einer MultiFactorResolver-Instanz:

    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, das in seiner Authenticator App angezeigte TOTP einzugeben und damit die Anmeldung abzuschließen:

    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 die Abmeldung eines Nutzers von TOTP MFA verarbeiten.

Wenn ein Nutzer sich für mehrere MFA-Optionen registriert hat und sich von der zuletzt aktivierten Option abmeldet, erhält er eine auth/user-token-expired-Meldung 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 den Nutzer abzumelden, den Fehler zu verarbeiten 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