Flutter et Firebase login en profondeur
Utiliser le login Firebase avec Flutter est assez simple, je ne vois pas de quoi tu veux parler, vous pourriez penser! eh bien, c’est vrai, même le Social Login est très facile à implémenter. Mais que se passe-t-il si je veux qu’un utilisateur puisse se connecter avec Google, Facebook ou Apple et que chacun d’entre eux soit lié au même compte utilisateur? Que faire si je veux qu’un utilisateur de mon application puisse naviguer et faire des choses dans mon application sans avoir à se connecter, et ne rien perdre de ce qu’il a fait après son inscription?
Pour ce dernier point, je sais qu’il existe de nombreuses solutions, mais celle proposée par Firebase est vraiment une solution élégante et elle fonctionnera sur toutes les plateformes.
1. Anonymous login
Et oui, vous devriez utiliser une connexion anonyme lors du premier lancement de l’application afin que l’utilisateur puisse utiliser toutes les fonctionnalités de l’application sans avoir à s’enregistrer.
Alors tout d’abord, activez la connexion anonyme dans votre console Firebase, pour cela, sélectionnez simplement Authentification dans le menu de gauche, puis sélectionnez l’onglet “Méthode de connexion” et activez le fournisseur de connexion anonyme
Maintenant, pour implémenter cette méthode de connexion, c’est assez facile, et la seule erreur que vous devez gérer est l’erreur “operation-not-allowed” qui ne se produira que si la connexion anonyme n’a pas été activée. Voici comment je le fais, j’utilise personnellement le package Dartz et la classe Either pour gérer les erreurs dans mes repositories:
Sachez que si l’utilisateur s’est déconnecté de la connexion anonyme, il ne pourra pas récupérer le même compte!
Si vous avez un observateur enregistré dans la méthode authStateChanges(), il sera déclenché avec un objet User et le getter currentUser retournera également un objet User:
Alors maintenant, cet utilisateur anonyme peut utiliser les données protégées par les règles de sécurité de Firebase sans avoir à s’enregistrer.
Pour le moment nous avons donc:
2. Liez le compte anonyme et convertissez-le en compte permanent
Ok, donc l’utilisateur a pu tester (presque?) complètement l’application et il pense que c’est vraiment une super application, il est donc temps de s’inscrire et la question est, comment puis-je lier ce compte anonyme à un compte permanent?
Eh bien, FirebaseAuth donne au getter currentUser la méthode de liaison linkWithCredentials().
Commençons donc par la méthode createUserWithEmailAndPassword(), si vous y réfléchissez, peut-être que l’utilisateur connecté voudra simplement se déconnecter et s’enregistrer avec un nouvel utilisateur, vous devez donc passer un flag à votre methode pour savoir si vous devez créer un lien le nouveau compte ou pas, voici comment je le fais:
Lorsque vous utilisez la méthode createUserWithEmailAndPassword(), vous pouvez également souhaiter que l’utilisateur vérifie son e-mail une fois connecté, eh bien, pour cela, il suffit d’appeler la méthode sendVerificationEmail() sur l’objet User.
auth.User user = _firebaseAuth.currentUser;if (!user.emailVerified) {await user.sendEmailVerification();}
Pour les Social Login, suivez simplement le même concept, utilisez le fournisseur approprié (GoogleAuthProvider, FacebookAuthProvider, OAuthProvider,…) et liez les comptes sous le même Uuid d’utilisateur Firebase.
Je vous laisse le code pour Google Signin:
pour Apple Sign in:
et pour Facebook:
3. Changer le mot de passe
Vous pouvez également souhaiter que l’utilisateur puisse mettre à jour son mot de passe dans l’application ou le réinitialiser s’il ne s’en souvient pas. Pour cela, vous pouvez appeler updatePassword() sur l’objet User et sendPasswordResetEmail(String email).
La réinitialisation du mot de passe est assez simple:
@overrideFuture<void> resetPassword({@required EmailAddress email}) =>_firebaseAuth.sendPasswordResetEmail(email: email.getOrCrash());
La mise à jour du mot de passe est plus délicate. Par exemple, si l’utilisateur est connecté depuis un certain temps, il peut être nécessaire de demander une nouvelle authentification par mesure de sécurité, vous pouvez donc demander à l’utilisateur de saisir le mot de passe réel si nécessaire dans l’interface utilisateur.
Ajoutez la méthode de déconnexion à votre repo et c’est à peu près tout. La connexion Facebook, la connexion Twitter, la connexion github et d’autres sont également disponibles, il suffit de suivre la documentation pour chacun et tout ira bien.
Voici le repo avec tout ce que nous avons couvert aujourd’hui:
https://gist.github.com/arnaudelub/562982601fd7be6aa6866a10137577f2
Si vous souhaitez creuser un peu plus, il existe également un Phone login et un Email Link Authentication.
Vous pouvez désormais lier tous les comptes sociaux de l’utilisateur à votre application et permettre à tout nouvel utilisateur de naviguer dans votre application et de s’inscrire sans perdre les données qu’il a pu générer.
Cela sera tout pour aujourd’hui!
Happy coding a tous!
