Ajouter un flux d'authentification utilisateur à une application Flutter à l'aide de FirebaseUI

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à ajouter Firebase Authentication à votre application Flutter à l'aide du package d'UI FlutterFire. Avec ce package, vous allez ajouter l'authentification par e-mail et mot de passe, ainsi que l'authentification Google Sign-In à une application Flutter. Vous allez également apprendre à configurer un projet Firebase et à utiliser la CLI FlutterFire pour initialiser Firebase dans votre application Flutter.

Prérequis

Cet atelier de programmation suppose que vous avez une certaine expérience de Flutter. Dans le cas contraire, vous devriez d'abord vous familiariser avec ses principes de base. Les liens suivants proposent des informations utiles :

• Suivez une visite guidée du framework de widgets Flutter.
• Essayez l'atelier de programmation Écrire votre première application Flutter, partie 1.

Vous devez également avoir une certaine expérience avec Firebase, mais ce n'est pas grave si vous n'avez jamais ajouté Firebase à un projet Flutter. Si vous ne connaissez pas la console Firebase ou si vous ne savez pas du tout comment utiliser Firebase, consultez d'abord les liens suivants:

• Documentation sur les bases de Firebase
• Atelier de programmation "Découvrez Firebase avec Flutter"

Ce que vous allez créer

Cet atelier de programmation vous explique comment créer le flux d'authentification d'une application Flutter à l'aide de Firebase pour l'authentification. L'application comporte un écran de connexion, un écran "S'inscrire", un écran de récupération de mot de passe et un écran de profil utilisateur.

Points abordés

Cet atelier de programmation couvre les sujets suivants:

• Ajouter Firebase à une application Flutter
• Configuration de la console Firebase
• Ajouter Firebase à votre application à l'aide de la CLI Firebase
• Utiliser la CLI FlutterFire pour générer une configuration Firebase en Dart
• Ajouter Firebase Authentication à votre application Flutter
• Configuration de Firebase Authentication dans la console
• Ajouter la connexion par e-mail et mot de passe avec le package firebase_ui_auth
• Ajouter l'enregistrement des utilisateurs avec le package firebase_ui_auth
• Ajouter une page "Mot de passe oublié ?"
• Ajouter Google Sign-In avec firebase_ui_auth
• Configurer votre application pour qu'elle fonctionne avec plusieurs fournisseurs d'authentification
• Ajouter un écran de profil utilisateur à votre application avec le package firebase_ui_auth

Cet atelier de programmation concerne spécifiquement l'ajout d'un système d'authentification robuste à l'aide du package firebase_ui_auth. Comme vous le verrez, l'ensemble de cette application, avec toutes les fonctionnalités ci-dessus, peut être implémenté avec environ 100 lignes de code.

Prérequis

• Connaissances pratiques de Flutter et du SDK installé
• Un éditeur de texte (Flutter est compatible avec les IDE JetBrains, Android Studio et VS Code)
• Le navigateur Google Chrome ou votre autre cible de développement préférée pour Flutter (Certaines commandes de terminal de cet atelier de programmation supposent que vous exécutez votre application sur Chrome)

2. Créer et configurer un projet Firebase

La première tâche que vous devez accomplir consiste à créer un projet Firebase dans la console Web Firebase.

Créer un projet Firebase

1. Connectez-vous à Firebase.
2. Dans la console Firebase, cliquez sur Ajouter un projet (ou Créer un projet), puis donnez un nom à votre projet Firebase (par exemple, FlutterFire-UI-Codelab).
3. Cliquez sur les options souhaitées. Si vous y êtes invité, acceptez les conditions d'utilisation de Firebase. Passez l'étape de configuration d'Analytics (vous n'en aurez pas besoin pour cette application).

Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase.

Activer la connexion par e-mail pour Firebase Authentication

