Apprenez à implémenter une authentification personnalisée dans votre application Flutter en utilisant le SDK Flutter Logto.
FlutterFlow est une plateforme low-code qui vous permet de créer visuellement des applications Flutter. Elle fournit une interface de glisser-déposer pour concevoir l'interface utilisateur de votre application et génère le code Flutter correspondant. Selon la documentation officielle, elle propose trois options d'intégration d'authentification différentes :
Pour les deux premières, FlutterFlow propose une intégration transparente avec Firebase et Supabase. Vous devrez configurer votre projet Firebase ou Supabase et configurer les paramètres d'authentification dans FlutterFlow. Cependant, si vous souhaitez utiliser un autre fournisseur d'authentification, vous devrez implémenter vous-même la logique d'authentification.
Quant à l'authentification personnalisée, FlutterFlow offre un moyen de s'intégrer avec n'importe quel fournisseur d'authentification en se basant sur une seule API d'authentification personnalisée.
Cependant, un échange direct de références utilisateur entre le client et le serveur d'authentification n'est pas recommandé par les normes de sécurité modernes. Au lieu de cela, vous devriez utiliser un flux d'authentification sécurisé tel qu'OAuth 2.0 ou OpenID Connect (OIDC) pour authentifier les utilisateurs. Pour les fournisseurs d'identité modernes basés sur OAuth 2.0 ou OIDC, tels que Auth0, Okta et Logto, le type de subvention des références de mot de passe du propriétaire des ressources (ROPC) n'est pas recommandé ou est interdit pour des raisons de sécurité. Consultez type de subvention ropc obsolète pour plus de détails.
Un flux d'authentification standard OAuth 2.0 ou OIDC implique plusieurs étapes et redirections entre l'application cliente, le serveur d'autorisation et le navigateur de l'utilisateur. Dans cet article, nous vous montrerons comment personnaliser la classe CustomAuthManager de FlutterFlow en utilisant le SDK Flutter Logto pour implémenter un flux d'authentification sécurisé dans votre application FlutterFlow.
Afin de personnaliser la classe CustomAuthManager, vous devez activer la fonctionnalité de code personnalisé dans FlutterFlow. Suivez le guide Gérer le code personnalisé dans GitHub pour lier et synchroniser votre projet FlutterFlow avec GitHub.
Une fois cela fait, vous aurez trois branches différentes sous votre dépôt GitHub FlutterFlow :
main : La branche principale pour le projet Flutter. Vous aurez besoin de cette branche pour déployer votre projet.flutterflow : La branche où FlutterFlow synchronisera les modifications du plan UI à votre base de code.develop : La branche où vous pouvez modifier votre code personnalisé.Créez votre interface utilisateur dans FlutterFlow. Vous pouvez suivre la documentation de FlutterFlow pour créer votre UI en fonction de vos besoins. Dans ce tutoriel, pour les besoins minimums, nous supposerons que vous avez deux pages :
HomePage avec un bouton de connexion. (Aucun formulaire de connexion n'est nécessaire, le flux d'authentification utilisateur est géré côté Logto. Veuillez consulter le guide customize sie pour plus de détails.)
user pour afficher les informations de l'utilisateur et un bouton de déconnexion.
Accédez à la page App Settings - Authentication et activez l'authentification personnalisée. Cela créera une classe CustomAuthManager et des fichiers connexes dans votre projet FlutterFlow.
Après avoir créé votre interface utilisateur personnalisée et activé l'authentification personnalisée dans FlutterFlow, vous devez synchroniser votre projet avec GitHub. Allez à la page integrations - GitHub et cliquez sur Push to Repository
CustomAuthManagerPassez à la branche develop de votre dépôt GitHub et fusionnez les dernières modifications de la branche flutterflow. Cela synchronisera toutes les modifications de l'interface utilisateur avec votre branche develop, y compris vos widgets de page et la classe pré-construite CustomAuthManager.
Ajoutez la dépendance SDK Logto à votre projet.
La classe UserProvider est responsable de la gestion de l'état d'authentification de l'utilisateur. Nous devons personnaliser les propriétés pour stocker les informations d'authentification utilisateur fournies par le SDK Logto.
Ajoutez une propriété idToken de type OpenIdClaims pour stocker les revendications id_token de l'utilisateur authentifié.
La classe
OpenIdClaimsest définie dans le SDK Logto, qui fournira les revendicationsid_tokenstandard OIDC à partir d'un utilisateur authentifié.
La méthode initialize va initialiser une instance client Logto et mettre à jour le flux d'utilisateur actuel avec l'état d'authentification de l'utilisateur persisté dans le stockage local.
Le SDK Logto utilise le package flutter_secure_storage pour stocker de manière sécurisée les données d'authentification de l'utilisateur. Une fois l'utilisateur authentifié, les revendications
id_tokenseront stockées dans le stockage local.
Appeler la méthode LogtoClient.signIn initiera un flux d'authentification OIDC standard. La page de connexion de Logto sera ouverte dans une vue Web. Le flux d'authentification basé sur la vue Web est alimenté par flutter_web_auth.
Le client Logto gérera les étapes d'autorisation, d'échange de jetons et de récupération des informations utilisateur. Une fois l'utilisateur authentifié, les revendications idTokenClaims seront stockées dans le stockage local.
Récupérez les idTokenClaims du client Logto et mettez à jour le flux d'utilisateur actuel.
La méthode signOut effacera les données d'authentification utilisateur stockées dans le stockage local et mettra à jour le flux d'utilisateur actuel.
authManager pour accéder à l'instance de CustomAuthManager.currentUserUid pour obtenir l'uid de l'utilisateur actuel.currentUserData pour obtenir les données de l'utilisateur actuel.logtoClient pour accéder à l'instance du client Logto.Appelez la méthode authManager.signIn pour initier le flux d'authentification lorsque l'utilisateur clique sur le bouton de connexion.
redirectUriest l'URL de rappel qui sera utilisée pour capturer le rappel d'autorisation depuis la page de connexion Logto. Consultez le guide implémenter la connexion pour plus de détails sur le redirectUri.
L'utilisateur sera redirigé vers la page user après une authentification réussie.
Utilisez les getters utilitaires auth pour accéder aux données actuelles de l'utilisateur et à l'instance du client Logto.
Par exemple, pour afficher les informations de l'utilisateur en utilisant plusieurs widgets Text :
Déclenchez la méthode de déconnexion lorsque l'utilisateur clique sur le bouton de déconnexion et redirigez l'utilisateur vers la page d'accueil.
Exécutez votre application FlutterFlow sur un émulateur. Cliquez sur le bouton de connexion sur la page d'accueil pour initier le flux d'authentification. La page de connexion Logto s'ouvrira dans une vue Web. Après une authentification réussie, l'utilisateur sera redirigé vers la page de profil utilisateur. Les informations de l'utilisateur seront affichées sur la page de profil utilisateur. Cliquez sur le bouton de déconnexion pour déconnecter l'utilisateur et rediriger l'utilisateur vers la page d'accueil.
N'oubliez pas de fusionner la branche develop dans la branche main et de pousser les modifications vers le dépôt GitHub.
Le SDK Logto fournit davantage de méthodes pour interagir avec l'API Logto. Vous pouvez personnaliser davantage la classe CustomAuthManager pour implémenter plus de fonctionnalités en utilisant le SDK Logto.