Dodawanie procesu uwierzytelniania użytkowników do aplikacji Flutter za pomocą FirebaseUI

1. Zanim zaczniesz

Z tego ćwiczenia w programie dowiesz się, jak dodać Uwierzytelnianie Firebase do aplikacji Flutter za pomocą pakietu interfejsu FlutterFire. Dzięki temu pakietowi możesz dodać do aplikacji Flutter uwierzytelnianie za pomocą adresu e-mail i hasła oraz logowanie Google. Dowiesz się też, jak skonfigurować projekt Firebase i użyć wiersza poleceń FlutterFire do zainicjowania Firebase w aplikacji Flutter.

Wymagania wstępne

W tym ćwiczeniu w Codelabs zakładamy, że masz już doświadczenie z platformą Flutter. Jeśli nie, warto najpierw zapoznać się z podstawami. Przydatne będą te linki:

Znasz też podstawy Firebase, ale nie musisz dodawać Firebase do projektu Flutter. Jeśli nie znasz jeszcze konsoli Firebase lub dopiero zaczynasz korzystać z Firebase, zapoznaj się najpierw z tymi linkami:

Co utworzysz

Ten projekt poprowadzi Cię przez proces tworzenia przepływu uwierzytelniania w aplikacji Flutter przy użyciu Firebase do uwierzytelniania. W aplikacji będą się znajdować ekrany logowania, „Zarejestruj się” i ekranu odzyskiwania hasła oraz ekranu profilu użytkownika.

6604fc9157f2c6ae.png eab9509a41074930.png da49189a5838e0bb.png b2ccfb3632b77878.png

Czego się nauczysz

W tym ćwiczeniu omawiamy:

  • Dodawanie Firebase do aplikacji Flutter
  • Konfiguracja konsoli Firebase
  • Dodawanie Firebase do aplikacji za pomocą wiersza poleceń Firebase
  • Korzystanie z interfejsu wiersza poleceń FlutterFire do generowania konfiguracji Firebase w Dart
  • Dodawanie Uwierzytelniania Firebase do aplikacji Flutter
  • Konfigurowanie uwierzytelniania Firebase w konsoli
  • Dodawanie logowania za pomocą adresu e-mail i hasła w pakiecie firebase_ui_auth
  • Dodaję rejestrację użytkownika z pakietem firebase_ui_auth
  • Dodawanie strony „Nie pamiętasz hasła?”
  • Dodawanie logowania przez Google za pomocą firebase_ui_auth
  • Skonfigurowanie aplikacji pod kątem współpracy z dostawcami wielokrotnego logowania.
  • Dodawanie ekranu profilu użytkownika do aplikacji za pomocą pakietu firebase_ui_auth

To ćwiczenie w Codelabs odnosi się przede wszystkim do dodawania niezawodnego systemu uwierzytelniania za pomocą pakietu firebase_ui_auth. Jak widać, całą aplikację, wraz ze wszystkimi wymienionymi wyżej funkcjami, można wdrożyć za pomocą około 100 wierszy kodu.

Czego potrzebujesz

  • praktyczna wiedza na temat Flutter i zainstalowanego pakietu SDK;
  • edytor tekstu (Flutter obsługuje środowiska JetBrains IDE, Android Studio i VS Code);
  • przeglądarka Google Chrome lub inny preferowany środowisko programistyczne dla Fluttera. (Niektóre polecenia terminala w tym ćwiczeniu z programowania zakładają, że Twoja aplikacja jest uruchomiona w Chrome).

2. Tworzenie i konfigurowanie projektu Firebase

Najpierw musisz utworzyć projekt Firebase w konsoli internetowej Firebase.

Tworzenie projektu Firebase

  1. Zaloguj się w Firebase.
  2. W konsoli Firebase kliknij Dodaj projekt (lub Utwórz projekt) i wpisz nazwę projektu Firebase (np. „FlutterFire-UI-Codelab”).

