1. Bevor Sie beginnen
In diesem Codelab erfahren Sie, wie Sie mithilfe des FlutterFire-UI-Pakets die Firebase-Authentifizierung zu Ihrer Flutter-App hinzufügen. Mit diesem Paket fügen Sie einer Flutter-App sowohl E-Mail-/Passwort-Authentifizierung als auch Google-Anmeldeauthentifizierung hinzu. Außerdem erfahren Sie, wie Sie ein Firebase-Projekt einrichten und die FlutterFire-CLI verwenden, um Firebase in Ihrer Flutter-App zu initialisieren.
Voraussetzungen
Dieses Codelab setzt voraus, dass Sie über Flutter-Erfahrung verfügen. Wenn nicht, möchten Sie vielleicht zunächst die Grundlagen erlernen. Die folgenden Links sind hilfreich:
- Machen Sie eine Tour durch das Flutter Widget Framework
- Probieren Sie das Codelab „Write Your First Flutter App, Teil 1“ aus
Sie sollten auch über etwas Firebase-Erfahrung verfügen, aber es ist in Ordnung, wenn Sie Firebase noch nie zu einem Flutter-Projekt hinzugefügt haben. Wenn Sie mit der Firebase-Konsole nicht vertraut sind oder ganz neu bei Firebase sind, sehen Sie sich zunächst die folgenden Links an:
Was Sie erstellen werden
Dieses Codelab führt Sie durch den Aufbau des Authentifizierungsablaufs für eine Flutter-App unter Verwendung von Firebase zur Authentifizierung. Die Anwendung verfügt über einen Anmeldebildschirm, einen „Registrieren“-Bildschirm, einen Bildschirm zur Passwortwiederherstellung und einen Benutzerprofilbildschirm.
Was Sie lernen werden
Dieses Codelab umfasst:
- Firebase zu einer Flutter-App hinzufügen
- Einrichtung der Firebase-Konsole
- Verwenden Sie die Firebase-CLI, um Firebase zu Ihrer Anwendung hinzuzufügen
- Verwenden der FlutterFire-CLI zum Generieren der Firebase-Konfiguration in Dart
- Hinzufügen der Firebase-Authentifizierung zu Ihrer Flutter-App
- Einrichtung der Firebase-Authentifizierung in der Konsole
- Hinzufügen einer E-Mail-Adresse und eines Passworts zur Anmeldung mit dem Paket
firebase_ui_auth. - Benutzerregistrierung mit dem Paket
firebase_ui_authhinzufügen - Hinzufügen eines „Passwort vergessen?“ Seite
- Hinzufügen der Google-Anmeldung mit
firebase_ui_auth - Konfigurieren Sie Ihre App für die Zusammenarbeit mit mehreren Anmeldeanbietern.
- Hinzufügen eines Benutzerprofilbildschirms zu Ihrer Anwendung mit dem Paket
firebase_ui_auth
Dieses Codelab befasst sich speziell mit dem Hinzufügen eines robusten Authentifizierungssystems mithilfe des Pakets firebase_ui_auth . Wie Sie sehen werden, kann die gesamte App mit allen oben genannten Funktionen mit etwa 100 Codezeilen implementiert werden.
Was du brauchen wirst
- Kenntnisse in Flutter und dem installierten SDK
- Ein Texteditor (JetBrains-IDEs, Android Studio und VS-Code werden von Flutter unterstützt)
- Google Chrome-Browser oder Ihr anderes bevorzugtes Entwicklungsziel für Flutter. (Einige Terminalbefehle in diesem Codelab gehen davon aus, dass Sie Ihre App in Chrome ausführen.)
2. Erstellen und richten Sie ein Firebase-Projekt ein
Die erste Aufgabe, die Sie erledigen müssen, ist die Erstellung eines Firebase-Projekts in der Webkonsole von Firebase.
Erstellen Sie ein Firebase-Projekt
- Melden Sie sich bei Firebase an.
- Klicken Sie in der Firebase-Konsole 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 Projekterstellungsoptionen. Akzeptieren Sie die Firebase-Bedingungen, 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 Grundlegendes zu Firebase-Projekten .
Die App, die Sie erstellen, verwendet die Firebase-Authentifizierung , um Ihren Benutzern die Anmeldung bei Ihrer App zu ermöglichen. Außerdem können sich neue Benutzer über die Flutter-Anwendung registrieren.
Die Firebase-Authentifizierung muss über die Firebase-Konsole aktiviert werden und erfordert nach der Aktivierung eine spezielle Konfiguration.
Aktivieren Sie die E-Mail-Anmeldung für die Firebase-Authentifizierung
Um Benutzern die Anmeldung bei der Web-App zu ermöglichen, verwenden Sie zunächst die Anmeldemethode E-Mail/Passwort . Später fügen Sie die Google-Anmeldemethode hinzu.
- Erweitern Sie in der Firebase-Konsole das Build- Menü im linken Bereich.
- Klicken Sie auf Authentifizierung und dann auf die Schaltfläche „ Erste Schritte“ und dann auf die Registerkarte „Anmeldemethode “ (oder klicken Sie hier , um direkt zur Registerkarte „Anmeldemethode“ zu gelangen).
- Klicken Sie in der Liste der Anmeldeanbieter auf E-Mail/Passwort , stellen Sie den Schalter „Aktivieren“ auf „Ein“ und klicken Sie dann auf „Speichern“ .
3. Richten Sie die Flutter-App ein
Bevor wir beginnen, müssen Sie den Startercode herunterladen und die Firebase-CLI installieren.
Holen Sie sich den Startercode
Klonen Sie das GitHub-Repository über die Befehlszeile:
git clone https://github.com/flutter/codelabs.git flutter-codelabs
Alternativ, wenn Sie das CLI-Tool von GitHub installiert haben:
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. Einer heißt complete und der andere heißt start . Das start enthält ein unvollständiges Projekt und Sie werden dort die meiste Zeit verbringen.
cd flutter-codelabs/firebase-auth-flutterfire-ui/start
Wenn Sie vorwärts springen oder sehen möchten, wie etwas aussehen sollte, wenn es fertig ist, suchen Sie im Verzeichnis mit dem Namen „complete“ nach einem Querverweis.
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 diesem Projekt im gesamten Codelab Code hinzufügen. Öffnen oder importieren Sie dieses Verzeichnis in Ihre bevorzugte IDE.
Installieren Sie die Firebase-CLI
Die Firebase-CLI bietet Tools zum Verwalten Ihrer Firebase-Projekte. Die CLI ist für die FlutterFire-CLI erforderlich, die Sie gleich installieren werden.
Es gibt verschiedene Möglichkeiten, die CLI zu installieren. Wenn Sie MacOS oder Linux verwenden, ist es am einfachsten, diesen Befehl von Ihrem Terminal aus 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 bei Firebase an, indem Sie den folgenden Befehl ausführen:
firebase login
- Dieser Befehl verbindet Ihren lokalen Computer mit Firebase und gewährt Ihnen Zugriff auf Ihre Firebase-Projekte.
- Testen Sie, ob die CLI ordnungsgemäß installiert ist und Zugriff auf Ihr Konto hat, indem Sie Ihre Firebase-Projekte auflisten. Führen Sie den folgenden Befehl aus:
firebase projects:list
- Die angezeigte Liste sollte mit den in der Firebase-Konsole aufgeführten Firebase-Projekten übereinstimmen. Sie sollten zumindest
flutterfire-ui-codelab.
Installieren Sie die FlutterFire-CLI
Die FlutterFire-CLI ist ein Tool, das den Installationsprozess von Firebase auf allen unterstützten Plattformen in Ihrer Flutter-App vereinfacht. Es basiert auf der Firebase-CLI.
Installieren Sie zunächst die CLI:
dart pub global activate flutterfire_cli
Stellen Sie sicher, dass die CLI installiert wurde. Führen Sie den folgenden Befehl aus und stellen Sie sicher, dass die CLI das Hilfemenü ausgibt.
flutterfire -—help
Fügen Sie Ihr Firebase-Projekt zu Ihrer Flutter-App hinzu
Konfigurieren Sie FlutterFire
Sie können FlutterFire verwenden, um den erforderlichen Dart-Code für die Verwendung von Firebase in Ihrer Flutter-App zu generieren.
flutterfire configure
Wenn dieser Befehl ausgeführt wird, werden Sie aufgefordert, auszuwählen, welches Firebase-Projekt Sie verwenden möchten und welche Plattformen Sie einrichten möchten.
Die folgenden Screenshots zeigen die Eingabeaufforderungen, 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 aus, welche Plattformen Sie verwenden möchten. In diesem Codelab gibt es Schritte zum Konfigurieren der Firebase-Authentifizierung für Flutter für Web, iOS und Android, aber Sie können Ihr Firebase-Projekt so einrichten, dass alle Optionen verwendet werden.
- Dieser Screenshot zeigt die Ausgabe am Ende des Prozesses. Wenn Sie mit Firebase vertraut sind, werden Sie feststellen, dass Sie keine Plattformanwendungen (z. B. eine Android-Anwendung) in der Konsole erstellen mussten und die FlutterFire-CLI dies für Sie erledigt hat.
Wenn dies abgeschlossen ist, sehen Sie sich die Flutter-App in Ihrem Texteditor an. FlutterFire CLI hat eine neue Datei namens firebase_options.dart generiert. Diese Datei enthält eine Klasse namens FirebaseOptions, die über statische Variablen verfügt, die die für jede Plattform erforderliche Firebase-Konfiguration enthalten. Wenn Sie beim Ausführen flutterfire configure alle Plattformen ausgewählt haben, werden statische Werte mit den Namen web , android , ios und macos angezeigt.
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.appspot.com',
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.appspot.com',
);
static const FirebaseOptions ios = FirebaseOptions(
apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
messagingSenderId: '963656261848',
projectId: 'flutterfire-ui-codelab',
storageBucket: 'flutterfire-ui-codelab.appspot.com',
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.appspot.com',
iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
iosBundleId: 'com.example.complete',
);
}
Firebase verwendet das Wort „Anwendung“, um sich auf einen bestimmten Build für eine bestimmte Plattform in einem Firebase-Projekt zu beziehen. Das Firebase-Projekt FlutterFire-ui-codelab verfügt beispielsweise über 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 die von Flutter bereitgestellte TargetPlatform Enumeration, um die Plattform zu erkennen, auf der Ihre App ausgeführt wird, und gibt dann die Firebase-Konfigurationswerte zurück, die für die richtige Firebase-Anwendung erforderlich sind.
Fügen Sie Firebase-Pakete zur Flutter-App hinzu
Der letzte Einrichtungsschritt besteht darin, die relevanten Firebase-Pakete zu Ihrem Flutter-Projekt hinzuzufügen. Die Datei firebase_options.dart sollte Fehler enthalten, da sie auf Firebase-Paketen basiert, die noch nicht hinzugefügt wurden. Stellen Sie im Terminal sicher, 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
Dies sind die einzigen Pakete, die Sie derzeit benötigen.
Firebase initialisieren
Um die hinzugefügten Pakete und die DefaultFirebaseOptions.currentPlatform, aktualisieren Sie den Code in der main in der Datei main.dart .
main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
Dieser Code bewirkt zwei Dinge.
-
WidgetsFlutterBinding.ensureInitialized()weist Flutter an, den Anwendungs-Widget-Code erst dann auszuführen, wenn das Flutter-Framework vollständig gestartet ist. Firebase verwendet native Plattformkanäle, für die die Ausführung des Frameworks erforderlich ist. -
Firebase.initializeAppstellt eine Verbindung zwischen Ihrer Flutter-App und Ihrem Firebase-Projekt her. DieDefaultFirebaseOptions.currentPlatformwird aus unserer generierten Dateifirebase_options.dartimportiert. Dieser statische Wert erkennt, auf welcher Plattform Sie ausgeführt werden, und übergibt die entsprechenden Firebase-Schlüssel.
4. Fügen Sie die erste Firebase-UI-Auth-Seite hinzu
Firebase UI for Auth stellt Widgets bereit, die ganze Bildschirme in Ihrer Anwendung darstellen. Diese Bildschirme verwalten verschiedene Authentifizierungsabläufe in Ihrer Anwendung, z. B. Anmeldung, Registrierung, Passwort vergessen, Benutzerprofil und mehr. Fügen Sie zunächst eine Landingpage zu Ihrer App hinzu, die als Authentifizierungsschutz für die Hauptanwendung fungiert.
Material oder Cupertino App
Für die FlutterFire-Benutzeroberfläche muss Ihre Anwendung entweder in eine MaterialApp oder eine CupertinoApp eingebettet sein. Abhängig von Ihrer Wahl spiegelt die Benutzeroberfläche automatisch die Unterschiede zwischen Material- und Cupertino-Widgets wider. Verwenden Sie für dieses Codelab MaterialApp , das der App bereits in app.dart 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(),
);
}
}
Überprüfen Sie den Authentifizierungsstatus
Bevor Sie einen Anmeldebildschirm anzeigen können, müssen Sie feststellen, ob der Benutzer derzeit authentifiziert ist. Die häufigste Methode, dies zu überprüfen, besteht darin, die authStateChanges von FirebaseAuth mithilfe des Firebase Auth-Plugins abzuhören.
Im obigen Codebeispiel erstellt die MaterialApp in ihrer 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 einzuschließen.
Die authStateChanges API gibt einen Stream entweder mit dem aktuellen Benutzer (sofern dieser angemeldet ist) oder null zurück, wenn dies nicht der Fall ist. Um diesen Status in unserer Anwendung zu abonnieren, können Sie das StreamBuilder- Widget von Flutter verwenden und den Stream daran übergeben.
StreamBuilder ist ein Widget, das sich selbst basierend auf dem neuesten Snapshot der Daten eines Streams erstellt, den Sie ihm übergeben. 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.streamwird anFirebaseAuth.instance.authStateChangedübergeben, den oben genannten Stream, der ein Firebase-Userzurückgibt, wenn sich der Benutzer authentifiziert hat. (Andernfalls wirdnullzurückgegeben.) - Als Nächstes prüft der Code mithilfe von
snapshot.hasData, ob der Wert aus dem Stream dasUserenthält. - Ist dies nicht der Fall, wird ein
SignInScreenWidget zurückgegeben. Derzeit führt dieser Bildschirm zu nichts. Dies wird im nächsten Schritt aktualisiert. - Andernfalls wird ein
HomeScreenzurückgegeben, der den Hauptteil der Anwendung darstellt, auf den nur authentifizierte Benutzer zugreifen können.
Der SignInScreen ist ein Widget, das aus dem FlutterFire-UI-Paket stammt. Dies wird der Schwerpunkt des nächsten Schritts dieses Codelabs sein. Wenn Sie die App zu diesem Zeitpunkt ausführen, sollte ein leerer Anmeldebildschirm angezeigt werden.
5. Anmeldebildschirm
Das von der FlutterFire-Benutzeroberfläche bereitgestellte SignInScreen Widget fügt die folgende Funktionalität hinzu:
- Ermöglicht Benutzern die Anmeldung
- Wenn Benutzer ihr Passwort vergessen haben, können sie auf „Passwort vergessen?“ tippen. und werden zu einem Formular zum Zurücksetzen ihres Passworts weitergeleitet
- Wenn ein Benutzer noch nicht registriert ist, kann er auf „Registrieren“ tippen und wird zu einem anderen Formular weitergeleitet, das ihm die Registrierung ermöglicht.
Auch hierfü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 erforderlich ist, um alle oben genannten Funktionen zu erhalten. Sie sollten nun einen Anmeldebildschirm sehen, der Texteingaben für „E-Mail“ und „Passwort“ sowie eine Schaltfläche „Anmelden“ enthält.
Obwohl es funktional ist, mangelt es ihm an Stil. Das Widget stellt Parameter bereit, um das Aussehen des Anmeldebildschirms anzupassen. Beispielsweise möchten Sie möglicherweise das Logo Ihres Unternehmens hinzufügen.
Passen Sie den Anmeldebildschirm an
headerBuilder
Mit dem Argument SignInScreen.headerBuilder können Sie beliebige Widgets über dem Anmeldeformular hinzufügen. 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();
},
);
}
}
Das Argument headerBuilder erfordert eine Funktion vom Typ HeaderBuilder, 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, stellt er Werte bereit, die Sie verwenden können, wie z. B. BuildContext und BoxConstraints , und erfordert die Rückgabe eines Widgets. Das von Ihnen 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 Bewerbung sollte nun so aussehen.
Untertitel-Builder
Der Anmeldebildschirm stellt drei zusätzliche Parameter zur Verfügung, mit denen Sie den Bildschirm anpassen können: subtitleBuilder , footerBuilder und sideBuilder .
Der subtitleBuilder unterscheidet sich geringfügig darin, dass die Rückrufargumente eine Aktion vom Typ AuthAction enthalten. AuthAction ist eine Enumeration, mit der Sie erkennen können, ob der Bildschirm, auf dem sich der Benutzer befindet, der „Anmelde“-Bildschirm oder der „Registrieren“-Bildschirm ist.
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();
},
);
}
}
Laden Sie die Anwendung neu und sie sollte so aussehen
Fußzeilen-Builder
Das Argument „footerBuilder“ ist dasselbe wie das Argument „subtitleBuilder“. Es macht weder BoxConstraints noch shrinkOffset verfügbar, da es eher für Text als für Bilder gedacht ist. (Sie können jedoch jedes gewünschte Widget hinzufügen.)
Fügen Sie mit diesem Code eine Fußzeile zu Ihrem 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 Rückruf, und dieses Mal sind die Argumente für diesen Rückruf BuildContext und double shrinkOffset . Das von sideBuilder zurückgegebene Widget wird links vom Anmeldeformular und nur auf Breitbildschirmen angezeigt. Das bedeutet im Endeffekt, dass das Widget nur auf Desktop- und Web-Apps angezeigt wird.
Intern verwendet die FlutterFire-Benutzeroberfläche einen Haltepunkt, um zu bestimmen, ob der Header-Inhalt angezeigt werden soll (auf großen Bildschirmen, z. B. Mobilgeräten) oder der Seiteninhalt angezeigt werden soll (auf breiten Bildschirmen, Desktop oder Web). Insbesondere wenn ein Bildschirm mehr als 800 Pixel breit ist, wird der Side-Builder-Inhalt angezeigt, der Header-Inhalt jedoch nicht. Wenn der Bildschirm weniger als 800 Pixel breit ist, 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();
},
);
}
}
Ihre App sollte nun so aussehen, wenn Sie die Breite des Fensters erweitern (wenn Sie Flutter Web oder MacOS verwenden).
Erstellen Sie einen Benutzer
Zu diesem Zeitpunkt ist der gesamte Code für diesen Bildschirm fertig. Bevor Sie sich anmelden können, müssen Sie jedoch einen Benutzer erstellen. Sie können dies über den Bildschirm „Registrieren“ tun oder einen Benutzer in der Firebase-Konsole erstellen.
So verwenden Sie die Konsole:
- Gehen Sie in der Firebase-Konsole zur Tabelle „Benutzer“.
- klicken Sie hier
- Wählen Sie „flutterfire-ui-codelab“ (oder ein anderes Projekt, wenn Sie einen anderen Namen verwendet haben). Sie sehen diese Tabelle:
- Klicken Sie auf die Schaltfläche „Benutzer hinzufügen“.
- Geben Sie eine E-Mail-Adresse und ein Passwort für den neuen Benutzer ein. Dabei kann es sich um eine gefälschte E-Mail-Adresse und ein gefälschtes Passwort handeln, wie ich es im Bild unten eingegeben habe. Das wird funktionieren, aber die Funktion „Passwort vergessen“ funktioniert nicht, wenn Sie eine gefälschte E-Mail-Adresse verwenden.
- Klicken Sie auf „Benutzer hinzufügen“
Jetzt können Sie zu Ihrer Flutter-Anwendung zurückkehren und einen Benutzer über die Anmeldeseite anmelden. Ihre App sollte so aussehen:
6. Profilbildschirm
Die FlutterFire-Benutzeroberfläche bietet außerdem ein ProfileScreen Widget, das Ihnen wiederum viele Funktionen in wenigen Codezeilen bietet.
Fügen Sie das ProfileScreen-Widget hinzu
Navigieren Sie in Ihrem Texteditor zur Datei home.dart . Aktualisieren Sie es 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. Wenn dieser IconButton gedrückt wird, erstellt Ihre Anwendung eine neue anonyme Route und navigiert zu dieser. Diese Route zeigt das ProfileScreen Widget an, das vom MaterialPageRoute.builder -Rückruf zurückgegeben wird.
Laden Sie Ihre App neu und klicken Sie auf das Symbol oben rechts (in der App-Leiste). Daraufhin wird eine Seite wie diese angezeigt:
Dies ist die Standard-Benutzeroberfläche, die von der FlutterFire-Benutzeroberfläche bereitgestellt wird. Alle Schaltflächen und Textfelder sind mit Firebase Auth verbunden und funktionieren sofort. Sie können beispielsweise einen Namen in das Textfeld „Name“ eingeben und die FlutterFire-Benutzeroberfläche ruft die Methode FirebaseAuth.instance.currentUser?.updateDisplayName auf, die diesen Namen in Firebase speichert.
Abmelden
Wenn Sie derzeit auf die Schaltfläche „Abmelden“ klicken, ändert sich die App nicht. Sie werden abgemeldet, aber Sie werden nicht zurück zum AuthGate-Widget geleitet. Um dies zu implementieren, verwenden Sie den Parameter ProfileScreen.actions.
Aktualisieren Sie 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 nun eine Instanz von ProfileScreen erstellen, übergeben Sie ihr auch eine Liste von Aktionen an das Argument ProfileScreen.actions . Diese Aktionen sind vom Typ FlutterFireUiAction . Es gibt viele verschiedene Klassen, die Untertypen von FlutterFireUiAction sind, und im Allgemeinen verwenden Sie sie, um Ihre App anzuweisen, auf verschiedene Änderungen des Authentifizierungsstatus zu reagieren. Die SignedOutAction ruft eine Rückruffunktion auf, die Sie ihr geben, wenn sich der Firebase-Authentifizierungsstatus so ändert, dass „currentUser“ null ist.
Durch Hinzufügen eines Rückrufs, 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 permanente Route, die die Anmeldeseite anzeigt, wenn kein Benutzer angemeldet ist, und die Startseite, wenn ein Benutzer angemeldet ist. Da dies geschieht, wenn sich der Benutzer abmeldet, zeigt die App die Anmeldeseite an.
Passen Sie die Profilseite an
Ähnlich wie die Anmeldeseite ist die Profilseite anpassbar. Erstens gibt es auf unserer aktuellen Seite keine Möglichkeit, zur Startseite zurückzukehren, sobald sich ein Benutzer auf der Profilseite befindet. Beheben Sie dieses Problem, indem Sie dem ProfileScreen-Widget eine AppBar zuweisen.
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, sodass es wie jede andere AppBar behandelt werden kann, die Sie erstellt und an ein Scaffold übergeben haben. In diesem Beispiel wird die Standardfunktionalität des automatischen Hinzufügens einer „Zurück“-Schaltfläche beibehalten und der Bildschirm hat jetzt einen Titel.
Fügen Sie Kinder zum Profilbildschirm hinzu
Das ProfileScreen-Widget verfügt außerdem über ein optionales Argument namens „Children“. Dieses Argument akzeptiert eine Liste von Widgets, und diese Widgets werden vertikal innerhalb eines Spalten-Widgets platziert, das bereits intern zum Erstellen des ProfileScreen verwendet wird. Dieses Spalten-Widget in der ProfileScreen-Build-Methode platziert die untergeordneten Elemente, die Sie ihm übergeben, über der Schaltfläche „Abmelden“.
Aktualisieren Sie den Code in home.dart, um hier das Firmenlogo anzuzeigen, ähnlich 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(),
],
),
),
);
}
}
Laden Sie Ihre App neu und Sie sehen Folgendes auf dem Bildschirm:
7. Multiplattform-Google-Auth-Anmeldung
Die FlutterFire-Benutzeroberfläche bietet außerdem Widgets und Funktionen für die Authentifizierung bei Drittanbietern wie Google, Twitter, Facebook, Apple und Github.
Um die Google-Authentifizierung zu integrieren, installieren Sie das offizielle Plugin firebase_ui_oauth_google und seine Abhängigkeiten, die den nativen Authentifizierungsfluss verwalten. Navigieren 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
Aktivieren Sie den Google-Anmeldeanbieter
Als nächstes aktivieren Sie den Google-Anbieter in der Firebase Console :
- Navigieren Sie in der Konsole zum Bildschirm „Authentifizierungs-Anmeldeanbieter“ .
- Klicken Sie auf „Neuen Anbieter hinzufügen“.
- Wählen Sie „Google“.
- Schalten Sie den Schalter mit der Bezeichnung „Aktivieren“ um und klicken Sie auf „Speichern“.
- Wenn ein Modal mit Informationen zum Herunterladen von Konfigurationsdateien angezeigt wird, klicken Sie auf „Fertig“.
- Bestätigen Sie, dass der Google-Anmeldeanbieter hinzugefügt wurde.
Fügen Sie die Google-Anmeldeschaltfläche hinzu
Wenn die Google-Anmeldung aktiviert ist, fügen Sie das Widget hinzu, das zur Anzeige einer stilisierten Google-Anmeldeschaltfläche auf der Anmeldeseite erforderlich ist. 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 das Hinzufügen von GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") zur SignInScreen-Widget-Konfiguration.
Wenn dies hinzugefügt wurde, laden Sie Ihre App neu und Sie sehen eine Google-Anmeldeschaltfläche.
Anmeldeschaltfläche konfigurieren
Ohne zusätzliche Konfiguration funktioniert die Schaltfläche nicht. Wenn Sie mit Flutter Web entwickeln, ist dies der einzige Schritt, den Sie hinzufügen müssen, damit dies funktioniert. Andere Plattformen erfordern zusätzliche Schritte, die gleich besprochen werden.
- Navigieren Sie zur Seite „Authentifizierungsanbieter“ in der Firebase-Konsole .
- Klicken Sie auf den Google-Anbieter.
- Klicken Sie auf das Erweiterungsfeld „Web SDK-Konfiguration“.
- Kopieren Sie den Wert aus „Web-Client-ID“.
- Kehren Sie zu Ihrem Texteditor zurück und aktualisieren Sie die Instanz von
GoogleProviderin der Dateiauth_gate.dart, indem Sie diese ID an den benannten ParameterclientIdübergeben.
GoogleProvider(
clientId: "YOUR_WEBCLIENT_ID"
)
Sobald die Web-Client-ID eingegeben wurde, laden Sie Ihre App neu. Wenn Sie auf die Schaltfläche „Mit Google anmelden“ klicken, wird ein neues Fenster angezeigt (wenn Sie das Internet verwenden), das Sie durch den Google-Anmeldevorgang führt. Zunächst sieht es so aus:
Konfigurieren Sie iOS
Damit dies unter iOS funktioniert, ist ein zusätzlicher Konfigurationsprozess erforderlich.
- Navigieren Sie zum Bildschirm „Projekteinstellungen“ in der Firebase-Konsole . Es wird eine Karte angezeigt, die Ihre Firebase-Apps auflistet und etwa so aussieht:
- Klicken Sie auf iOS. Beachten Sie, dass sich Ihr Anwendungsname von meinem unterscheidet. Wo bei mir „abgeschlossen“ steht, steht bei Ihnen „Start“, wenn Sie das Projekt
flutter-codelabs/firebase-auth-flutterfire-ui/startverwendet haben, um diesem Codelab zu folgen. - Klicken Sie auf die Schaltfläche „GoogleServices-Info.plist“, um die benötigte Konfigurationsdatei herunterzuladen.
- Ziehen Sie die heruntergeladene Datei per Drag & Drop in das Verzeichnis namens .
/ios/Runnerin Ihrem Flutter-Projekt. - Öffnen Sie Xcode, indem Sie den folgenden Terminalbefehl im Stammverzeichnis Ihres Projekts ausführen:
Öffnen Sie ios/Runner.xcworkspace
- Klicken Sie mit der rechten Maustaste auf das Runner-Verzeichnis und wählen Sie Dateien zu „Runner“ hinzufügen.
- Wählen Sie im Dateimanager GoogleService-Info.plist aus.
- Fügen Sie in Ihrem Texteditor (der nicht Xcode ist) die CFBundleURLTypes-Attribute unten 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 -->
Wenn Ihre Flutter-App bereits unter iOS läuft, müssen Sie sie vollständig herunterfahren und die Anwendung dann erneut ausführen. Andernfalls führen Sie die App unter iOS aus.
8. Herzlichen Glückwunsch!
Sie haben die Firebase Auth-Benutzeroberfläche für das Flutter-Codelab fertiggestellt. Den fertigen Code für dieses Codelab finden Sie im Verzeichnis „complete“ auf Github: Flutter Codelabs
Was wir abgedeckt haben
- Einrichten einer Flutter-App zur Verwendung von Firebase
- Einrichten eines Firebase-Projekts in der Firebase-Konsole
- FlutterFire-CLI
- Firebase-CLI
- Verwenden der Firebase-Authentifizierung
- Verwenden Sie die FlutterFire-Benutzeroberfläche, um die Firebase-Authentifizierung in Ihrer Flutter-App einfach zu verwalten
Nächste Schritte
- Erfahren Sie mehr über die Verwendung von Firestore und Authentifizierung in Flutter: Lernen Sie Firebase für Flutter Codelab kennen
- Entdecken Sie andere Firebase-Tools zum Erstellen Ihrer Flutter-Anwendung:
- Cloud-Speicher
- Cloud-Funktionen
- Echtzeitdatenbank
Erfahren Sie mehr
- Firebase-Website: firebase.google.com
- Flutter-Site: flutter.dev
- FlutterFire Firebase Flutter-Widgets: firebase.flutter.dev
- Firebase-YouTube-Kanal
- Flutter YouTube-Kanal
Sparky ist hier, um mit Ihnen zu feiern!
