Flutter-App mit FirebaseUI einen Nutzerauthentifizierungsablauf hinzufügen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Firebase Authentication mit dem FlutterFire-UI-Paket zu Ihrer Flutter-App hinzufügen. Mit diesem Paket fügen Sie einer Flutter-App sowohl eine E-Mail-/Passwort-Authentifizierung als auch eine Google Log-in-Authentifizierung hinzu. Außerdem erfahren Sie, wie Sie ein Firebase-Projekt einrichten und die FlutterFire CLI verwenden, um Firebase in Ihrer Flutter-App zu initialisieren.

Vorbereitung

In diesem Codelab wird davon ausgegangen, dass Sie bereits mit Flutter vertraut sind. Falls nicht, sollten Sie sich zunächst mit den Grundlagen vertraut machen. Die folgenden Links sind hilfreich:

• Flutter-Widget-Framework kennenlernen
• Codelab Write Your First Flutter App, Teil 1 ausprobieren

Außerdem sollten Sie bereits einige Firebase-Kenntnisse haben, das ist aber in Ordnung, wenn Sie Firebase noch nie einem Flutter-Projekt hinzugefügt haben. Wenn Sie mit der Firebase Console nicht vertraut sind oder Firebase noch nicht kennen, sehen Sie sich zuerst die folgenden Links an:

• Dokumente zu Firebase Fundamentals
• Codelab zu Firebase mit Flutter

Aufgaben

In diesem Codelab erfahren Sie, wie Sie mit Firebase Authentication den Authentifizierungsablauf für eine Flutter-App erstellen. Die Anwendung verfügt über einen Anmeldebildschirm, einen Bildschirm zur Registrierung, einen Bildschirm für die Passwortwiederherstellung und einen Bildschirm für das Nutzerprofil.

Lerninhalte

In diesem Codelab werden folgende Themen behandelt:

• Firebase zu einer Flutter-App hinzufügen
• Firebase Console-Einrichtung
• Firebase mit der Firebase CLI Ihrer Anwendung hinzufügen
• Firebase-Konfiguration in Dart mit FlutterFire CLI generieren
• Firebase-Authentifizierung zu Ihrer Flutter-App hinzufügen
• Firebase Authentication in der Console einrichten
• Anmeldung per E-Mail-Adresse und Passwort mit dem firebase_ui_auth-Paket hinzufügen
• Nutzerregistrierung mit dem firebase_ui_auth-Paket hinzufügen
• Seite „Passwort vergessen?“ hinzufügen
• Google Log-in mit firebase_ui_auth hinzufügen
• Anwendung für die Zusammenarbeit mit mehreren Anbietern für Anmeldungen konfigurieren
• Ihrer Anwendung mit dem Paket firebase_ui_auth einen Nutzerprofilbildschirm hinzufügen

In diesem Codelab geht es speziell darum, ein robustes Authentifizierungssystem mit dem firebase_ui_auth-Paket hinzuzufügen. Wie Sie sehen, kann die gesamte App mit allen oben genannten Funktionen mit etwa 100 Zeilen Code implementiert werden.

Voraussetzungen

• Erfahrung mit Flutter und dem installierten SDK
• Einen Texteditor (JetBrains IDEs, Android Studio und VS Code werden von Flutter unterstützt)
• Google Chrome oder Ihr anderes bevorzugtes Entwicklungsziel für Flutter. Bei einigen Terminalbefehlen in diesem Codelab wird davon ausgegangen, dass Sie Ihre App in Chrome ausführen.

2. Firebase-Projekt erstellen und einrichten

Als Erstes müssen Sie ein Firebase-Projekt in der Firebase-Webkonsole erstellen.

Firebase-Projekt erstellen

1. Melden Sie sich in Firebase an.
2. Klicken Sie in der Firebase Console auf Projekt hinzufügen oder Projekt erstellen und geben Sie einen Namen für Ihr Firebase-Projekt ein (z. B. FlutterFire-UI-Codelab).

3. Klicken Sie sich durch die Optionen für die Projekterstellung. Akzeptieren Sie die Firebase-Nutzungsbedingungen, wenn Sie dazu aufgefordert werden. Überspringen Sie die Einrichtung von Google Analytics, da Sie Analytics für diese App nicht verwenden werden.

Weitere Informationen zu Firebase-Projekten

E-Mail-Anmeldung für Firebase Authentication aktivieren

Die von Ihnen erstellte App verwendet Firebase Authentication, damit sich Ihre Nutzer in Ihrer App anmelden können. Neue Nutzer können sich auch über die Flutter-Anwendung registrieren.

Firebase Authentication muss über die Firebase Console aktiviert werden und erfordert nach der Aktivierung eine spezielle Konfiguration.

Damit sich Nutzer in der Web-App anmelden können, verwenden Sie zuerst die Anmeldemethode E-Mail/Passwort. Später fügen Sie dann die Methode Google Log-in hinzu.