L'application que vous créez utilise Firebase Authentication pour permettre à vos utilisateurs de se connecter à votre application. Elle permet également aux nouveaux utilisateurs de s'inscrire depuis l'application Flutter.

Firebase Authentication doit être activé via la console Firebase et nécessite une configuration particulière une fois activé.

Pour permettre aux utilisateurs de se connecter à l'application Web, vous allez d'abord utiliser la méthode de connexion Adresse e-mail/Mot de passe. Vous ajouterez ensuite la méthode Connexion Google.

1. Dans la console Firebase, développez le menu Build (Créer) dans le panneau de gauche.
2. Cliquez sur Authentication (Authentification), puis sur le bouton Get started (Commencer), puis sur l'onglet Sign-in method (Méthode de connexion) (ou accédez directement à l'onglet Sign-in method).
3. Cliquez sur Adresse e-mail/Mot de passe dans la liste Fournisseurs de connexion, mettez le bouton bascule Activer en position activée, puis cliquez sur Enregistrer.

3. Configurer l'application Flutter

Avant de commencer, vous devez télécharger le code de démarrage et installer la CLI Firebase.

Télécharger le code de démarrage

Clonez le dépôt GitHub à partir de la ligne de commande:

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

Si vous avez installé l'outil CLI de GitHub:

gh repo clone flutter/codelabs flutter-codelabs

L'exemple de code doit être cloné dans le répertoire flutter-codelabs de votre ordinateur, qui contient le code d'une collection d'ateliers de programmation. Le code de cet atelier de programmation se trouve dans le sous-répertoire flutter-codelabs/firebase-auth-flutterfire-ui.

Le répertoire flutter-codelabs/firebase-auth-flutterfire-ui contient deux projets Flutter. L'une est appelée complete et l'autre start. Le répertoire start contient un projet incomplet, et c'est là que vous passerez le plus de temps.

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

Si vous souhaitez passer à l'étape suivante ou voir à quoi doit ressembler un élément une fois terminé, consultez le répertoire nommé "complete" pour effectuer une comparaison.

Si vous souhaitez suivre l'atelier de programmation et ajouter du code vous-même, commencez par l'application Flutter à l'emplacement flutter-codelabs/firebase-auth-flutterfire-ui/start, puis ajoutez du code à ce projet tout au long de l'atelier. Ouvrez ou importez ce répertoire dans l'IDE de votre choix.

Installer la CLI Firebase

La CLI Firebase fournit des outils pour gérer vos projets Firebase. La CLI est requise pour la CLI FlutterFire, que vous allez installer sous peu.

Il existe plusieurs façons d'installer la CLI. Consultez toutes les options disponibles pour votre système d'exploitation sur firebase.google.com/docs/cli.

Après avoir installé la CLI, vous devez vous authentifier avec Firebase.

1. Connectez-vous à Firebase avec votre compte Google en exécutant la commande suivante:

   firebase login
   

2. Cette commande connecte votre ordinateur local à Firebase et vous permet d'accéder à vos projets Firebase.

   Remarque: La commande firebase login ouvre une page Web qui se connecte à localhost sur votre machine. Si vous utilisez une machine distante et que vous n'avez pas accès à localhost, exécutez la commande avec l'indicateur --no-localhost.

3. Vérifiez que la CLI est correctement installée et qu'elle a accès à votre compte en listant vos projets Firebase. Exécutez la commande suivante :

   firebase projects:list
   

4. La liste affichée doit être identique à celle des projets Firebase listés dans la console Firebase. Vous devriez voir au moins flutterfire-ui-codelab.

Installer la CLI FlutterFire

La CLI FlutterFire est un outil qui facilite l'installation de Firebase sur toutes les plates-formes compatibles de votre application Flutter. Elle est basée sur la CLI Firebase.

Commencez par installer la CLI:

dart pub global activate flutterfire_cli

Assurez-vous que la CLI a été installée. Exécutez la commande suivante et vérifiez que la CLI affiche le menu d'aide.

flutterfire --help

Ajouter votre projet Firebase à votre application Flutter

Configurer FlutterFire

Vous pouvez utiliser FlutterFire pour générer le code Dart nécessaire à l'utilisation de Firebase dans votre application Flutter.

flutterfire configure

Lorsque vous exécutez cette commande, vous êtes invité à sélectionner le projet Firebase que vous souhaitez utiliser et les plates-formes que vous souhaitez configurer.

Les captures d'écran suivantes montrent les requêtes auxquelles vous devrez répondre.

1. Sélectionnez le projet que vous souhaitez utiliser. Dans ce cas, utilisez flutterfire-ui-codelab.
2. Sélectionnez les plates-formes que vous souhaitez utiliser. Dans cet atelier de programmation, vous allez configurer Firebase Authentication pour Flutter pour le Web, iOS et Android. Toutefois, vous pouvez configurer votre projet Firebase pour utiliser toutes les options.
3. Cette capture d'écran montre le résultat à la fin du processus. Si vous connaissez Firebase, vous remarquerez que vous n'avez pas eu à créer d'applications de plate-forme (par exemple, une application Android) dans la console. La CLI FlutterFire s'en est chargée à votre place.

Une fois cette opération terminée, examinez l'application Flutter dans votre éditeur de texte. La CLI FlutterFire a modifié un fichier appelé firebase_options.dart. Ce fichier contient une classe appelée FirebaseOptions, qui comporte des variables statiques qui contiennent la configuration Firebase requise pour chaque plate-forme. Si vous avez sélectionné toutes les plates-formes lorsque vous avez exécuté flutterfire configure, vous verrez des valeurs statiques nommées web, android, ios et macos.

lib/firebase_options.dart

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

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (kIsWeb) {
      return web;
    }

    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        return macos;
      default:
        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',
  );
}

Remarque:Votre fichier doit contenir des valeurs différentes pour les clés API. Vous pouvez exposer ces clés au public sans aucun risque. Découvrez pourquoi dans un post sur StackOverflow.

Firebase utilise le mot "application" pour désigner une compilation spécifique pour une plate-forme spécifique dans un projet Firebase. Par exemple, le projet Firebase appelé FlutterFire-ui-codelab contient plusieurs applications: une pour Android, une pour iOS, une pour macOS et une pour le Web.

La méthode DefaultFirebaseOptions.currentPlatform utilise l'énumération TargetPlatform exposée par Flutter pour détecter la plate-forme sur laquelle votre application s'exécute, puis renvoie les valeurs de configuration Firebase nécessaires pour l'application Firebase appropriée.

Ajouter des packages Firebase à une application Flutter

La dernière étape de configuration consiste à ajouter les packages Firebase pertinents à votre projet Flutter. Le fichier firebase_options.dart doit comporter des erreurs, car il repose sur des packages Firebase qui n'ont pas encore été ajoutés. Dans le terminal, assurez-vous d'être dans la racine du projet Flutter à l'emplacement flutter-codelabs/firebase-emulator-suite/start. Exécutez ensuite les trois commandes suivantes:

flutter pub add firebase_core firebase_auth firebase_ui_auth

Ce sont les seuls packages dont vous avez besoin pour le moment.

Initialiser Firebase

Pour utiliser les packages ajoutés et DefaultFirebaseOptions.currentPlatform,, mettez à jour le code dans la fonction main du fichier main.dart.

lib/main.dart

import 'package:firebase_core/firebase_core.dart';                  // Add this import
import 'package:flutter/material.dart';

import 'app.dart';
import 'firebase_options.dart';                                     // And this import

// TODO(codelab user): Get API key
const clientId = 'YOUR_CLIENT_ID';

void main() async {
  // Add from here...
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  // To here.

  runApp(const MyApp(clientId: clientId));
}

Ce code a deux fonctions.

1. WidgetsFlutterBinding.ensureInitialized() indique à Flutter de ne pas commencer à exécuter le code du widget d'application tant que le framework Flutter n'est pas complètement démarré. Firebase utilise des canaux de plate-forme natifs, qui nécessitent que le framework soit en cours d'exécution.
2. Firebase.initializeApp configure une connexion entre votre application Flutter et votre projet Firebase. Le DefaultFirebaseOptions.currentPlatform est importé à partir de notre fichier firebase_options.dart généré. Cette valeur statique détecte la plate-forme sur laquelle vous exécutez votre application et transmet les clés Firebase correspondantes.

4. Ajouter la page d'authentification de l'UI Firebase initiale

L'UI Firebase pour Auth fournit des widgets qui représentent des écrans entiers de votre application. Ces écrans gèrent différents flux d'authentification dans votre application, tels que la connexion, l'enregistrement, l'oubli de mot de passe, le profil utilisateur, etc. Pour commencer, ajoutez une page de destination à votre application qui sert de pare-feu d'authentification à l'application principale.

Application Material ou Cupertino

L'UI FlutterFire exige que votre application soit encapsulée dans un MaterialApp ou un CupertinoApp. En fonction de votre choix, l'interface utilisateur reflètera automatiquement les différences entre les widgets Material et Cupertino. Pour cet atelier de programmation, utilisez MaterialApp, qui est déjà ajouté à l'application dans app.dart.

lib/app.dart

import 'package:flutter/material.dart';

import 'auth_gate.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.clientId});

  final String clientId;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: AuthGate(clientId: clientId),
    );
  }
}

Vérifier l'état de l'authentification

Avant de pouvoir afficher un écran de connexion, vous devez déterminer si l'utilisateur est authentifié. Le moyen le plus courant de vérifier cela consiste à écouter le authStateChanges de FirebaseAuth à l'aide du plug-in Firebase Authentication.

Dans l'exemple de code ci-dessus, MaterialApp crée un widget AuthGate dans sa méthode build. (Il s'agit d'un widget personnalisé, qui n'est pas fourni par l'UI FlutterFire.)

Ce widget doit être mis à jour pour inclure le flux authStateChanges.

L'API authStateChanges renvoie un Stream avec l'utilisateur actuel (s'il est connecté) ou une valeur nulle s'il ne l'est pas. Pour vous abonner à cet état dans notre application, vous pouvez utiliser le widget StreamBuilder de Flutter et lui transmettre le flux.

StreamBuilder est un widget qui se crée en fonction du dernier instantané des données d'un flux que vous lui transmettez. Il est reconstruit automatiquement lorsque le Stream émet un nouvel instantané.

Mettez à jour le code dans auth_gate.dart.

lib/auth_gate.dart

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

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

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

        return const HomeScreen();
      },
    );                                                                 // To here.
  }
}

• StreamBuilder.stream transmet FirebaseAuth.instance.authStateChanged, le flux mentionné précédemment, qui renvoie un objet User Firebase si l'utilisateur s'est authentifié, sinon il renvoie null.
• Ensuite, le code utilise snapshot.hasData pour vérifier si la valeur du flux contient l'objet User.
• Si ce n'est pas le cas, un widget SignInScreen est renvoyé. Pour l'instant, cet écran ne sert à rien. Il sera mis à jour à l'étape suivante.
• Sinon, il renvoie un HomeScreen, qui est la partie principale de l'application à laquelle seuls les utilisateurs authentifiés peuvent accéder.

SignInScreen est un widget provenant du package d'interface utilisateur FlutterFire. C'est l'objet de l'étape suivante de cet atelier de programmation. À ce stade, lorsque vous exécutez l'application, un écran de connexion vide devrait s'afficher.

5. Écran de connexion

Le widget SignInScreen, fourni par l'UI FlutterFire, ajoute les fonctionnalités suivantes:

• Permet aux utilisateurs de se connecter
• Si les utilisateurs ont oublié leur mot de passe, ils peuvent appuyer sur "Mot de passe oublié ?" et être redirigés vers un formulaire pour le réinitialiser.
• Si un utilisateur n'est pas encore enregistré, il peut appuyer sur "S'inscrire" et être redirigé vers un autre formulaire lui permettant de s'inscrire.

Encore une fois, cela ne nécessite que quelques lignes de code. Rappelez-vous le code du widget AuthGate:

lib/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, required this.clientId});

  final String clientId;

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

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

Le widget SignInScreen et son argument providers sont le seul code requis pour obtenir toutes les fonctionnalités mentionnées ci-dessus. Un écran de connexion s'affiche alors avec des champs de saisie "Adresse e-mail" et "Mot de passe", ainsi qu'un bouton "Se connecter".

Bien que fonctionnel, il manque de style. Le widget expose des paramètres permettant de personnaliser l'apparence de l'écran de connexion. Par exemple, vous pouvez ajouter le logo de votre entreprise.

Personnaliser l'écran de connexion

headerBuilder

À l'aide de l'argument SignInScreen.headerBuilder, vous pouvez ajouter les widgets de votre choix au-dessus du formulaire de connexion. Ce widget ne s'affiche que sur les écrans étroits, comme les appareils mobiles. Sur les écrans larges, vous pouvez utiliser SignInScreen.sideBuilder, que nous aborderons plus tard dans cet atelier.

Modifiez le fichier lib/auth_gate.dart avec le code suivant:

lib/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, required this.clientId});

  final String clientId;

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

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

The headerBuilder argument requires a function of the type HeaderBuilder, which
is defined in the FlutterFire UI package.

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

Comme il s'agit d'un rappel, il expose les valeurs que vous pouvez utiliser, telles que BuildContext et BoxConstraints, et vous oblige à renvoyer un widget. Le widget que vous renvoyez s'affiche en haut de l'écran. Dans cet exemple, le nouveau code ajoute une image en haut de l'écran. Votre application devrait maintenant se présenter comme suit.

Outil de création de sous-titres

L'écran de connexion expose trois paramètres supplémentaires qui vous permettent de le personnaliser: subtitleBuilder, footerBuilder et sideBuilder.

subtitleBuilder est légèrement différent, car les arguments de rappel incluent une action, qui est de type AuthAction. AuthAction est une énumération que vous pouvez utiliser pour détecter si l'écran sur lequel se trouve l'utilisateur est l'écran de connexion ou l'écran d'enregistrement.

Mettez à jour le code dans auth_gate.dart pour utiliser subtitleBuilder.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            subtitleBuilder: (context, action) {                     // Add from here...
              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!'),
              );
            },                                                       // To here.
          );
        }

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

Outil de création de pied de page

L'argument footerBuilder est identique à celui de subtitleBuilder. Il n'expose pas BoxConstraints ni shrinkOffset, car il est destiné au texte plutôt qu'aux images. Vous pouvez bien sûr ajouter n'importe quel widget.

Ajoutez un pied de page à votre écran de connexion avec ce code.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            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) {                       // Add from here...
              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),
                ),
              );
            },                                                       // To here.
          );
        }

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

Side Builder

L'argument SignInScreen.sidebuilder accepte un rappel. Cette fois, les arguments de ce rappel sont BuildContext et double shrinkOffset. Le widget renvoyé par sideBuilder s'affiche à gauche du formulaire de connexion, et uniquement sur les écrans larges. Cela signifie que le widget ne s'affichera que dans les applications Web et pour ordinateur.

En interne, l'UI FlutterFire utilise un point d'arrêt pour déterminer si le contenu de l'en-tête doit être affiché (sur les écrans hauts, comme les mobiles) ou si le contenu latéral doit être affiché (sur les écrans larges, sur ordinateur ou sur le Web). Plus précisément, si la largeur d'un écran est supérieure à 800 pixels, le contenu du générateur latéral s'affiche, mais pas celui de l'en-tête. Si l'écran fait moins de 800 pixels de large, l'inverse est vrai.