df42a5e3d9584b48.png

  1. Przejrzyj opcje tworzenia projektu. Zaakceptuj warunki korzystania z Firebase, jeśli pojawi się taka prośba. Pomiń konfigurację Google Analytics, ponieważ nie będziesz korzystać z Analytics w tej aplikacji.

d1fcec48bf251eaa.png

Więcej informacji o projektach Firebase znajdziesz w artykule Informacje o projektach Firebase.

Włączanie logowania za pomocą adresu e-mail w usłudze Uwierzytelnianie Firebase

Aplikacja, którą tworzysz, korzysta z usługi Uwierzytelnianie Firebase, aby umożliwić użytkownikom logowanie się w niej. Umożliwia też nowym użytkownikom rejestrację w aplikacji Flutter.

Uwierzytelnianie Firebase musi zostać włączone w konsoli Firebase i wymaga specjalnej konfiguracji po włączeniu.

Aby umożliwić użytkownikom logowanie się w aplikacji internetowej, najpierw użyj metody logowania E-mail/hasło. Później dodasz metodę Logowanie przez Google.

  1. W konsoli Firebase w panelu po lewej stronie rozwiń menu Kompilacja.
  2. Kliknij Authentication (Uwierzytelnianie), a następnie kliknij przycisk Get Started (Rozpocznij) i kartę Sign-inMethod (Metoda logowania) (lub kliknij tutaj, aby przejść bezpośrednio do karty Metoda logowania).
  3. Na liście Sign-in Providers (Dostawcy logowania) kliknij E-mail/hasło, ustaw przełącznik Włącz w pozycji włączenia, a potem kliknij Zapisz. 58e3e3e23c2f16a4.png

3. Konfigurowanie aplikacji Flutter

Zanim zaczniesz, pobierz kod startowy i zainstaluj wiersz poleceń Firebase.

Pobieranie kodu startowego

Sklonuj repozytorium GitHub z poziomu wiersza poleceń:

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

Jeśli masz zainstalowane narzędzie wiersza poleceń GitHub:

gh repo clone flutter/codelabs flutter-codelabs

Przykładowy kod należy sklonować do katalogu flutter-codelabs na komputerze, który zawiera kod kolekcji Codelabs. Kod do tego ćwiczenia w Codelabs znajduje się w podkatalogu flutter-codelabs/firebase-auth-flutterfire-ui.

Katalog flutter-codelabs/firebase-auth-flutterfire-ui zawiera 2 projekty Flutter. Jedna ma nazwę complete, a druga start. Katalog start zawiera niekompletny projekt, na którym spędzisz najwięcej czasu.

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

Jeśli chcesz przejść do następnego zadania lub sprawdzić, jak powinno wyglądać zadanie po jego ukończeniu, zajrzyj do katalogu o nazwie complete.

Jeśli chcesz wykonać ćwiczenia z programowania i samodzielnie dodać kod, zacznij od aplikacji Flutter na stronie flutter-codelabs/firebase-auth-flutterfire-ui/start i dodaj kod do tego projektu w ramach tych ćwiczeń. Otwórz lub zaimportuj ten katalog do preferowanego IDE.

Zainstaluj wiersz poleceń Firebase

Wiersz poleceń Firebase zawiera narzędzia do zarządzania projektami Firebase. Interfejs wiersza poleceń jest wymagany do interfejsu wiersza poleceń FlutterFire, który zainstalujesz za chwilę.

Interfejs wiersza poleceń można zainstalować na różne sposoby. Jeśli używasz systemu macOS lub Linux, najprostszym sposobem jest uruchomienie tego polecenia z terminala:

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

Po zainstalowaniu interfejsu wiersza poleceń musisz uwierzytelnić się w Firebase.

  1. Zaloguj się do Firebase, korzystając ze swojego konta Google, uruchamiając następujące polecenie:
firebase login
  1. To polecenie łączy Twój komputer lokalny z Firebase i daje Ci dostęp do projektów Firebase.
  1. Sprawdź, czy interfejs wiersza poleceń jest prawidłowo zainstalowany i ma dostęp do Twojego konta, wyświetlając listę projektów Firebase. Uruchom to polecenie:
firebase projects:list
  1. Wyświetlona lista powinna być taka sama jak projekty Firebase wymienione w konsoli Firebase. Powinno być co najmniej flutterfire-ui-codelab..

Instalowanie interfejsu wiersza poleceń FlutterFire

Interfejs wiersza poleceń FlutterFire to narzędzie, które ułatwia instalację Firebase na wszystkich obsługiwanych platformach w aplikacji Flutter. Jest ono oparte na interfejsie wiersza poleceń Firebase.

Najpierw zainstaluj interfejs wiersza poleceń:

dart pub global activate flutterfire_cli

Sprawdź, czy interfejs wiersza poleceń został zainstalowany. Uruchom to polecenie i upewnij się, że interfejs wiersza poleceń generuje menu pomocy.

flutterfire -—help

Dodawanie projektu Firebase do aplikacji Flutter

Konfigurowanie FlutterFire

Za pomocą FlutterFire możesz wygenerować kod Dart potrzebny do korzystania z Firebase w aplikacji Flutter.

flutterfire configure

Gdy to polecenie zostanie wykonane, pojawi się prośba o wybranie projektu Firebase, którego chcesz użyć, i platform, które chcesz skonfigurować.

Na poniższych zrzutach ekranu znajdziesz instrukcje, na które musisz odpowiedzieć.

  1. Wybierz projekt, którego chcesz użyć. W tym przypadku należy użyć funkcji flutterfire-ui-codelab 1359cdeb83204baa.png
  2. Wybierz platformy, z których chcesz korzystać. Dzięki temu ćwiczeniu w programowaniu dowiesz się, jak skonfigurować uwierzytelnianie Firebase w przeglądarce oraz na urządzeniach z iOS i Androidem, ale możesz też skonfigurować projekt Firebase tak, aby używać wszystkich opcji. 301c9534f594f472.png
  3. Zrzut ekranu z danymi wyjściowymi po zakończeniu procesu. Jeśli znasz już Firebase, z pewnością zauważysz, że nie musisz tworzyć aplikacji platformy (na przykład aplikacji na Androida) w konsoli. Udało Ci się to zrobić za pomocą interfejsu wiersza poleceń FlutterFire. 12199a85ade30459.png

Gdy skończysz, otwórz aplikację Flutter w edytorze tekstu. Interfejs wiersza poleceń FlutterFire wygenerował nowy plik o nazwie firebase_options.dart. Plik ten zawiera klasę o nazwie FirebaseOptions, która zawiera zmienne statyczne zawierające konfigurację Firebase potrzebną na każdej platformie. Jeśli podczas wykonywania testu flutterfire configure wybrano wszystkie platformy, zobaczysz wartości statyczne o nazwach web, android, ios i 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',
 );
}

W Firebase słowo „aplikacja” odnosi się do konkretnej kompilacji dla konkretnej platformy w projekcie Firebase. Na przykład projekt Firebase o nazwie FlutterFire-ui-codelab ma kilka aplikacji: jedną na Androida, jedną na iOS, jedną dla systemu macOS i jedną dla witryny.

Metoda DefaultFirebaseOptions.currentPlatform używa enumeracji TargetPlatform udostępnionej przez Fluttera, aby wykryć platformę, na której działa aplikacja, a następnie zwraca wartości konfiguracji Firebase potrzebne do prawidłowego zastosowania Firebase.

Dodawanie pakietów Firebase do aplikacji Flutter

Ostatnim krokiem konfiguracji jest dodanie odpowiednich pakietów Firebase do projektu Flutter. Plik firebase_options.dart powinien zawierać błędy, ponieważ korzysta z pakietów Firebase, które nie zostały jeszcze dodane. W terminalu sprawdź, czy znajdujesz się w katalogu głównym projektu Flutter (flutter-codelabs/firebase-emulator-suite/start). Następnie uruchom te 3 polecenia:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

To jedyne pakiety, których na razie potrzebujesz.

Inicjowanie Firebase

