Diese Seite wurde von der Cloud Translation API übersetzt.

Flutter-App mit FirebaseUI einen Nutzerauthentifizierungsablauf hinzufügen

1. Hinweis

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

Vorbereitung

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

Flutter-Widget-Framework kennenlernen
Codelab Erste Flutter-App erstellen – Teil 1 ausprobieren

Sie sollten auch etwas Erfahrung mit Firebase haben. Es ist aber in Ordnung, wenn Sie noch nie Firebase zu 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:

Was Sie erstellen

In diesem Codelab erfahren Sie, wie Sie mit Firebase Authentication den Authentifizierungsablauf für eine Flutter-App erstellen. Die Anwendung hat einen Anmeldebildschirm, einen Registrierungsbildschirm, einen Bildschirm zur 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 einrichten
Firebase mit der Firebase CLI Ihrer Anwendung hinzufügen
Firebase-Konfiguration in Dart mit der 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
Ihre App für die Verwendung mit mehreren Anmeldeanbietern konfigurieren
Mit dem firebase_ui_auth-Paket Ihrer Anwendung einen Bildschirm für das Nutzerprofil hinzufügen

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

Voraussetzungen

Grundkenntnisse in Flutter und das installierte SDK
Einen Texteditor (JetBrains IDEs, Android Studio und VS Code werden von Flutter unterstützt)
Google Chrome-Browser oder Ihr 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

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

Firebase-Projekt erstellen

Melden Sie sich in Firebase an.
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.

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 finden Sie unter Firebase-Projekte verstehen.

In der App, die Sie entwickeln, wird Firebase Authentication verwendet, damit sich Nutzer in Ihrer App anmelden können. Außerdem können sich neue Nutzer über die Flutter-Anwendung registrieren.

Firebase Authentication muss in der Firebase Console aktiviert und anschließend speziell konfiguriert werden.

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

Maximieren Sie in der Firebase Console im linken Bereich das Menü Build.
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.
Klicken Sie in der Liste Anbieter für Anmeldungen auf E-Mail/Passwort, aktivieren Sie den Schalter Aktivieren und klicken Sie dann auf Speichern.

3. Flutter-App einrichten

Sie müssen den Startercode herunterladen und die Firebase CLI installieren, bevor wir beginnen.

Startcode abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

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

Alternativ können Sie das Befehlszeilentool von GitHub verwenden:

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. Eine heißt complete und die 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 das Verzeichnis „complete“ 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, ist die einfachste Methode, diesen Befehl über das Terminal auszuführen:

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

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

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

firebase login

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

Prüfen Sie, ob die Befehlszeile 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

Die angezeigte Liste sollte mit den Firebase-Projekten in der Firebase Console übereinstimmen. Sie sollten mindestens flutterfire-ui-codelab.

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 prüfen Sie, ob 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 Sie diesen Befehl ausführen, werden Sie aufgefordert, auszuwählen, welches Firebase-Projekt Sie verwenden und welche Plattformen Sie einrichten möchten.

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

Wählen Sie das Projekt aus, das Sie verwenden möchten. Verwenden Sie in diesem Fall flutterfire-ui-codelab .
Wählen Sie die Plattformen aus, die Sie verwenden möchten. In diesem Codelab finden Sie Schritte zum Konfigurieren der Firebase-Authentifizierung für Flutter für das Web, iOS und Android. Sie können Ihr Firebase-Projekt jedoch so einrichten, dass alle Optionen verwendet werden.
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-Anwendung) in der Konsole erstellen mussten, sondern dass die FlutterFire-Befehlszeile dies für Sie erledigt hat.

Wenn das erledigt 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',
 );
}

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.

Die Methode DefaultFirebaseOptions.currentPlatform verwendet das von Flutter bereitgestellte TargetPlatform-Enum, um die Plattform zu ermitteln, auf der Ihre App ausgeführt wird, und gibt dann die Firebase-Konfigurationswerte zurück, 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. Achten Sie darauf, dass 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

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

Firebase initialisieren

Um die hinzugefügten Pakete und DefaultFirebaseOptions.currentPlatform, zu verwenden, aktualisieren Sie 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 hat zwei Funktionen.

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.
Firebase.initializeApp richtet eine Verbindung zwischen Ihrer Flutter-App und Ihrem Firebase-Projekt ein. Die DefaultFirebaseOptions.currentPlatform wird aus der 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 in Ihrer Anwendung verarbeitet, z. B. Anmeldung, Registrierung, Passwort vergessen und Nutzerprofil. Fügen Sie Ihrer App zuerst eine Landingpage hinzu, die als Authentifizierungsschutz für die Hauptanwendung dient.

Material- oder Cupertino-App

Für die FlutterFire-Benutzeroberfläche muss Ihre Anwendung in eine MaterialApp oder CupertinoApp eingewickelt sein. 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 anzeigen können, müssen Sie feststellen, ob der Nutzer derzeit authentifiziert ist. Am häufigsten wird dies mithilfe des Firebase Auth-Plug-ins überprüft, indem auf die AuthStateChanges von FirebaseAuth gewartet wird.

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

