Authentification FlutterFlow personnalisée en utilisant Logto

Introduction#

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 :

1. Via l'authentification Firebase intégrée
2. Via l'authentification Supabase intégrée
3. Authentification personnalisée

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.

Prérequis#

• Un compte Logto Cloud ou une instance auto-hébergée de Logto. (Consultez le guide ⚡ Get started pour créer une instance Logto.)
• Une application Flutter créée en utilisant FlutterFlow.
• Enregistrez une application Flutter dans votre console Logto.
• Un dépôt GitHub pour gérer votre code personnalisé dans FlutterFlow.
• Consultez notre guide d'intégration du SDK Flutter.

Étape 1 : Activer la gestion du code personnalisé dans 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 :

1. main : La branche principale pour le projet Flutter. Vous aurez besoin de cette branche pour déployer votre projet.
2. flutterflow : La branche où FlutterFlow synchronisera les modifications du plan UI à votre base de code.
3. develop : La branche où vous pouvez modifier votre code personnalisé.

Étape 2 : Concevoir et créer votre flux d'interface utilisateur personnalisé dans FlutterFlow#

Créer vos pages#

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 :

1. Une simple 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.)

2. Une page de profil user pour afficher les informations de l'utilisateur et un bouton de déconnexion.

Activer l'authentification personnalisée dans FlutterFlow#

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.

Étape 3 : Synchroniser votre projet FlutterFlow avec GitHub#

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

Étape 4 : Personnaliser le code du CustomAuthManager#

Passez à 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.

Installer la dépendance du SDK Logto#

Ajoutez la dépendance SDK Logto à votre projet.

Mettre à jour la classe UserProvider#

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 OpenIdClaims est définie dans le SDK Logto, qui fournira les revendications id_token standard OIDC à partir d'un utilisateur authentifié.

Personnaliser la classe CustomAuthManager et initialiser le client Logto#

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_token seront stockées dans le stockage local.

Implémenter la méthode de connexion en utilisant le client Logto#

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.

Implémenter la méthode de déconnexion#

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.

Mettre à jour les méthodes utilitaires auth#

• Ajouter le getter authManager pour accéder à l'instance de CustomAuthManager.
• Ajouter le getter currentUserUid pour obtenir l'uid de l'utilisateur actuel.
• Ajouter le getter currentUserData pour obtenir les données de l'utilisateur actuel.
• Ajouter le getter logtoClient pour accéder à l'instance du client Logto.

Étape 5 : Mettre à jour les boutons de connexion et de déconnexion dans votre UI#

Page d'accueil#

Appelez la méthode authManager.signIn pour initier le flux d'authentification lorsque l'utilisateur clique sur le bouton de connexion.

redirectUri est 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.

Page de profil utilisateur#

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.

Test#

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.

Lectures supplémentaires#

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.

• Point de terminaison des informations utilisateur
• Obtenir un jeton d'accès à une ressource
• Obtenir un jeton d'accès à une organisation