Aby używać dodanych pakietów i funkcji DefaultFirebaseOptions.currentPlatform,, zaktualizuj kod w funkcji main w pliku main.dart.

main.dart

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


 runApp(const MyApp());
}

Ten kod ma 2 czynności.

  1. WidgetsFlutterBinding.ensureInitialized() informuje Fluttera, aby nie uruchamiał kodu widżetu aplikacji, dopóki nie uruchomi się cały framework Fluttera. Firebase używa kanałów platformy natywnej, które wymagają uruchomienia platformy.
  2. Firebase.initializeApp łączy aplikację Flutter z projektem Firebase. Plik DefaultFirebaseOptions.currentPlatform jest importowany z wygenerowanego pliku firebase_options.dart. Ta wartość statyczna wykrywa platformę, na której korzystasz z aplikacji, i przekazuje odpowiednie klucze Firebase.

4. Dodaj początkową stronę uwierzytelniania interfejsu Firebase

Interfejs Firebase dla usługi Uwierzytelnianie zawiera widżety, które reprezentują całe ekrany w aplikacji. Te ekrany obsługują różne przepływy uwierzytelniania w aplikacji, np. logowanie, rejestrację, hasło do odzyskiwania hasła czy profil użytkownika. Na początek dodaj do aplikacji stronę docelową, która będzie działać jako zabezpieczenie uwierzytelniania w głównej aplikacji.

Material lub aplikacja Cupertino

Interfejs FlutterFire wymaga, aby aplikacja była otoczona obiektami MaterialApp lub CupertinoApp. W zależności od Twojego wyboru interfejs automatycznie odzwierciedla różnice między widżetami Material Design i Cupertino. W tym ćwiczeniu w Codelabs użyj narzędzia MaterialApp, które zostało już dodane do aplikacji w app.dart.

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

Sprawdzanie stanu uwierzytelniania

Zanim będzie można wyświetlić ekran logowania, musisz określić, czy użytkownik jest obecnie uwierzytelniony. Najczęstszym sposobem, aby to sprawdzić, jest odsłuchiwanie parametru authStateChanges parametru FirebaseAuth.

W powyższym przykładowym kodzie MaterialApp tworzy w swojej metodzie kompilacji widżet AuthGate. (to widżet niestandardowy, który nie jest dostarczany przez interfejs użytkownika FlutterFire).

Musisz zaktualizować ten widżet, aby zawierał strumień authStateChanges.

Interfejs API authStateChanges zwraca Stream z bieżącym użytkownikiem (jeśli jest zalogowany) lub null, jeśli tak nie jest. Aby subskrybować ten stan w naszej aplikacji, możesz użyć widżetu StreamBuilder w Flutterze i przekazać do niego strumień.

StreamBuilder to widżet, który sam się tworzy na podstawie najnowszego zrzutu danych ze strumienia, który mu przekazujesz. Jest ona automatycznie odtwarzana, gdy strumień wyemituje nowy zrzut.

Zaktualizuj kod w 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();
      },
    );
  }
}
  • Funkcja StreamBuilder.stream jest przekazywana do FirebaseAuth.instance.authStateChanged, wspomnianego wcześniej strumienia, który zwróci obiekt User Firebase, jeśli użytkownik się uwierzytelni. (W przeciwnym razie zwróci wartość null).
  • Następnie kod używa parametru snapshot.hasData, aby sprawdzić, czy wartość ze strumienia zawiera obiekt User.
  • Jeśli nie ma żadnych, zwróci widżet SignInScreen. Obecnie ten ekran nie robi nic. Zaktualizujemy to w kolejnym kroku.
  • W przeciwnym razie zwraca HomeScreen, czyli główną część aplikacji, do której dostęp mają tylko uwierzytelnieni użytkownicy.

SignInScreen to widżet pochodzący z pakietu interfejsu użytkownika FlutterFire. Na tym skupimy się w następnym kroku tego samouczka. Gdy uruchomisz aplikację, powinien pojawić się pusty ekran logowania.

5. Ekran logowania

