Multi-Faktor-Authentifizierung zu Ihrer Flutter-App hinzufügen

Wenn Sie ein Upgrade auf Firebase Authentication mit Identity Platform durchgeführt haben, können Sie Ihrer Flutter-App die SMS-Multi-Faktor-Authentifizierung hinzufügen.

Die Multi-Faktor-Authentifizierung (MFA) erhöht die Sicherheit Ihrer Anwendung. Obwohl Angreifer häufig Passwörter und Konten bei sozialen Netzwerken kompromittieren, ist es schwieriger, eine SMS abzufangen.

Hinweis

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

  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.

  3. Android: Wenn Sie den SHA-256-Hash Ihrer App noch nicht in der Firebase Console festgelegt haben, tun Sie dies jetzt. Informationen zum Abrufen des SHA-256-Hashes Ihrer App finden Sie unter Client authentifizieren.

  4. iOS: Aktivieren Sie in Xcode die Push-Benachrichtigungen für Ihr Projekt und achten Sie darauf, dass Ihr APNs-Authentifizierungsschlüssel mit Firebase Cloud Messaging (FCM) konfiguriert ist. Außerdem müssen Sie Hintergrundmodi für Remote-Benachrichtigungen aktivieren. Eine ausführliche Erklärung zu diesem Schritt findest du in der Firebase iOS Phone Auth-Dokumentation.

  5. Web: Achten Sie darauf, dass Sie die Domain Ihrer Anwendung in der Firebase Console unter OAuth-Weiterleitungsdomains hinzugefügt haben.

Multi-Faktor-Authentifizierung aktivieren

  1. Öffnen Sie in der Firebase Console die Seite Authentifizierung > Anmeldemethode.

  2. Aktivieren Sie im Bereich Erweitert die Option Multi-Faktor-Authentifizierung per SMS.

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

  3. Wenn Sie die Domain Ihrer Anwendung noch nicht autorisiert haben, setzen Sie sie in der Firebase Console auf der Seite Authentifizierung > Einstellungen auf die Zulassungsliste.

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. Bei Apps, die zwar zur Multi-Faktor-Authentifizierung ermutigen möchten, diese aber nicht erfordern, ist dieser Ansatz möglicherweise die beste Wahl.

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

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. Starten Sie eine Multi-Faktor-Sitzung für den Nutzer:

    final multiFactorSession = await user.multiFactor.getSession();

  4. Bestätige die Telefonnummer über eine Multi-Faktor-Sitzung und deine Rückrufe:

    await FirebaseAuth.instance.verifyPhoneNumber(
  multiFactorSession: multiFactorSession,
  phoneNumber: phoneNumber,
  verificationCompleted: (_) {},
  verificationFailed: (_) {},
  codeSent: (String verificationId, int? resendToken) async {
    // The SMS verification code has been sent to the provided phone number.
    // ...
  },
  codeAutoRetrievalTimeout: (_) {},
);

  5. Nachdem der SMS-Code gesendet wurde, bitten Sie den Nutzer, den Code zu bestätigen:

    final credential = PhoneAuthProvider.credential(
  verificationId: verificationId,
  smsCode: smsCode,
);

  6. Schließen Sie die Anmeldung ab:

    await user.multiFactor.enroll(
  PhoneMultiFactorGenerator.getAssertion(
    credential,
  ),
);

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

  final session = await user.multiFactor.getSession();
  final auth = FirebaseAuth.instance;
  await auth.verifyPhoneNumber(
    multiFactorSession: session,
    phoneNumber: phoneController.text,
    verificationCompleted: (_) {},
    verificationFailed: (_) {},
    codeSent: (String verificationId, int? resendToken) async {
      // See `firebase_auth` example app for a method of retrieving user's sms code: 
      // https://github.com/firebase/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/auth.dart#L591
      final smsCode = await getSmsCodeFromUser(context);

      if (smsCode != null) {
        // Create a PhoneAuthCredential with the code
        final credential = PhoneAuthProvider.credential(
          verificationId: verificationId,
          smsCode: smsCode,
        );

        try {
          await user.multiFactor.enroll(
            PhoneMultiFactorGenerator.getAssertion(
              credential,
            ),
          );
        } on FirebaseAuthException catch (e) {
          print(e.message);
        }
      }
    },
    codeAutoRetrievalTimeout: (_) {},
  );

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 die Ausnahme FirebaseAuthMultiFactorException ab. Dieser Fehler enthält einen Resolver, mit dem Sie die registrierten Zweiten faktoren des Nutzers abrufen können. Er enthält auch eine zugrunde liegende Sitzung, die bestätigt, dass der Nutzer mit seinem ersten Faktor authentifiziert wurde.

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

    try {
  await _auth.signInWithEmailAndPassword(
      email: emailController.text,
      password: passwordController.text,
  );
  // User is not enrolled with a second factor and is successfully
  // signed in.
  // ...
} on FirebaseAuthMultiFactorException catch (e) {
  // The user is a multi-factor user. Second factor challenge is required
  final resolver = e.resolver
  // ...
}

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

    final session = e.resolver.session;

final hint = e.resolver.hints[selectedHint];

  3. Senden Sie eine Bestätigungsnachricht mit dem Hinweis und der Multi-Faktor-Sitzung an das Mobiltelefon des Nutzers:

    await FirebaseAuth.instance.verifyPhoneNumber(
  multiFactorSession: session,
  multiFactorInfo: hint,
  verificationCompleted: (_) {},
  verificationFailed: (_) {},
  codeSent: (String verificationId, int? resendToken) async {
    // ...
  },
  codeAutoRetrievalTimeout: (_) {},
);

  4. Rufen Sie resolver.resolveSignIn() auf, um die sekundäre Authentifizierung abzuschließen:

    final smsCode = await getSmsCodeFromUser(context);
if (smsCode != null) {
  // Create a PhoneAuthCredential with the code
  final credential = PhoneAuthProvider.credential(
    verificationId: verificationId,
    smsCode: smsCode,
  );

  try {
    await e.resolver.resolveSignIn(
      PhoneMultiFactorGenerator.getAssertion(credential)
    );
  } on FirebaseAuthException catch (e) {
    print(e.message);
  }
}

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

try {
  await _auth.signInWithEmailAndPassword(
    email: emailController.text,
    password: passwordController.text,
  );
} on FirebaseAuthMultiFactorException catch (e) {
  setState(() {
    error = '${e.message}';
  });
  final firstHint = e.resolver.hints.first;
  if (firstHint is! PhoneMultiFactorInfo) {
    return;
  }
  await FirebaseAuth.instance.verifyPhoneNumber(
    multiFactorSession: e.resolver.session,
    multiFactorInfo: firstHint,
    verificationCompleted: (_) {},
    verificationFailed: (_) {},
    codeSent: (String verificationId, int? resendToken) async {
      // See `firebase_auth` example app for a method of retrieving user's sms code: 
      // https://github.com/firebase/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/auth.dart#L591
      final smsCode = await getSmsCodeFromUser(context);

      if (smsCode != null) {
        // Create a PhoneAuthCredential with the code
        final credential = PhoneAuthProvider.credential(
          verificationId: verificationId,
          smsCode: smsCode,
        );

        try {
          await e.resolver.resolveSignIn(
            PhoneMultiFactorGenerator.getAssertion(
              credential,
            ),
          );
        } on FirebaseAuthException catch (e) {
          print(e.message);
        }
      }
    },
    codeAutoRetrievalTimeout: (_) {},
  );
} catch (e) {
  ...
}

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

Nächste Schritte