1. Maximieren Sie in der Firebase Console im linken Bereich das Menü Build.
2. Klicken Sie auf Authentifizierung, dann auf die Schaltfläche Jetzt starten und dann auf den Tab Anmeldemethode. Sie können auch auf diesen Link klicken, um direkt zum Tab Anmeldemethode zu gelangen.
3. Klicken Sie in der Liste Anbieter für Anmeldungen auf E-Mail-Adresse/Passwort, stellen Sie den Schalter für Aktivieren auf „Ein“ und klicken Sie auf Speichern.

3. Flutter-App einrichten

Bevor Sie beginnen, müssen Sie den Startcode herunterladen und Firebase CLI installieren.

Startcode abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

Alternativ, wenn das GitHub- CLI-Tool installiert ist:

gh repo clone flutter/codelabs flutter-codelabs

Der Beispielcode sollte in das Verzeichnis flutter-codelabs auf Ihrem Computer geklont werden, das den Code für eine Sammlung von Codelabs enthält. Der Code für dieses Codelab befindet sich im Unterverzeichnis flutter-codelabs/firebase-auth-flutterfire-ui.

Das Verzeichnis flutter-codelabs/firebase-auth-flutterfire-ui enthält zwei Flutter-Projekte. Das eine heißt complete und das andere start. Das Verzeichnis start enthält ein unvollständiges Projekt. Hier verbringen Sie die meiste Zeit.

cd flutter-codelabs/firebase-auth-flutterfire-ui/start

Wenn Sie vorspulen oder sehen möchten, wie etwas fertig aussehen sollte, sehen Sie sich im Verzeichnis „complete“ (fertig) die entsprechenden Verweise an.

Wenn Sie dem Codelab folgen und selbst Code hinzufügen möchten, sollten Sie mit der Flutter-App unter flutter-codelabs/firebase-auth-flutterfire-ui/start beginnen und dem Projekt im Laufe des Codelabs Code hinzufügen. Öffnen Sie dieses Verzeichnis oder importieren Sie es in Ihre bevorzugte IDE.

Firebase CLI installieren

Die Firebase CLI bietet Tools zum Verwalten Ihrer Firebase-Projekte. Die Befehlszeile ist für die FlutterFire CLI erforderlich, die Sie gleich installieren.

Es gibt verschiedene Möglichkeiten, die Befehlszeile zu installieren. Wenn Sie MacOS oder Linux verwenden, führen Sie den folgenden Befehl am einfachsten über Ihr Terminal aus:

curl -sL https://firebase.tools | bash

Hinweis: Wenn du Windows verwendest oder curl nicht verwenden möchtest, musst du ein Binärprogramm herunterladen oder npm zur Installation verwenden. Weitere Informationen dazu finden Sie unter https://firebase.google.com/docs/cli. Kehren Sie nach der Installation von Firebase zu diesem Codelab zurück.

Nach der Installation der Befehlszeile müssen Sie sich bei Firebase authentifizieren.

1. Melden Sie sich mit Ihrem Google-Konto in Firebase an. Führen Sie dazu den folgenden Befehl aus:

firebase login

2. Mit diesem Befehl wird Ihr lokaler Computer mit Firebase verbunden und Sie erhalten Zugriff auf Ihre Firebase-Projekte.

Hinweis: Mit dem Befehl firebase login wird eine Webseite geöffnet, die eine Verbindung zum lokalen Host auf Ihrem Computer herstellt. Wenn Sie einen Remote-Computer verwenden und keinen Zugriff auf localhost haben, führen Sie den Befehl mit dem Flag --no-localhost aus.

3. Prüfen Sie, ob die CLI richtig installiert ist und Zugriff auf Ihr Konto hat, indem Sie Ihre Firebase-Projekte auflisten. Führen Sie dazu diesen Befehl aus:

firebase projects:list

4. Die angezeigte Liste sollte mit den Firebase-Projekten in der Firebase Console übereinstimmen. Es sollte mindestens flutterfire-ui-codelab. angezeigt werden

FlutterFire CLI installieren

Die FlutterFire CLI ist ein Tool, mit dem Sie die Installation von Firebase auf allen unterstützten Plattformen in Ihrer Flutter-App vereinfachen können. Sie basiert auf der Firebase CLI.

Installieren Sie zuerst die Befehlszeile:

dart pub global activate flutterfire_cli

Prüfen Sie, ob die Befehlszeile installiert wurde. Führen Sie den folgenden Befehl aus und achten Sie darauf, dass die Befehlszeile das Hilfemenü ausgibt.

flutterfire -—help

Firebase-Projekt Ihrer Flutter-App hinzufügen

FlutterFire konfigurieren

Mit FlutterFire können Sie den erforderlichen Dart-Code generieren, um Firebase in Ihrer Flutter-App zu verwenden.

flutterfire configure

Wenn dieser Befehl ausgeführt wird, werden Sie aufgefordert, das Firebase-Projekt auszuwählen, das Sie verwenden möchten, und die Plattformen, die Sie einrichten möchten.

Die folgenden Screenshots zeigen die Prompts, die Sie beantworten müssen.

1. Wählen Sie das Projekt aus, das Sie verwenden möchten. Verwenden Sie in diesem Fall flutterfire-ui-codelab .
2. Wählen Sie die Plattformen aus, die Sie verwenden möchten. In diesem Codelab erfahren Sie, wie Sie Firebase Authentication for Flutter für das Web, iOS und Android konfigurieren. Sie können Ihr Firebase-Projekt aber so einrichten, dass alle Optionen verwendet werden.
3. Auf diesem Screenshot ist die Ausgabe am Ende des Prozesses zu sehen. Wenn Sie mit Firebase vertraut sind, werden Sie feststellen, dass Sie keine Plattformanwendungen (z. B. eine Android-App) in der Konsole erstellen mussten, und die FlutterFire CLI hat dies für Sie erledigt.

Wenn dies abgeschlossen ist, sehen Sie sich die Flutter-App in Ihrem Texteditor an. Die FlutterFire CLI hat eine neue Datei mit dem Namen firebase_options.dart generiert. Diese Datei enthält die Klasse „FirebaseOptions“ mit statischen Variablen, die die für jede Plattform erforderliche Firebase-Konfiguration enthalten. Wenn Sie beim Ausführen von flutterfire configure alle Plattformen ausgewählt haben, sehen Sie die statischen Werte web, android, ios und macos.

firebase_options.dart

import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
import 'package:flutter/foundation.dart'
   show defaultTargetPlatform, kIsWeb, TargetPlatform;

/// Default [FirebaseOptions] for use with your Firebase apps.
///
/// Example:
/// ```dart
/// import 'firebase_options.dart';
/// // ...
/// await Firebase.initializeApp(
///   options: DefaultFirebaseOptions.currentPlatform,
/// );
/// ```
class DefaultFirebaseOptions {
 static FirebaseOptions get currentPlatform {
   if (kIsWeb) {
     return web;
   }
   // ignore: missing_enum_constant_in_switch
   switch (defaultTargetPlatform) {
     case TargetPlatform.android:
       return android;
     case TargetPlatform.iOS:
       return ios;
     case TargetPlatform.macOS:
       return macos;
   }

   throw UnsupportedError(
     'DefaultFirebaseOptions are not supported for this platform.',
   );
 }

 static const FirebaseOptions web = FirebaseOptions(
   apiKey: 'AIzaSyCqFjCV_9CZmYeIvcK9FVy4drmKUlSaIWY',
   appId: '1:963656261848:web:7219f7fca5fc70afb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   authDomain: 'flutterfire-ui-codelab.firebaseapp.com',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   measurementId: 'G-DGF0CP099H',
 );

 static const FirebaseOptions android = FirebaseOptions(
   apiKey: 'AIzaSyDconZaCQpkxIJ5KQBF-3tEU0rxYsLkIe8',
   appId: '1:963656261848:android:c939ccc86ab2dcdbb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
 );

 static const FirebaseOptions ios = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );

 static const FirebaseOptions macos = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );
}

Hinweis: Ihre Datei sollte unterschiedliche Werte für die API-Schlüssel enthalten. Es ist völlig ungefährlich, diese Schlüssel der Öffentlichkeit zugänglich zu machen. Weitere Informationen dazu finden Sie hier.

In Firebase bezieht sich das Wort „Anwendung“ auf einen bestimmten Build für eine bestimmte Plattform in einem Firebase-Projekt. Das Firebase-Projekt FlutterFire-ui-codelab enthält beispielsweise mehrere Anwendungen: eine für Android, eine für iOS, eine für macOS und eine für das Web.

Bei der Methode DefaultFirebaseOptions.currentPlatform wird die von Flutter bereitgestellte Aufzählung TargetPlatform verwendet, um die Plattform zu erkennen, auf der Ihre App ausgeführt wird. Anschließend werden die Firebase-Konfigurationswerte zurückgegeben, die für die richtige Firebase-Anwendung erforderlich sind.

Firebase-Pakete zur Flutter-App hinzufügen

Im letzten Einrichtungsschritt fügen Sie Ihrem Flutter-Projekt die relevanten Firebase-Pakete hinzu. Die Datei firebase_options.dart sollte Fehler enthalten, da sie auf Firebase-Paketen basiert, die noch nicht hinzugefügt wurden. Prüfen Sie im Terminal, ob Sie sich im Stammverzeichnis des Flutter-Projekts unter flutter-codelabs/firebase-emulator-suite/start befinden. Führen Sie dann die drei folgenden Befehle aus:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

Dies sind die einzigen Pakete, die Sie derzeit benötigen.

Firebase initialisieren

Damit du die hinzugefügten Pakete verwenden kannst, und aktualisiere DefaultFirebaseOptions.currentPlatform, den Code in der Funktion main in der Datei main.dart.

main.dart

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );


 runApp(const MyApp());
}

Dieser Code erfüllt zwei Dinge.

1. WidgetsFlutterBinding.ensureInitialized() weist Flutter an, den Code des Anwendungs-Widgets erst auszuführen, wenn das Flutter-Framework vollständig gestartet wurde. Firebase verwendet native Plattformkanäle, für die das Framework ausgeführt werden muss.
2. Firebase.initializeApp stellt eine Verbindung zwischen Ihrer Flutter-App und Ihrem Firebase-Projekt her. DefaultFirebaseOptions.currentPlatform wird aus unserer generierten firebase_options.dart-Datei importiert. Anhand dieses statischen Werts wird erkannt, auf welcher Plattform Sie die App ausführen, und die entsprechenden Firebase-Schlüssel werden übergeben.

4. Erste Firebase-UI-Authentifizierungsseite hinzufügen

Firebase UI for Auth bietet Widgets, die ganze Bildschirme in Ihrer Anwendung darstellen. Auf diesen Bildschirmen werden verschiedene Authentifizierungsabläufe innerhalb Ihrer Anwendung ausgeführt, z. B. Anmeldung, Registrierung, Passwort vergessen oder Nutzerprofil. Fügen Sie Ihrer App zuerst eine Landingpage hinzu, die als Authentifizierungsschutz dafür dient.

Material- oder Cupertino-App

Die FlutterFire-Benutzeroberfläche setzt voraus, dass deine App in eine MaterialApp oder CupertinoApp eingebunden ist. Je nach Auswahl werden die Unterschiede zwischen Material- oder Cupertino-Widgets automatisch in der Benutzeroberfläche berücksichtigt. Verwenden Sie für dieses Codelab MaterialApp, das der App in app.dart bereits hinzugefügt wurde.

app.dart

import 'package:flutter/material.dart';
import 'auth_gate.dart';

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const AuthGate(),
   );
 }
}

Authentifizierungsstatus prüfen

Bevor Sie einen Anmeldebildschirm aufrufen können, müssen Sie ermitteln, ob der Nutzer derzeit authentifiziert ist. Die am häufigsten verwendete Methode hierfür besteht darin, die authStateChanges von FirebaseAuth mit dem Firebase Auth-Plug-in zu überwachen.

Im Codebeispiel oben erstellt MaterialApp ein AuthGate-Widget in seiner Build-Methode. (Dies ist ein benutzerdefiniertes Widget, das nicht von der FlutterFire-UI bereitgestellt wird.)

Dieses Widget muss aktualisiert werden, damit es den authStateChanges-Stream enthält.

Die authStateChanges API gibt einen Stream mit dem aktuellen Nutzer zurück (falls er angemeldet ist) oder „null“, wenn er nicht angemeldet ist. Um diesen Status in unserer Anwendung zu abonnieren, können Sie das StreamBuilder-Widget von Flutter verwenden und den Stream an das Widget übergeben.

StreamBuilder ist ein Widget, das auf Grundlage des aktuellen Snapshots der Daten aus einem übergebenen Stream erstellt wird. Es wird automatisch neu erstellt, wenn der Stream einen neuen Snapshot ausgibt.

Aktualisieren Sie den Code in auth_gate.dart.

auth_gate.dart.

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

• StreamBuilder.stream wird FirebaseAuth.instance.authStateChanged, der oben genannte Stream, übergeben, der nach der Authentifizierung des Nutzers ein User-Objekt von Firebase zurückgibt. (Andernfalls wird null zurückgegeben.)
• Als Nächstes prüft der Code mithilfe von snapshot.hasData, ob der Wert aus dem Stream das User-Objekt enthält.
• Ist dies nicht der Fall, wird ein SignInScreen-Widget zurückgegeben. Aktuell passiert auf diesem Bildschirm nichts. Dies wird im nächsten Schritt aktualisiert.
• Andernfalls wird HomeScreen zurückgegeben, der Hauptteil der Anwendung, auf den nur authentifizierte Nutzer zugreifen können.

SignInScreen ist ein Widget aus dem FlutterFire-UI-Paket. Darauf konzentrieren wir uns im nächsten Schritt dieses Codelabs. Wenn Sie die App jetzt ausführen, sollten Sie einen leeren Anmeldebildschirm sehen.

5. Anmeldebildschirm

Das SignInScreen-Widget von FlutterFire UI bietet folgende Funktionen:

• Nutzern erlauben, sich anzumelden
• Wenn Nutzer ihr Passwort vergessen haben, können sie auf „Passwort vergessen?“ tippen und zu einem Formular zum Zurücksetzen des Passworts weitergeleitet werden.
• Wenn ein Nutzer noch nicht registriert ist, kann er auf „Registrieren“ tippen und zu einem anderen Formular weitergeleitet werden, über das er sich anmelden kann.