Widżet SignInScreen udostępniany przez interfejs FlutterFire dodaje te funkcje:

  • Pozwala użytkownikom na logowanie się
  • Jeśli użytkownik zapomni hasło, może kliknąć „Nie pamiętam hasła?”, aby przejść do formularza resetowania hasła.
  • Jeśli użytkownik nie jest jeszcze zarejestrowany, może kliknąć „Zarejestruj się” i zostanie przekierowany do innego formularza, który pozwoli mu się zarejestrować.

Jak już wspomnieliśmy, wymaga to tylko kilku linii kodu. Wywołaj kod w widżecie AuthGate:

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

Widżet SignInScreen i jego argument providers to jedyny kod wymagany do korzystania ze wszystkich wymienionych wcześniej funkcji. Powinien wyświetlić się ekran logowania z polami tekstowymi „E-mail” i „Hasło” oraz przyciskiem „Zaloguj się”.

Jest funkcjonalny, ale nie ma żadnego stylu. Widget udostępnia parametry, które umożliwiają dostosowanie wyglądu ekranu logowania. Możesz na przykład dodać logo swojej firmy.

Dostosowywanie ekranu logowania

headerBuilder

Za pomocą argumentu SignInScreen.headerBuilder możesz dodać dowolne widżety nad formularzem logowania. Ten widżet jest wyświetlany tylko na wąskich ekranach, np. na urządzeniach mobilnych. Na szerokich ekranach możesz używać narzędzia SignInScreen.sideBuilder, które zostało omówione w dalszej części tego ćwiczenia z programowania.

Zaktualizuj plik auth_gate.dart za pomocą tego kodu:

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

Argument headerBuilder wymaga funkcji typu HeaderBuilder, który jest zdefiniowany w pakiecie interfejsu FlutterFire.

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

Jest to wywołanie zwrotne, więc ujawnia wartości, których możesz użyć, takie jak BuildContext i BoxConstraints, oraz wymaga zwrócenia widżetu. Wyświetlany widżet będzie widoczny u góry ekranu. W tym przykładzie nowy kod dodaje obraz na górze ekranu. Twoja aplikacja powinna teraz wyglądać tak.

73d7548d91bbd2ab.png

Kreator napisów

Na ekranie logowania widoczne są 3 dodatkowe parametry, które pozwalają dostosować ekran: subtitleBuilder, footerBuilder i sideBuilder.

subtitleBuilder różni się nieco tym, że argumenty wywołania zwrotnego zawierają działanie typu AuthAction. AuthAction to wyliczenie, którego możesz użyć do określenia, czy ekran, z którego korzysta użytkownik, to ekran logowania czy rejestracji.

Zaktualizuj kod w pliku auth_gate.dart, aby użyć narzędzia CaptionBuilder.

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

Załaduj ponownie aplikację. Powinno to wyglądać tak

Argument footerBuilder jest taki sam jak CaptionBuilder. Nie ujawnia ona wartości BoxConstraints ani shrinkOffset, ponieważ jest przeznaczona do tekstu, a nie obrazów. (Możesz jednak dodać dowolny widżet).

Dodaj stopkę do ekranu logowania za pomocą tego kodu.

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

Kreator boczny

Argument SignInScreen.sidebuilder akceptuje wywołanie zwrotne, a tym razem argumentami tego wywołania są BuildContext i double shrinkOffset. Widżet zwracany przez sideBuilder będzie wyświetlany po lewej stronie formularza logowania i tylko na ekranach panoramicznych. Oznacza to, że widżet będzie wyświetlany tylko w aplikacjach internetowych i na komputerach.

Wewnętrznie interfejs FlutterFire używa punktu przełamania, aby określić, czy ma być wyświetlana zawartość nagłówka (na wysokich ekranach, np. na urządzeniach mobilnych) czy zawartość boczna (na szerokich ekranach, na komputerach lub w przeglądarce). W szczególności jeśli ekran ma więcej niż 800 pikseli, wyświetlana jest zawartość narzędzia bocznego, a treści nagłówka – nie. Jeśli ekran ma mniej niż 800 pikseli, jest odwrotnie.

