Passer au contenu principal
Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations de profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Flutter en utilisant la trousse de développement logiciel (SDK) Auth0 Flutter.
La trousse de développement logiciel (SDK) Flutter ne prend actuellement en charge que les applications Flutter exécutées sur les plateformes Android, iOS et Web.
Ce démarrage rapide suppose que vous avez déjà une application Flutter en cours d’exécution. Si ce n’est pas le cas, consultez les guides de « démarrage » de Flutter pour commencer avec une application simple.Vous devriez également connaître l’outil de ligne de commande Flutter.
1
Lorsque vous vous êtes inscrit à Auth0, une nouvelle Application a été créée pour vous ou vous avez peut‑être créé la vôtre. Vous aurez besoin de certains renseignements au sujet de cette Application pour communiquer avec Auth0. Vous pouvez obtenir ces informations dans la section Application Settings de l’Auth0 Dashboard.
Lorsque vous utilisez l’Application par défaut avec une Application native ou une Application monopage, assurez-vous de mettre à jour la Token Endpoint Authentication Method sur None et de définir le Application Type sur SPA ou Native.
Vous avez besoin des renseignements suivants :
  • Domaine
  • ID client
Si vous téléchargez l’exemple fourni en haut de cette page, ces renseignements seront déjà remplis pour vous.

​
Configurer les URL de redirection

Une URL de redirection (callback URL) est une URL de votre application vers laquelle Auth0 redirige l’utilisateur une fois qu’il a été authentifié. L’URL de redirection de votre application doit être ajoutée au champ URL de redirection autorisées dans vos Application Settings. Si ce champ n’est pas défini, les utilisateurs ne pourront pas se connecter à l’application et recevront une erreur.
Si vous suivez l’exemple de projet que vous avez téléchargé en haut de cette page, vous devez définir l’option Allowed Callback URL sur http://localhost:3000.

​
Configurer les URL de déconnexion

Une URL de déconnexion est une URL de votre application vers laquelle Auth0 peut retourner après que l’utilisateur a été déconnecté du Serveur d’autorisation. Celle-ci est indiqué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éconnexion autorisées dans vos Application Settings. Si ce champ n’est pas défini, les utilisateurs ne pourront pas se déconnecter de l’application et recevront une 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éconnexion autorisées est http://localhost:3000.

​
Configurer les origines Web autorisées

Vous devez ajouter l’URL de votre application au champ Allowed Web Origins dans vos Application Settings. Si vous n’enregistrez pas l’URL de votre application ici, l’application ne pourra pas actualiser les jetons d’authentification de façon silencieuse et vos utilisateurs seront déconnectés la prochaine fois qu’ils visiteront l’application ou 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 Allowed Web Origins sur http://localhost:3000.
2
Ajoutez la trousse de développement logiciel (SDK) Auth0 pour Flutter à votre projet :
flutter pub add auth0_flutter
Ajoutez la balise <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
Universal Login est le moyen le plus simple de configurer l’authentification dans votre application. Nous recommandons de l’utiliser pour offrir la meilleure expérience, la meilleure sécurité et la gamme de fonctionnalités la plus complète.Intégrez Auth0 Universal Login à votre application Flutter Web en utilisant la classe Auth0Web. Redirigez vos utilisateurs vers la page Auth0 Universal Login d’Auth0 à l’aide de loginWithRedirect().
Vous devrez normalement spécifier le paramètre redirectUrl de loginWithRedirect. Si vous l’omettez, 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 ensuite accéder au jeton d’ID et aux jetons d’accès pour cet utilisateur en appelant onLoad au démarrage de l’application et en traitant les informations d’identification qui vous sont fournies :
auth0.onLoad().then((final credentials) => setState(() {
// Gérez ou stockez les informations d'identification ici

_credentials = credentials;

}));
Point de contrôle
Ajoutez un bouton à votre application qui appelle loginWithRedirect() et qui connecte l’utilisateur à votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis de retour vers votre application.Vérifiez que vous pouvez accéder à credentials à la suite de l’appel de onLoad et que vous êtes en mesure d’accéder au jeton d’ID et aux jetons d’accès.
4
Pour déconnecter des utilisateurs, redirigez-les vers le point de terminaison de déconnexion Auth0 afin d’effacer leur session de connexion en appelant la Trousse de développement logiciel (SDK) Flutter Auth0 logout(). En savoir plus sur la déconnexion dans Auth0.
Vous souhaiterez normalement spécifier returnToUrl lorsque vous appelez logout, sinon Auth0 utilisera par défaut la première URL de la liste des 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, puis de retour. Vous ne devriez plus être connecté à votre application.
5
Le profil utilisateur récupère automatiquement les propriétés du profil de l’utilisateur lors du chargement de la page, et peut être consulté et stocké en appelant onLoad au démarrage de l’application. L’objet renvoyé par onLoad contient une propriété user avec toutes les propriétés du profil de l’utilisateur. Celui-ci est renseigné en interne en décodant le jeton ID.
Point de contrôle
Ouvrez une session et inspectez la propriété user dans le résultat renvoyé. Vérifiez les informations de profil de l’utilisateur actuel, comme email ou name.

​
Prochaines étapes

Excellent travail! Si vous êtes rendu jusqu’ici, vous devriez maintenant avoir la connexion, la déconnexion et les informations de profil utilisateur qui fonctionnent dans votre application.

Ce tutoriel de démarrage rapide est maintenant terminé, mais il reste encore beaucoup à découvrir. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :