web-dev-qa-db-fra.com

Connexion Firebase avec Flutter en utilisant onAuthStateChanged

En dehors de Flutter, lorsque j'implémente l'authentification Firebase, j'utilise toujours l'écouteur onAuthStateChanged fourni par Firebase pour déterminer si l'utilisateur est connecté ou non et répondre en conséquence.

J'essaie de faire quelque chose de similaire en utilisant le flutter, mais je peux trouver un moyen d'accéder à onAuthStateChanged de Firebase. J'utilise les plugins firebase_auth et google_signin Flutter. Je travaille sur un exemple de code inclus dans le plugin firebase_auth Flutter. Voici l'exemple de code. Je peux me connecter avec succès avec Google, mais l'exemple est trop simple, car je souhaite qu'un observateur/auditeur détecte l'état de connexion de l'utilisateur. 

Existe-t-il un moyen de détecter via observateur/écouteur en utilisant les plug-ins flutter firebase_auth/google_signin pour déterminer le statut d'un utilisateur?

En fin de compte, je veux que l'application détermine si l'utilisateur est connecté (oui/non). Sinon, affichez un écran de connexion, si oui, affichez ma page principale de l'application.

import 'Dart:async';
import 'Dart:io';

import 'package:flutter/material.Dart';
import 'package:firebase_auth/firebase_auth.Dart';
import 'package:google_sign_in/google_sign_in.Dart';

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn _googleSignIn = new GoogleSignIn();

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Firebase Auth Demo',
      home: new MyHomePage(title: 'Firebase Auth Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<String> _message = new Future<String>.value('');

  Future<String> _testSignInAnonymously() async {
    final FirebaseUser user = await _auth.signInAnonymously();
    assert(user != null);
    assert(user == _auth.currentUser);
    assert(user.isAnonymous);
    assert(!user.isEmailVerified);
    assert(await user.getToken() != null);
    if (Platform.isIOS) {
      // Anonymous auth doesn't show up as a provider on iOS
      assert(user.providerData.isEmpty);
    } else if (Platform.isAndroid) {
      // Anonymous auth does show up as a provider on Android
      assert(user.providerData.length == 1);
      assert(user.providerData[0].providerId == 'firebase');
      assert(user.providerData[0].uid != null);
      assert(user.providerData[0].displayName == null);
      assert(user.providerData[0].photoUrl == null);
      assert(user.providerData[0].email == null);
    }
    return 'signInAnonymously succeeded: $user';
  }

  Future<String> _testSignInWithGoogle() async {
    final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;
    final FirebaseUser user = await _auth.signInWithGoogle(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    assert(user.email != null);
    assert(user.displayName != null);
    assert(!user.isAnonymous);
    assert(await user.getToken() != null);
    return 'signInWithGoogle succeeded: $user';
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new MaterialButton(
              child: const Text('Test signInAnonymously'),
              onPressed: () {
                setState(() {
                  _message = _testSignInAnonymously();
                });
              }),
          new MaterialButton(
              child: const Text('Test signInWithGoogle'),
              onPressed: () {
                setState(() {
                  _message = _testSignInWithGoogle();
                });
              }),
          new FutureBuilder<String>(
              future: _message,
              builder: (_, AsyncSnapshot<String> snapshot) {
                return new Text(snapshot.data ?? '',
                    style: const TextStyle(
                        color: const Color.fromARGB(255, 0, 155, 0)));
              }),
        ],
      ),
    );
  }
}

Voici les liens vers les packages Flutter en question: https://github.com/flutter/plugins/tree/master/packages/firebase_authhttps://github.com/flutter/plugins/tree/master/packages/google_sign_in

firebasedartfirebase-authenticationgoogle-signinflutter
5
Gilberg

Je sais que cette question est assez ancienne, mais voici la réponse si quelqu'un le cherche toujours.

Firebase renvoie un flux de FirebaseUser avec sa fonction onAuthStateChanged. Il existe de nombreuses façons d'écouter le changement d'état d'authentification de l'utilisateur. Voici comment je le fais:

Solution 1

Je renvoie un StreamBuilder à la page d'accueil de mon application et StreamBuilder renvoie des pages spécifiques en fonction du statut d'authentification de l'utilisateur.

@override
Widget build(BuildContext context) {
  return MaterialApp(
      title: 'Your App Name',
      home: _getLandingPage()
  );
}

Widget _getLandingPage() {
  return StreamBuilder<FirebaseUser>(
    stream: FirebaseAuth.instance.onAuthStateChanged,
    builder: (BuildContext context, snapshot) {
      if (snapshot.hasData) {
        if (snapshot.data.providerData.length == 1) { // logged in using email and password
          return snapshot.data.isEmailVerified
              ? MainPage()
              : VerifyEmailPage(user: snapshot.data);
        } else { // logged in using other providers
          return MainPage();
        }
      } else {
        return LoginPage();
      }
    },
  );
}

Solution 2

Vous pouvez également créer un écouteur dans la fonction initState() de votre application.

@override
void initState() {
  super.initState();

  FirebaseAuth.instance.onAuthStateChanged.listen((firebaseUser) {
    // do whatever you want based on the firebaseUser state
  });
}
12
Javid Noutash

Le Firebase pour Flutter Codelab présente un exemple beaucoup plus détaillé utilisant la connexion à Google et l’autorisation Firebase.

Après la dernière étape vous vous retrouvez avec cette fonction _ensureLoggedIn utilisée pour vérifier si l'utilisateur est connecté et, dans le cas contraire, lancer un flux de connexion.

Future<Null> _ensureLoggedIn() async {
  GoogleSignInAccount user = googleSignIn.currentUser;
  if (user == null)
    user = await googleSignIn.signInSilently();
  if (user == null) {
    user = await googleSignIn.signIn();
    analytics.logLogin();
  }
  if (auth.currentUser == null) {
    GoogleSignInAuthentication credentials =
    await googleSignIn.currentUser.authentication;
    await auth.signInWithGoogle(
      idToken: credentials.idToken,
      accessToken: credentials.accessToken,
    );
  }
}

Vous pouvez modifier ceci pour vérifier ces choses au démarrage de votre application et afficher conditionnellement différentes vues pour les utilisateurs en pré-autorisation et post-autorisation avec quelque chose comme:

final auth = FirebaseAuth.instance;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'MyApp',
        home: (_checkLogin() == true ? new PostAuthScaffold() : new PreAuthScaffold())
    );
  }
}

bool _checkLogin() {
  GoogleSignInAccount user = googleSignIn.currentUser;
  return !(user == null && auth.currentUser == null);
}
3
FrederickCook

J'avais la même requête que j'ai utilisée Préférence partagée pour obtenir les informations sur l'état modifié de l'authentification. J'ai également construit un projet à l'aide de Préférences partagées avec Firebase et Flutter. Si vous souhaitez savoir, vous pouvez lire le blog écrit par moi:

Implémentation de FirebaseAuthStateListener à l'aide de préférences partagées dans Flutter. ” Https://medium.com/@vaibhavminiyar/implementing-firebaseauthystateistener-using-shared-prefrences-in-flutter-b42e12f81eb2

1
Vaibhav Miniyar