Zaktualizuj kod w pliku auth_gate.dart, aby dodać widżety sideBuilder.

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

Po rozwinięciu okna aplikacja powinna wyglądać tak (jeśli używasz Fluttera w wersji internetowej lub na macOS).

8dc60b4e5d7dd2d0.png

Tworzenie konta użytkownika

Na tym etapie cały kod tego ekranu jest gotowy. Zanim się zalogujesz, musisz utworzyć użytkownika. Możesz to zrobić na ekranie „Zarejestruj się” lub utworzyć użytkownika w konsoli Firebase.

Aby korzystać z konsoli:

  1. Otwórz tabelę „Użytkownicy” w konsoli Firebase.
  2. Kliknij tutaj
  3. Wybierz „flutterfire-ui-codelab” (lub inny projekt, jeśli używasz innej nazwy). Zobaczysz tę tabelę:

f038fd9a58ed60d9.png

  1. Kliknij przycisk „Dodaj użytkownika”.

2d78390d4c5dbbfa.png

  1. Wpisz adres e-mail i hasło nowego użytkownika. Może to być fałszywy adres e-mail i fałszywe hasło, jak widać na obrazku poniżej. To zadziała, ale funkcja „Nie pamiętam hasła” nie zadziała w przypadku użycia fałszywego adresu e-mail.

62ba0feb33d54add.png

  1. Kliknij „Dodaj użytkownika”.

32b236b3ef94d4c7.png

Możesz teraz wrócić do aplikacji Flutter i zalogować użytkownika na stronie logowania. Twoja aplikacja powinna wyglądać tak:

dd43d260537f3b1a.png

6. Ekran profilu

Interfejs FlutterFire udostępnia też widżet ProfileScreen, który zapewnia wiele funkcji w kilku linijkach kodu.

Dodaj widżet ProfileScreen

W edytorze tekstu przejdź do pliku home.dart. Zaktualizuj go tym kodem:

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

Nowy kod notatki to wywołanie zwrotne przekazywane do funkcji IconButton.isPressed method.. Po naciśnięciu tego przycisku IconButton aplikacja tworzy nową anonimową trasę i nawiguje do niej. Ta ścieżka wyświetli widżet ProfileScreen, który jest zwracany z trybu MaterialPageRoute.builder.

Ponownie uruchom aplikację i kliknij ikonę w prawym górnym rogu (na pasku aplikacji). Pojawi się strona:

36487fc4ab4f26a7.png

Jest to standardowy interfejs użytkownika udostępniany przez stronę interfejsu FlutterFire. Wszystkie przyciski i pola tekstowe są połączone z usługą Uwierzytelnianie Firebase i działają od razu po zainstalowaniu. Możesz na przykład wpisać nazwę w polu tekstowym „Nazwa”, a interfejs FlutterFire wywoła metodę FirebaseAuth.instance.currentUser?.updateDisplayName, która zapisze tę nazwę w Firebase.

Wylogowywanie

Obecnie jeśli klikniesz przycisk „Wyloguj się”, aplikacja się nie zmieni. Spowoduje to wylogowanie, ale nie wrócisz do widżetu AuthGate. Aby to zaimplementować, użyj parametru ProfileScreen.actions.

Najpierw zaktualizuj kod w pliku 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(),
          ],
        ),
      ),
    );
  }
}

Teraz podczas tworzenia instancji instancji ProfileScreen przekazujesz ją również listę działań do argumentu ProfileScreen.actions. Te działania są typu FlutterFireUiAction. Istnieje wiele różnych klas, które są podtypami klasy FlutterFireUiAction. Zazwyczaj służą one do określania sposobu reakcji aplikacji na różne zmiany stanu uwierzytelniania. Funkcja SignedOutAction wywołuje funkcję wywołania zwrotnego, którą jej przekazujesz, gdy stan uwierzytelniania Firebase zmienia się na null dla bieżącego użytkownika.