Auch hierfür sind nur wenige Codezeilen erforderlich. Erinnern Sie sich an den Code im AuthGate-Widget:

auth_gate.dart.

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [
              EmailAuthProvider(), // new
            ],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

Das SignInScreen-Widget und sein providers-Argument sind der einzige Code, der zum Abrufen aller oben genannten Funktionen erforderlich ist. Jetzt sollte ein Anmeldebildschirm mit den Textfeldern „E-Mail-Adresse“ und „Passwort“ sowie der Schaltfläche „Anmelden“ angezeigt werden.

Sie ist zwar funktionsfähig, aber es fehlt ihr das Design. Das Widget enthält Parameter, mit denen Sie das Aussehen des Anmeldebildschirms anpassen können. Beispielsweise können Sie das Logo Ihres Unternehmens hinzufügen.

Anmeldebildschirm anpassen

headerBuilder

Mit dem Argument SignInScreen.headerBuilder können Sie über dem Anmeldeformular beliebige Widgets hinzufügen. Dieses Widget wird nur auf schmalen Bildschirmen angezeigt, z. B. auf Mobilgeräten. Für das Breitbildformat können Sie SignInScreen.sideBuilder verwenden. Mehr dazu später in diesem Codelab.

Aktualisieren Sie die Datei auth_gate.dart mit diesem Code:

auth_gate.dart.

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('assets/flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Für das Argument „headerBuilder“ ist eine Funktion vom Typ „HeaderBuilder“ erforderlich, die im FlutterFire UI-Paket definiert ist.

typedef HeaderBuilder = Widget Function(
 BuildContext context,
 BoxConstraints constraints,
 double shrinkOffset,
);

Da es sich um einen Rückruf handelt, werden Werte wie BuildContext und BoxConstraints zur Verfügung gestellt und Sie müssen ein Widget zurückgeben. Das zurückgegebene Widget wird oben auf dem Bildschirm angezeigt. In diesem Beispiel fügt der neue Code oben auf dem Bildschirm ein Bild hinzu. Ihre Anwendung sollte jetzt so aussehen.

Tool zur Erstellung von Untertiteln

Auf dem Anmeldebildschirm werden drei zusätzliche Parameter angezeigt, mit denen Sie den Bildschirm anpassen können: subtitleBuilder, footerBuilder und sideBuilder.

Der subtitleBuilder unterscheidet sich geringfügig dadurch, dass die Rückrufargumente eine Aktion vom Typ AuthAction enthalten. AuthAction ist ein Enum, mit dem Sie erkennen können, ob sich der Nutzer auf dem Anmelde- oder Registrierungsbildschirm befindet.

Aktualisieren Sie den Code in auth_gate.dart, um den subtitleBuilder zu verwenden.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
              EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Aktualisieren Sie die Anwendung. Sie sollte jetzt so aussehen:

Fußzeilen-Builder

Das Argument „footerBuilder“ ist mit dem Argument „subtitleBuilder“ identisch. BoxConstraints oder shrinkOffset werden nicht angezeigt, da die Funktion eher für Text als für Bilder gedacht ist. Sie können aber auch ein beliebiges Widget hinzufügen.

Fügen Sie mit diesem Code eine Fußzeile auf dem Anmeldebildschirm hinzu.

auth_gate.dart.

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }}

Seitenbauer

Das Argument „SignInScreen.sidebuilder“ akzeptiert einen Callback. Diesmal sind die Argumente für diesen Callback BuildContext und double shrinkOffset. Das von sideBuilder zurückgegebene Widget wird links vom Anmeldeformular angezeigt und nur auf Breitbildbildschirmen angezeigt. Das bedeutet, dass das Widget nur in Desktop- und Web-Apps angezeigt wird.

Intern verwendet die FlutterFire-Benutzeroberfläche einen Wendepunkt, um zu bestimmen, ob der Inhalt des Headers (auf hohen Bildschirmen wie Smartphones) oder der Seiteninhalt (auf breiten Bildschirmen, Desktop oder Web) angezeigt werden soll. Insbesondere wenn ein Bildschirm mehr als 800 Pixel breit ist, wird der Inhalt des seitlichen Builders angezeigt, der Inhalt der Kopfzeile jedoch nicht. Wenn der Bildschirm weniger als 800 Pixel breit ist, gilt das Gegenteil.

Aktualisieren Sie den Code in „auth_gate.dart“, um SideBuilder-Widgets hinzuzufügen.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }
       return const HomeScreen();
     },
   );
 }
}

Wenn Sie die Breite des Fensters maximieren, sollte Ihre App jetzt so aussehen (wenn Sie Flutter Web oder macOS verwenden).

Nutzer erstellen

Der Code für diesen Bildschirm ist jetzt fertig. Bevor Sie sich anmelden können, müssen Sie jedoch einen Nutzer erstellen. Sie können dies über den Bildschirm „Registrieren“ tun oder einen Nutzer in der Firebase Console erstellen.

So verwenden Sie die Console:

1. Rufen Sie in der Firebase Console die Tabelle „Nutzer“ auf.
2. Hier klicken
3. Wählen Sie „flutterfire-ui-codelab“ oder ein anderes Projekt aus, falls Sie einen anderen Namen verwendet haben. Sie sehen dann diese Tabelle:

2. Klicken Sie auf die Schaltfläche „Nutzer hinzufügen“.

3. Geben Sie eine E-Mail-Adresse und ein Passwort für den neuen Nutzer ein. Dabei kann es sich um eine gefälschte E-Mail-Adresse und ein gefälschtes Passwort handeln, wie im Bild unten dargestellt. Das funktioniert, aber die Funktion „Passwort vergessen“ funktioniert nicht, wenn Sie eine gefälschte E-Mail-Adresse verwenden.

4. Klicken Sie auf „Nutzer hinzufügen“.

Jetzt können Sie zu Ihrer Flutter-Anwendung zurückkehren und einen Nutzer über die Anmeldeseite anmelden. Ihre App sollte so aussehen:

6. Profilbildschirm

Die FlutterFire-Benutzeroberfläche bietet auch ein ProfileScreen-Widget, mit dem Sie mit wenigen Codezeilen viele Funktionen nutzen können.

ProfileScreen-Widget hinzufügen

Rufen Sie die Datei home.dart in Ihrem Texteditor auf. Aktualisieren Sie ihn mit diesem Code:

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => const ProfileScreen(),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Der neue Code ist der Rückruf, der an die IconButton.isPressed method. übergeben wird. Wenn diese IconButton gedrückt wird, erstellt Ihre Anwendung eine neue anonyme Route und wechselt zu dieser. Auf dieser Route wird das ProfileScreen-Widget angezeigt, das vom MaterialPageRoute.builder-Callback zurückgegeben wird.

Lade die App neu und drücke auf das Symbol oben rechts in der App-Leiste. Daraufhin wird eine Seite wie diese angezeigt:

Dies ist die Standard-UI auf der FlutterFire-UI-Seite. Alle Schaltflächen und Textfelder sind mit Firebase Auth verbunden und können sofort eingesetzt werden. Wenn Sie beispielsweise einen Namen in das Textfeld „Name“ eingeben, wird über die FlutterFire-Benutzeroberfläche die FirebaseAuth.instance.currentUser?.updateDisplayName-Methode aufgerufen, die diesen Namen in Firebase speichert.

Hinweis: In diesem Beispiel wird über die Schaltfläche „Bestätigungs-E-Mail senden“ eine E-Mail an eine gefälschte E-Mail-Adresse gesendet: [e-mail]. Erstellen Sie einen Nutzer mit einer E-Mail-Adresse, deren Inhaber Sie sind, um zu prüfen, ob die Funktion funktioniert.

Abmelden

Wenn Sie derzeit auf die Schaltfläche „Abmelden“ klicken, ändert sich die App nicht. Sie werden abgemeldet, aber nicht zum AuthGate-Widget zurückgeleitet. Verwenden Sie dazu den Parameter „ProfileScreen.actions“.

Aktualisiere zunächst den Code in home.dart.

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Wenn Sie jetzt eine Instanz von ProfileScreen erstellen, übergeben Sie auch eine Liste von Aktionen an das Argument ProfileScreen.actions. Diese Aktionen gehören zum Typ FlutterFireUiAction. Es gibt viele verschiedene Klassen, die Untertypen von FlutterFireUiAction sind. Im Allgemeinen legen Sie damit fest, dass Ihre App auf verschiedene Änderungen des Authentifizierungsstatus reagieren soll. „SignedOutAction“ ruft eine Callback-Funktion auf, die Sie angeben, wenn sich der Firebase-Authentifizierungsstatus in „currentUser is null“ ändert.

Wenn du einen Callback hinzufügst, der Navigator.of(context).pop() aufruft, wenn „SignedOutAction“ ausgelöst wird, navigiert die App zur vorherigen Seite. In dieser Beispiel-App gibt es nur eine dauerhafte Route. Dabei wird die Anmeldeseite angezeigt, wenn kein Nutzer angemeldet ist, und die Startseite, wenn ein Nutzer vorhanden ist. Da dies geschieht, wenn sich der Nutzer abmeldet, wird in der App die Anmeldeseite angezeigt.

Profilseite anpassen