Modifiez le code dans auth_gate.dart pour ajouter des widgets sideBuilder.

lib/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, required this.clientId});

  final String clientId;

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

Votre application devrait maintenant ressembler à ceci lorsque vous développez la largeur de la fenêtre (si vous utilisez Flutter Web ou macOS).

Créer un compte utilisateur

À ce stade, tout le code de cet écran est terminé. Avant de pouvoir vous connecter, vous devez créer un utilisateur. Vous pouvez le faire à l'aide de l'écran "S'inscrire" ou créer un utilisateur dans la console Firebase.

Pour utiliser la console, procédez comme suit :

1. Accédez au tableau"Utilisateurs" dans la console Firebase. Sélectionnez "flutterfire-ui-codelab" ou un autre projet si vous avez utilisé un autre nom. Le tableau suivant s'affiche:
2. Cliquez sur le bouton "Ajouter un utilisateur".
3. Saisissez une adresse e-mail et un mot de passe pour le nouvel utilisateur. Il peut s'agir d'une adresse e-mail et d'un mot de passe factices, comme je l'ai indiqué dans l'image ci-dessous. Cela fonctionne, mais la fonctionnalité "Mot de passe oublié" ne fonctionne pas si vous utilisez une fausse adresse e-mail.
4. Cliquez sur "Ajouter un utilisateur" .

Vous pouvez maintenant revenir à votre application Flutter et connecter un utilisateur à l'aide de la page de connexion. Votre application devrait se présenter comme suit:

6. Écran "Profile" (Profil)

L'UI FlutterFire fournit également un widget ProfileScreen, qui vous offre de nombreuses fonctionnalités en quelques lignes de code.

Ajouter un widget ProfileScreen

Accédez au fichier home.dart dans votre éditeur de texte. Remplacez-le par le code suivant:

lib/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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Le nouveau code de note est le rappel transmis à la méthode IconButton.isPressed. Lorsque vous appuyez sur IconButton, votre application crée un parcours anonyme et y accède. Cette route affichera le widget ProfileScreen, qui est renvoyé à partir du rappel MaterialPageRoute.builder.

Actualisez votre application, puis appuyez sur l'icône en haut à droite (dans la barre d'application). Une page semblable à celle-ci s'affiche:

Il s'agit de l'UI standard fournie par la page de l'UI FlutterFire. Tous les boutons et champs de texte sont connectés à Firebase Auth et fonctionnent immédiatement. Par exemple, vous pouvez saisir un nom dans le champ de texte "Nom". L'UI FlutterFire appellera alors la méthode FirebaseAuth.instance.currentUser?.updateDisplayName, qui enregistrera ce nom dans Firebase.

Remarque: Dans cet exemple, le bouton "Envoyer un e-mail de validation" envoie un e-mail à une fausse adresse e-mail ([e-mail]). Pour vérifier que cela fonctionne, créez un utilisateur avec une adresse e-mail à laquelle vous avez accès.

Se déconnecter

Pour le moment, si vous appuyez sur le bouton "Se déconnecter", l'application ne change pas. Vous serez déconnecté, mais vous ne serez pas redirigé vers le widget AuthGate. Pour ce faire, utilisez le paramètre ProfileScreen.actions.

Commencez par mettre à jour le code dans home.dart.

lib/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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Désormais, lorsque vous créez une instance de ProfileScreen, vous lui transmettez également une liste d'actions à l'argument ProfileScreen.actions. Ces actions sont de type FlutterFireUiAction. De nombreuses classes sont des sous-types de FlutterFireUiAction. En général, vous les utilisez pour indiquer à votre application de réagir à différents changements d'état d'authentification. SignedOutAction appelle une fonction de rappel que vous lui transmettez lorsque l'état d'authentification Firebase change et que l'utilisateur actuel est nul.