Dodanie wywołania zwrotnego, które wywołuje funkcję Navigator.of(context).pop(), gdy zostanie wywołana akcja SignedOutAction, spowoduje przejście aplikacji do poprzedniej strony. W tej przykładowej aplikacji jest tylko jedna stała ścieżka, która wyświetla stronę logowania, jeśli użytkownik nie jest zalogowany, i stronę główną, jeśli jest zalogowany. Ponieważ dzieje się to, gdy użytkownik się wyloguje, aplikacja wyświetli stronę logowania.

Dostosowywanie strony profilu

Podobnie jak strona logowania, strona profilu umożliwia dostosowywanie. Po pierwsze, na naszej obecnej stronie nie ma możliwości powrotu na stronę główną, gdy użytkownik znajdzie się na stronie profilu. Napraw to, dodając do widżetu ProfileScreen pasek aplikacji.

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

Argument ProfileScreen.appBar przyjmuje widżet AppBar z pakietu Flutter Material, więc można go traktować jak dowolny inny widżet AppBar, który został utworzony i przekazany do Scaffold. W tym przykładzie zachowaliśmy domyślną funkcję automatycznego dodawania przycisku „Wstecz”, a ekran ma teraz tytuł.

Dodawanie dzieci do ekranu profilu

Widżet ProfileScreen ma też opcjonalny argument o nazwie podrzędne. Ten argument akceptuje listę widżetów, które zostaną umieszczone pionowo wewnątrz widżetu Kolumna, który jest już używany wewnętrznie do utworzenia elementu ProfileScreen. Ten widżet kolumny w metodzie tworzenia ProfileScreen umieści przekazane przez Ciebie elementy nad przyciskiem „Wyloguj”.

Zaktualizuj kod w domenie home.dart, aby wyświetlać tu logo firmy, podobnie jak na ekranie logowania.

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

Załaduj ponownie aplikację. Na ekranie zobaczysz to:

Ebe5792b765dbf87.png

7. Logowanie w trybie wieloplatformowym Google Auth

Interfejs FlutterFire zawiera też widżety i funkcje uwierzytelniania w zewnętrznych usługach, takich jak Google, Twitter, Facebook, Apple i GitHub.

Aby zintegrować się z uwierzytelnianiem Google, zainstaluj oficjalny firebase_ui_oauth_google i jego zależności, które będą obsługiwać proces uwierzytelniania natywnych. W terminalu przejdź do katalogu głównego projektu Flutter i wpisz to polecenie:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

Włącz dostawcę logowania Google

Następnie włącz dostawcę Google w konsoli Firebase:

  1. W konsoli otwórz ekran Dostawcy logowania z uwierzytelnianiem.
  2. Kliknij „Dodaj nowego dostawcę”. 8286fb28be94bf30.png
  3. Wybierz „Google”.c4e28e6f4974be7f.png
  4. Przesuń przełącznik „Włącz” i kliknij „Zapisz”. e74ff86990763826.png
  5. Jeśli pojawi się okno z informacjami o pobieraniu plików konfiguracyjnych, kliknij „Gotowe”.
  6. Potwierdź, że dostawca logowania przez Google został dodany. 5329ce0543c90d95.png

Dodawanie przycisku logowania przez Google

Po włączeniu logowania na konto Google dodaj na stronie logowania widżet, który umożliwia wyświetlanie stylizowanego przycisku logowania na konto Google. Otwórz plik auth_gate.dart i zaktualizuj kod, jak pokazano poniżej:

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

Jedynym nowym kodem jest GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") dodany do konfiguracji widżetu SignInScreen.

Po dodaniu tego elementu ponownie załaduj aplikację. Zobaczysz przycisk logowania w Google.

aca71a46a011bfb5.png

Konfigurowanie przycisku logowania

