Passer au contenu principal
Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Flutter à l’aide de la trousse SDK Auth0 Flutter.
La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter s’exécutant sur les plateformes Android, iOS ou Web.
Ce guide rapide suppose que vous avez déjà une application Flutter installée et active. Si ce n’est pas le cas, consultez les guides de démarrage de Flutter pour commencer l’utilisation d’une application simple.Vous devez également être familiarisé avec l’outil de ligne de commande Flutter.
1

Configuration d’Auth0

Lorsque vous vous êtes inscrit à Auth0, une nouvelle application a été créée pour vous, ou vous auriez pu en créer une nouvelle. Vous aurez besoin de quelques informations à propos de cette application pour communiquer avec Auth0. Vous pouvez obtenir ces informations dans la section Paramètres d’application d’Auth0 Dashboard.
null
Si vous utilisez l’application par défaut avec une application native ou une application à page unique, veillez à mettre à jour la méthode d’authentification du point de terminaison des jetons en la réglant sur None et à définir le type d’application sur SPA ou Native.
Les informations suivantes sont nécessaires :
  • Domaine
  • Identifiant client
Si vous téléchargez l’exemple en haut de cette page, les détails sont renseignés pour vous.

​
Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle Auth0 redirige l’utilisateur après qu’il s’est authentifié. L’URL de rappel de votre application doit être ajoutée au champ URL de rappel autorisées dans les Paramètres d’application. Si ce champ n’est pas défini, les utilisateurs ne pourront pas se connecter à l’application et obtiendront un message d’erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez définir l’URL de rappel autorisée sur http://localhost:3000.

​
Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle Auth0 peut se rediriger une fois que l’utilisateur a été déconnecté du serveur d’autorisations. Cette URL est spécifiée dans le paramètre de requête returnTo. L’URL de déconnexion de votre application doit être ajoutée au champ URL de déconnexions autorisées dans les Application Settings (Paramètres d’application). Si ce champ n’est pas défini, les utilisateurs ne pourront pas se déconnecter de l’application et obtiendront un message d’erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, l’URL de déconnexion que vous devez ajouter au champ URL de déconnexions autorisées est http://localhost:3000.

​
Configurer les origines Web autorisées

Vous devez ajouter l’URL de votre application au champ Origines Web autorisées dans vos Application Settings (Paramètres d’application). Si vous n’enregistrez pas l’URL de votre application ici, l’application ne pourra pas actualiser silencieusement les jetons d’authentification et vos utilisateurs seront déconnectés la prochaine fois qu’ils visiteront l’application ou qu’ils actualiseront la page.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez définir l’option Origines Web autorisées sur http://localhost:3000.
2

Installer la trousse SDK Flutter Auth0

Ajoutez la trousse SDK Flutter Auth0 au projet :
flutter pub add auth0_flutter
Ajoutez l’étiquette de script suivante à votre page index.html :
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js" defer></script>
3

Ajouter une fonctionnalité de connexion à votre application

La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.Intégrez la connexion universelle Auth0 dans votre application Flutter (Web) en utilisant la classe Auth0Web. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant loginWithRedirect().
Vous devrez normalement définir le paramètre redirectUrl sur loginWithRedirect. Si ce paramètre n’est pas spécifié, Auth0 utilisera la route de connexion par défaut, qui n’est pas configurée par défaut.
Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Vous pouvez alors accéder à l’identificateur et aux jetons d’accès de cet utilisateur en appelant onLoad lors du démarrage et en gérant les informations d’identification qui vous sont communiquées :
auth0.onLoad().then((final credentials) => setState(() {
// Handle or store credentials here

_credentials = credentials;

}));
Point de contrôle
Ajoutez un bouton à votre application qui appelle loginWithRedirect() et déconnecte l’utilisateur de votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis renvoyé vers votre application. Vérifiez que vous pouvez accéder aux credentials après avoir appelé onLoad et que vous pouvez accéder à l’identifiant et aux jetons d’accès.
4

Ajouter une fonctionnalité de déconnexion à votre application

Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 logout(). En savoir plus sur la déconnexion d’Auth0.
Vous devez normalement spécifier returnToUrl lorsque vous appelez logout, sinon Auth0 utilisera par défaut la première URL de la liste URL de déconnexion autorisées.
Point de contrôle
Ajoutez un bouton à votre application qui appelle logout() et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice-versa. Vous ne devriez pas être connecté à votre application.
5

Afficher les informations du profil utilisateur

Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur lors du chargement de la page. Il est possible d’y accéder et de les stocker en appelant onLoad lors du démarrage de l’application. L’objet retourné à partir de onLoad contient une propriété user avec toutes les propriétés du profil utilisateur. Cette propriété est alimentée en interne par le décodage du jeton d’ID.
Point de contrôle
Connectez-vous et inspectez la propriété user par rapport au résultat. Vérifiez les informations de profil utilisateur actuel, telles que son email ou name.

​
Étapes suivantes

Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
⌘I