En ajoutant un rappel qui appelle Navigator.of(context).pop() lorsque SignedOutAction se déclenche, l'application accède à la page précédente. Dans cet exemple d'application, il n'existe qu'un seul parcours permanent, qui affiche l'écran de connexion si aucun utilisateur n'est connecté et la page d'accueil s'il y en a un. Comme cela se produit lorsque l'utilisateur se déconnecte, l'application affiche l'écran de connexion.

Personnaliser la page de profil

Comme l'écran de connexion, la page de profil est personnalisable. Tout d'abord, notre page actuelle ne permet pas de revenir à la page d'accueil une fois que l'utilisateur est sur la page de profil. Pour résoudre ce problème, attribuez une barre d'application au widget ProfileScreen.

lib/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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

L'argument ProfileScreen.appBar accepte un widget AppBar du package Flutter Material. Il peut donc être traité comme n'importe quel autre AppBar que vous avez créé et transmis à un Scaffold. Dans cet exemple, la fonctionnalité par défaut consistant à ajouter automatiquement un bouton "Retour" est conservée, et l'écran comporte désormais un titre.

Ajouter des enfants à l'écran de profil

Le widget ProfileScreen comporte également un argument facultatif nommé "children". Cet argument accepte une liste de widgets, qui seront placés verticalement dans un widget Column déjà utilisé en interne pour créer le ProfileScreen. Ce widget Column de la méthode de compilation ProfileScreen place les enfants que vous lui transmettez au-dessus du bouton "Se déconnecter".

Mettez à jour le code dans home.dart pour afficher le logo de l'entreprise ici, comme sur l'écran de connexion.

lib/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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Actualisez votre application. Vous verrez alors ceci à l'écran:

7. Authentification Google Auth multiplate-forme

L'interface utilisateur FlutterFire fournit également des widgets et des fonctionnalités permettant d'authentifier les utilisateurs auprès de fournisseurs tiers tels que Google, Twitter, Facebook, Apple et GitHub.

Pour intégrer l'authentification Google, installez le plug-in officiel firebase_ui_oauth_google et ses dépendances, qui géreront le flux d'authentification natif. Dans le terminal, accédez à la racine de votre projet Flutter, puis saisissez la commande suivante:

flutter pub add google_sign_in firebase_ui_oauth_google

Activer le fournisseur Google Sign-In

Ensuite, activez le fournisseur Google dans la console Firebase:

1. Accédez à l'écran Fournisseurs de connexion avec authentification dans la console.
2. Cliquez sur "Ajouter un fournisseur".
3. Sélectionnez "Google".
4. Activez le bouton "Activer", puis appuyez sur "Enregistrer".
5. Si une fenêtre modale s'affiche avec des informations sur le téléchargement des fichiers de configuration, cliquez sur "OK".
6. Vérifiez que le fournisseur de connexion Google a été ajouté.

Ajouter un bouton Google Sign-In

Lorsque la connexion Google est activée, ajoutez le widget nécessaire pour afficher un bouton de connexion Google stylisé sur l'écran de connexion. Accédez au fichier auth_gate.dart et remplacez le code par le code suivant:

lib/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';  // Add this import
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

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

Le seul nouveau code ici est l'ajout de GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") à la configuration du widget SignInScreen.

Une fois cette modification effectuée, actualisez votre application. Un bouton de connexion Google s'affiche alors.

Bouton de configuration de la connexion

Le bouton ne fonctionne pas sans configuration supplémentaire. Si vous développez avec Flutter Web, il s'agit de la seule étape que vous devez ajouter pour que cela fonctionne. D'autres plates-formes nécessitent des étapes supplémentaires, que nous allons aborder plus tard.