Ähnlich wie die Anmeldeseite kann auch die Profilseite angepasst werden. Erstens: Auf der aktuellen Seite gibt es keine Möglichkeit, zur Startseite zurückzukehren, wenn sich ein Nutzer auf der Profilseite befindet. Beheben Sie das Problem, indem Sie dem Widget „ProfileScreen“ eine App-Leiste hinzufügen.

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
 const HomeScreen({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       actions: [
         IconButton(
           icon: const Icon(Icons.person),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute<ProfileScreen>(
                 builder: (context) => ProfileScreen(
                   appBar: AppBar(
                     title: const Text('User Profile'),
                   ),
                   actions: [
                     SignedOutAction((context) {
                       Navigator.of(context).pop();
                     })
                   ],
                 ),
               ),
             );
           },
         )
       ],
       automaticallyImplyLeading: false,
     ),
     body: Center(
       child: Column(
         children: [
           Image.asset('dash.png'),
           Text(
             'Welcome!',
             style: Theme.of(context).textTheme.displaySmall,
           ),
           const SignOutButton(),
         ],
       ),
     ),
   );
 }
}

Das Argument ProfileScreen.appBar akzeptiert ein AppBar-Widget aus dem Flutter Material-Paket. Es kann also wie jedes andere von Ihnen erstellte AppBar behandelt und an ein Scaffold übergeben werden. In diesem Beispiel wird die Standardfunktion zum automatischen Hinzufügen einer Schaltfläche „Zurück“ beibehalten und der Bildschirm hat jetzt einen Titel.

Kinder zum Profilbildschirm hinzufügen

Das Widget „ProfileScreen“ hat außerdem ein optionales Argument namens „children“. Dieses Argument akzeptiert eine Liste von Widgets. Diese Widgets werden vertikal in einem Spalten-Widget platziert, das bereits intern zum Erstellen des ProfileScreens verwendet wird. Dieses Spalten-Widget in der Build-Methode „ProfileScreen“ platziert die übergebenen untergeordneten Elemente über der Schaltfläche „Abmelden“.

Aktualisieren Sie den Code in home.dart, damit hier das Firmenlogo angezeigt wird, ähnlich wie auf dem Anmeldebildschirm.