Dieses Widget muss aktualisiert werden, um den authStateChanges-Stream einzubinden.

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 Daten-Snapshots aus einem übergebenen Stream erstellt wird. Sie 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 übergeben, der oben genannte Stream, der ein Firebase-User-Objekt zurückgibt, wenn sich der Nutzer authentifiziert hat. Andernfalls wird null zurückgegeben.
Als Nächstes wird mit snapshot.hasData geprüft, ob der Wert aus dem Stream das User-Objekt enthält.
Andernfalls wird ein SignInScreen-Widget zurückgegeben. Derzeit passiert auf diesem Bildschirm nichts. Dieser wird im nächsten Schritt aktualisiert.
Andernfalls wird HomeScreen zurückgegeben, der Hauptteil der Anwendung, auf den nur authentifizierte Nutzer zugreifen können.

Das 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, sollte ein leerer Anmeldebildschirm angezeigt werden.

5. Anmeldebildschirm

Das SignInScreen-Widget von FlutterFire UI bietet folgende Funktionen:

Ermöglicht die Anmeldung von Nutzern
Wenn Nutzer ihr Passwort vergessen haben, können sie auf „Passwort vergessen?“ tippen und werden zu einem Formular weitergeleitet, über das sie ihr Passwort zurücksetzen können.
Wenn ein Nutzer noch nicht registriert ist, kann er auf „Registrieren“ tippen. Daraufhin wird ein anderes Formular geöffnet, über das er sich registrieren kann.

Auch dafür sind nur ein paar 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 für die 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 bietet Parameter, mit denen sich das Erscheinungsbild des Anmeldebildschirms anpassen lässt. Sie können beispielsweise das Logo Ihres Unternehmens hinzufügen.

headerBuilder

Mit dem Argument SignInScreen.headerBuilder können Sie beliebige Widgets über dem Anmeldeformular hinzufügen. Dieses Widget wird nur auf schmalen Bildschirmen wie Mobilgeräten angezeigt. Auf breiten Bildschirmen können Sie SignInScreen.sideBuilder verwenden, was später in diesem Codelab erläutert wird.

Aktualisieren Sie die Datei auth_gate.dart mit dem folgenden 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 wird mit dem neuen Code oben auf dem Bildschirm ein Bild eingefügt. Ihre Anwendung sollte jetzt so aussehen.

Untertitel-Tool

Auf dem Anmeldebildschirm sind drei weitere Parameter zu sehen, 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.

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

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();
     },
   );
 }}

Side Builder

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 neben dem Anmeldeformular angezeigt und nur auf Breitbildbildschirmen. Das bedeutet, dass das Widget nur auf Computern und in 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. Wenn ein Bildschirm mehr als 800 Pixel breit ist, werden die Inhalte des Seiten-Builders angezeigt, die Kopfzeileninhalte jedoch nicht. Ist der Bildschirm weniger als 800 Pixel breit, ist das Gegenteil der Fall.

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

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

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

Geben Sie eine E-Mail-Adresse und ein Passwort für den neuen Nutzer ein. Dies können eine gefälschte E-Mail-Adresse und ein gefälschtes Passwort sein, wie im Bild unten zu sehen. Das funktioniert, aber die Funktion „Passwort vergessen“ funktioniert nicht, wenn Sie eine gefälschte E-Mail-Adresse verwenden.

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 UI bietet auch ein ProfileScreen-Widget, mit dem Sie mit wenigen Codezeilen viele Funktionen nutzen können.

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, die von der FlutterFire-UI-Seite bereitgestellt wird. Alle Schaltflächen und Textfelder sind mit Firebase Auth verbunden und funktionieren sofort. 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.

Abmelden

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

Aktualisieren Sie zuerst 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 dem Argument ProfileScreen.actions auch eine Liste von Aktionen. Diese Aktionen haben den Typ FlutterFireUiAction. Es gibt viele verschiedene Klassen, die Untertypen von FlutterFireUiAction sind. Sie geben Ihrer App im Allgemeinen an, wie sie 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 Sie einen Rückruf hinzufügen, der Navigator.of(context).pop() aufruft, wenn „SignedOutAction“ ausgelöst wird, wechselt die App zur vorherigen Seite. In dieser Beispiel-App gibt es nur eine permanente Route, auf der die Anmeldeseite angezeigt wird, wenn kein Nutzer angemeldet ist, und die Startseite, wenn ein Nutzer angemeldet ist. Da dies passiert, 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 unserer 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 beibehalten, eine Schaltfläche „Zurück“ automatisch hinzuzufügen, 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 Profilbildschirms verwendet wird. Dieses Spalten-Widget in der Build-Methode „ProfileScreen“ platziert die übergebenen Kinder ü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. Multiplattform-Anmeldung über Google Auth

Die FlutterFire UI bietet außerdem 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. Rufen Sie im Terminal das Stammverzeichnis Ihres Flutter-Projekts auf und geben Sie den folgenden Befehl ein:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

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

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

Wenn die Google-Anmeldung aktiviert ist, fügen Sie der Anmeldeseite das Widget hinzu, das eine stilisierte Google-Anmeldeschaltfläche anzeigt. Rufen Sie die Datei „auth_gate.dart“ auf und aktualisieren Sie den Code so:

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.

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.

Rufen Sie in der Firebase Console die Seite „Authentifizierungsanbieter“ auf.
Klicken Sie auf den Google-Anbieter.
Klicken Sie auf den maximierten Bereich „Web-SDK-Konfiguration“.
Kopieren Sie den Wert aus „Web-Client-ID“ .
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 die App neu, nachdem Sie die Webclient-ID eingegeben haben. Wenn Sie die Schaltfläche „Über Google anmelden“ drücken, wird in der Webversion ein neues Fenster angezeigt, in dem Sie durch den Anmeldevorgang bei Google geführt werden. Zuerst sieht es so aus:

iOS konfigurieren

Damit dies auf iOS-Geräten funktioniert, ist eine zusätzliche Konfiguration erforderlich.

Rufen Sie in der Firebase Console den Bildschirm „Projekteinstellungen“ auf. Sie sehen dann eine Karte mit Ihren Firebase-Apps, die so aussieht:
Klicken Sie auf „iOS“. Der Name Ihrer Anwendung unterscheidet sich von meinem. Wenn Sie das Projekt flutter-codelabs/firebase-auth-flutterfire-ui/start verwendet haben, um dieses Codelab zu verfolgen, steht bei Ihnen anstelle von „complete“ (fertig) „start“ (beginnen).
Klicken Sie auf die Schaltfläche „GoogleServices-Info.plist“, um die erforderliche Konfigurationsdatei herunterzuladen.
Ziehen Sie die heruntergeladene Datei per Drag-and-drop in das Verzeichnis/ios/Runner in Ihrem Flutter-Projekt.
Öffnen Sie Xcode. Führen Sie dazu im Stammverzeichnis Ihres Projekts den folgenden Terminalbefehl aus: open ios/Runner.xcworkspace
Klicken Sie mit der rechten Maustaste auf das Verzeichnis „Runner“ und wählen Sie „Dateien zu ‚Runner‘ hinzufügen“ aus.
Wählen Sie im Dateimanager „GoogleService-Info.plist“ aus.
Fügen Sie in Ihrem Texteditor (nicht Xcode) die folgenden CFBundleURLTypes-Attribute der Datei [my_project]/ios/Runner/Info.plist hinzu.

<!-- 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 -->

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',
);

Fügen Sie diesen Wert in das Argument GoogleProvider.clientId im Widget AuthGate 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 beenden und dann noch einmal ausführen. Andernfalls führen Sie die App unter iOS aus.

8. Glückwunsch!

Sie haben das Codelab zur 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
Mit der FlutterFire-UI die Firebase-Authentifizierung in Ihrer Flutter-App ganz einfach verarbeiten

Nächste Schritte

Weitere Informationen zur Verwendung von Firestore und Authentifizierung in Flutter: Codelab zu Firebase für Flutter
Weitere Firebase-Tools für die Entwicklung Ihrer Flutter-Anwendung:
Cloud Storage
Cloud Functions
Realtime Database

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 ist da, um mit dir zu feiern!

Flutter-App mit FirebaseUI einen Nutzerauthentifizierungsablauf hinzufügen

1. Hinweis

Vorbereitung

Was Sie erstellen

Lerninhalte

Voraussetzungen

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

E-Mail-Anmeldung für Firebase Authentication aktivieren

3. Flutter-App einrichten

Startcode abrufen

Firebase CLI installieren

FlutterFire CLI installieren

Firebase-Projekt Ihrer Flutter-App hinzufügen

FlutterFire konfigurieren

Firebase-Pakete zur Flutter-App hinzufügen

Firebase initialisieren

4. Erste Firebase UI-Authentifizierungsseite hinzufügen

Material- oder Cupertino-App

Authentifizierungsstatus prüfen

5. Anmeldebildschirm

Anmeldebildschirm anpassen

headerBuilder

Untertitel-Tool

Fußzeilen-Builder

Side Builder

Nutzer erstellen

6. Profilbildschirm

ProfileScreen-Widget hinzufügen

Abmelden

Profilseite anpassen

Kinder zum Profilbildschirm hinzufügen

7. Multiplattform-Anmeldung über Google Auth

Google Log-in-Anbieter aktivieren

Schaltfläche für Google Log-in hinzufügen

Anmeldeschaltfläche konfigurieren

iOS konfigurieren

8. Glückwunsch!

Behandelte Themen

Nächste Schritte

Weitere Informationen