1. Accédez à la page "Fournisseurs d'authentification" dans la console Firebase.
2. Cliquez sur le fournisseur Google.
3. Cliquez sur le panneau d'extension "Configuration du SDK Web".
4. Copiez la valeur de "ID client Web".
5. Revenez à votre éditeur de texte et mettez à jour l'instance de GoogleProvider dans le fichier auth_gate.dart en transmettant cet ID au paramètre nommé clientId.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

Une fois l'ID client Web saisi, actualisez votre application. Lorsque vous appuyez sur le bouton "Se connecter avec Google", une nouvelle fenêtre s'affiche (si vous utilisez le Web) pour vous guider dans la procédure de connexion Google. Au début, il se présente comme suit:

Configurer iOS

Pour que cela fonctionne sur iOS, un processus de configuration supplémentaire est nécessaire.

1. Accédez à l'écran "Paramètres du projet" dans la console Firebase. Une fiche affichant vos applications Firebase s'affiche:
2. Sélectionnez "iOS". Notez que le nom de votre application sera différent de celui affiché dans la capture d'écran. Là où la capture d'écran indique "complete" (Terminé), la vôtre indiquera "start" (Démarrer), si vous avez utilisé le projet flutter-codelabs/firebase-auth-flutterfire-ui/start pour suivre cet atelier de programmation.
3. Cliquez sur le bouton GoogleServices-Info.plist pour télécharger le fichier de configuration nécessaire.
4. Faites glisser le fichier téléchargé vers le répertoire /ios/Runner de votre projet Flutter.
5. Ouvrez Xcode en exécutant la commande de terminal suivante à partir de la racine de votre projet: open ios/Runner.xcworkspace
6. Effectuez un clic droit sur le répertoire Runner, puis sélectionnez "Add Files to "Runner" (Ajouter des fichiers à "Runner").
7. Sélectionnez GoogleService-Info.plist dans le gestionnaire de fichiers.
8. Revenez dans votre éditeur de texte (qui n'est pas Xcode), puis ajoutez les attributs CFBundleURLTypes ci-dessous dans le fichier 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 -->
   

9. Vous devez remplacer le GoogleProvider.clientId que vous avez ajouté dans la configuration Web par l'ID client associé à votre ID client Firebase pour iOS. Vous pouvez d'abord trouver cet ID dans le fichier firebase_options.dart, dans la constante iOS. Copiez la valeur transmise à 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',
   );
   

10. Collez cette valeur dans la variable clientId du fichier lib/main.dart.

lib/main.dart

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

import 'app.dart';
import 'firebase_options.dart';

const clientId = 'YOUR_CLIENT_ID'; // Replace this value with your Client ID.

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

  runApp(const MyApp(clientId: clientId));
}

Si votre application Flutter s'exécute déjà sur iOS, vous devez l'arrêter complètement, puis la relancer. Sinon, exécutez l'application sur iOS.

8. Félicitations !

Vous avez terminé l'atelier de programmation sur l'UI Firebase Auth pour Flutter . Vous trouverez le code final de cet atelier de programmation dans le répertoire firebase-auth-flutterfire-ui/complete sur GitHub.

Points abordés

• Configurer une application Flutter pour utiliser Firebase
• Configurer un projet Firebase dans la console Firebase
• CLI FlutterFire
• CLI Firebase
• Utiliser Firebase Authentication
• Utiliser l'UI FlutterFire pour gérer l'authentification Firebase dans votre application Flutter

Étapes suivantes

• Découvrez comment utiliser Firestore et Authentication dans Flutter: Atelier de programmation Découvrez Firebase pour Flutter
• Découvrez d'autres outils Firebase pour créer votre application Flutter:
  • Cloud Storage
  • Cloud Functions
  • Realtime Database

En savoir plus

• Site Firebase: firebase.google.com
• Site Flutter: flutter.dev
• Widgets Flutter Firebase FlutterFire: firebase.flutter.dev
• Chaîne YouTube Firebase
• Chaîne YouTube de Flutter

Sparky est là pour célébrer cette occasion avec vous !