Przycisk nie działa bez dodatkowej konfiguracji. Jeśli tworzysz aplikację za pomocą Flutter Web, to jest jedyny krok, który musisz wykonać, aby to działało. Inne platformy wymagają wykonania dodatkowych czynności, które omówimy za chwilę.

  1. W konsoli Firebase otwórz stronę Dostawcy uwierzytelniania.
  2. Kliknij dostawcę Google. 9b3a325c5eca6e49.png
  3. Kliknij panel „Konfiguracja SDK dla klienta internetowego”.
  4. Skopiuj wartość z pola „Identyfikator klienta internetowego” 711a79f0d931c60f.png
  5. Wróć do edytora tekstu i zaktualizuj wystąpienie GoogleProvider w pliku auth_gate.dart, przekazując ten identyfikator do nazwanego parametru clientId.
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

Po wpisaniu identyfikatora klienta internetowego ponownie załaduj aplikację. Gdy naciśniesz przycisk „Zaloguj się przez Google”, pojawi się nowe okno (jeśli korzystasz z wersji internetowej), które przeprowadzi Cię przez proces logowania w Google. Na początku wygląda to tak:

14e73e3c9de704bb.png

Skonfiguruj iOS

Aby funkcja działała na iOS, musisz wykonać dodatkowy proces konfiguracji.

  1. Przejdź do ekranu Ustawienia projektu w konsoli Firebase. Pojawi się karta z listą Twoich aplikacji Firebase. Będzie ona wyglądała tak: fefa674acbf213cc.png
  2. Kliknij iOS. Pamiętaj, że nazwa Twojej aplikacji będzie inna niż moja. Jeśli podczas wykonywania tego ćwiczenia korzystasz z projektu flutter-codelabs/firebase-auth-flutterfire-ui/start, w miejscu „complete” (ukończono) u Ciebie będzie widoczne „start” (rozpoczęto).
  3. Kliknij przycisk „GoogleServices-Info.plist”, aby pobrać potrzebny plik konfiguracji. f89b3192871dfbe3.png
  4. Przeciągnij pobrany plik i upuść go w katalogu o nazwie ./ios/Runner w Twoim projekcie Flutter.
  5. Otwórz Xcode, uruchamiając to polecenie terminala w katalogu głównym projektu: open ios/Runner.xcworkspace
  6. Kliknij prawym przyciskiem folder Runner i wybierz Dodaj pliki do „Runner”.858986063a4c5201.png
  7. Wybierz GoogleService-Info.plist z menedżera plików.
  8. W edytorze tekstu (nie Xcode) dodaj atrybuty CFBundleURLTypes podane poniżej do pliku [my_project]/ios/Runner/Info.plist.
<!-- 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 -->
  1. Musisz zastąpić wartość GoogleProvider.clientId dodaną w konfiguracji internetowej identyfikatorem klienta powiązanym z identyfikatorem klienta Firebase na iOS. Najpierw możesz znaleźć ten identyfikator w pliku firebase_options.dart jako część stałej iOS. Skopiuj wartość przekazaną do funkcji iOSClientId.
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',
);
  1. Wklej tę wartość do argumentu GoogleProvider.clientId w widżecie AuthGate.
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();
     },
   );
 }
}

Jeśli Twoja aplikacja Flutter działa już na iOS, musisz ją całkowicie wyłączyć, a potem jeszcze raz uruchomić. W przeciwnym razie uruchom aplikację w systemie iOS.

8. Gratulacje!

Udało Ci się ukończyć ćwiczenie dotyczące interfejsu Firebase Auth dla Fluttera. Ukończony kod ćwiczenia z programowania znajdziesz w katalogu „complete” na GitHubie: Flutter Codelabs.

Omówione zagadnienia

  • Konfigurowanie aplikacji Flutter na potrzeby Firebase
  • Konfigurowanie projektu Firebase w konsoli Firebase
  • FlutterFire CLI
  • wiersz poleceń Firebase
  • Korzystanie z usługi Uwierzytelnianie Firebase
  • Korzystanie z interfejsu FlutterFire do łatwej obsługi uwierzytelniania Firebase w aplikacji Flutter

Następne kroki

Więcej informacji

Sparky jest z Tobą, aby świętować razem z Tobą.

2a0ad195769368b1.gif