home.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    appBar: AppBar(
                      title: const Text('User Profile'),
                    ),
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                    children: [
                      const Divider(),
                      Padding(
                        padding: const EdgeInsets.all(2),
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Image.asset('flutterfire_300x.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Wenn Sie die App neu laden, wird Folgendes auf dem Bildschirm angezeigt:

7. Google Auth-Anmeldung für mehrere Plattformen

Die FlutterFire-Benutzeroberfläche bietet auch Widgets und Funktionen zur Authentifizierung bei Drittanbietern wie Google, Twitter, Facebook, Apple und GitHub.

Wenn Sie die Google-Authentifizierung einbinden möchten, installieren Sie das offizielle Plug-in firebase_ui_oauth_google und die zugehörigen Abhängigkeiten. Diese übernehmen den nativen Authentifizierungsvorgang. Gehen Sie im Terminal zum Stammverzeichnis Ihres Flutter-Projekts und geben Sie den folgenden Befehl ein:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

Google Log-in-Anbieter aktivieren

Aktivieren Sie als Nächstes den Google-Anbieter in der Firebase Console:

1. Rufen Sie in der Console den Bildschirm Anbieter für Anmeldungen auf.
2. Klicken Sie auf „Neuen Anbieter hinzufügen“.
3. Wählen Sie „Google“ aus.
4. Aktivieren Sie die Option „Aktivieren“ und klicken Sie auf „Speichern“.
5. Wenn ein Dialogfeld mit Informationen zum Herunterladen von Konfigurationsdateien angezeigt wird, klicken Sie auf „Fertig“.
6. Prüfen Sie, ob der Google Log-in-Anbieter hinzugefügt wurde.

Google Log-in-Schaltfläche hinzufügen

Wenn Google Log-in aktiviert ist, fügen Sie das Widget hinzu, das erforderlich ist, um eine stilisierte Google-Anmeldeschaltfläche auf der Anmeldeseite anzuzeigen. Navigieren Sie zur Datei auth_gate.dart und aktualisieren Sie den Code wie folgt:

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart'; // new
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleProvider(clientId: "YOUR_WEBCLIENT_ID"),  // new
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Der einzige neue Code hier ist die Hinzufügung von GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") zur Konfiguration des SignInScreen-Widgets.

Aktualisieren Sie nun Ihre App. Daraufhin wird die Schaltfläche „Über Google anmelden“ angezeigt.

Anmeldeschaltfläche konfigurieren

Die Schaltfläche funktioniert ohne zusätzliche Konfiguration nicht. Wenn Sie mit Flutter Web entwickeln, ist dies der einzige Schritt, den Sie hinzufügen müssen, damit dies funktioniert. Bei anderen Plattformen sind zusätzliche Schritte erforderlich, die wir gleich erläutern.

1. Rufen Sie in der Firebase Console die Seite „Authentifizierungsanbieter“ auf.
2. Klicken Sie auf den Google-Anbieter.
3. Maximieren Sie den Bereich „Web-SDK-Konfiguration“.
4. Kopieren Sie den Wert aus „Webclient-ID“
5. Kehren Sie zu Ihrem Texteditor zurück und aktualisieren Sie die Instanz von GoogleProvider in der Datei auth_gate.dart, indem Sie diese ID an den Parameter clientId übergeben.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

Laden Sie Ihre App neu, nachdem Sie die Web-Client-ID eingegeben haben. Wenn Sie auf die Schaltfläche „Über Google anmelden“ klicken, wird ein neues Fenster geöffnet (falls Sie die Webversion verwenden), in dem Sie durch den Google-Anmeldevorgang geführt werden. Zuerst sieht es so aus:

iOS konfigurieren

Damit dies unter iOS funktioniert, ist ein zusätzlicher Konfigurationsprozess erforderlich.

1. Rufen Sie in der Firebase Console den Bildschirm „Projekteinstellungen“ auf. Es wird eine Karte mit Ihren Firebase-Apps angezeigt, die so aussieht:
2. Klicken Sie auf das iOS-Symbol. Der Name Ihrer Anwendung unterscheidet sich von meinem. Wenn ich „abgeschlossen“ habe, heißt es „starten“, wenn Sie das flutter-codelabs/firebase-auth-flutterfire-ui/start-Projekt verwendet haben, um diesem Codelab zu folgen.
3. Klicken Sie auf die Schaltfläche „GoogleServices-Info.plist“, um die erforderliche Konfigurationsdatei herunterzuladen.
4. Ziehen Sie die heruntergeladene Datei per Drag & Drop in das Verzeichnis ./ios/Runner in Ihrem Flutter-Projekt.
5. Öffnen Sie Xcode, indem Sie den folgenden Terminalbefehl aus dem Stammverzeichnis Ihres Projekts ausführen: open ios/Runner.xcworkspace
6. Klicken Sie mit der rechten Maustaste auf das Runner-Verzeichnis und wählen Sie „Add Files to „Runner“ (Dateien zu „Runner“ hinzufügen) aus.
7. Wählen Sie im Dateimanager „GoogleService-Info.plist“ aus.
8. Fügen Sie in Ihrem Texteditor (d. h. nicht in Xcode) die unten aufgeführten CFBundleURLTypes-Attribute in die Datei [my_project]/ios/Runner/Info.plist ein.

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
        <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                        <!-- TODO Replace this value: -->
                        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
                </array>
        </dict>
</array>
<!-- End of the Google Sign-in Section -->

9. Ersetzen Sie die GoogleProvider.clientId, die Sie in der Webkonfiguration hinzugefügt haben, durch die Client-ID, die mit Ihrer Firebase-iOS-Client-ID verknüpft ist. Sie finden diese ID in der Datei firebase_options.dart als Teil der Konstante iOS. Kopieren Sie den an iOSClientId übergebenen Wert.

static const FirebaseOptions ios = FirebaseOptions(
  apiKey: 'YOUR API KEY',
  appId: 'YOUR APP ID',
  messagingSenderId: '',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  iosClientId: 'IOS CLIENT ID', // Find your iOS client Id here.
  iosBundleId: 'com.example.BUNDLE',
);

10. Fügen Sie diesen Wert im AuthGate-Widget in das Argument GoogleProvider.clientId ein.

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';
import 'package:flutter/material.dart';

import 'home.dart';


class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleProvider(clientId: "YOUR IOS CLIENT ID"),  // replace String
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Wenn Ihre Flutter-App bereits unter iOS ausgeführt wird, müssen Sie sie vollständig herunterfahren und dann die App noch einmal ausführen. Andernfalls führen Sie die App unter iOS aus.

8. Glückwunsch!

Sie haben das Codelab für die Firebase Auth-Benutzeroberfläche für Flutter abgeschlossen . Den vollständigen Code für dieses Codelab finden Sie im Verzeichnis „complete“ auf GitHub: Flutter Codelabs

Behandelte Themen

• Flutter-App für die Verwendung von Firebase einrichten
• Firebase-Projekt in der Firebase Console einrichten
• FlutterFire CLI
• Firebase CLI
• Firebase Authentication verwenden
• Firebase-Auth in Ihrer Flutter-App mit FlutterFire-UI ganz einfach verarbeiten

Nächste Schritte

• Weitere Informationen zur Verwendung von Firestore und der Authentifizierung in Flutter finden Sie im Codelab zu Firebase für Flutter
• Weitere Firebase-Tools für die Entwicklung Ihrer Flutter-Anwendung:
• Cloud Storage
• Cloud Functions
• Echtzeitdatenbank

Weitere Informationen

• Firebase-Website: firebase.google.com
• Flutter-Website: flutter.dev
• FlutterFire Firebase Flutter-Widgets: firebase.flutter.dev
• Firebase-YouTube-Kanal
• YouTube-Kanal von Flutter

Sparky wird mit dir feiern!