Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Vue) et Capacitor en utilisant la trousse SDK Vue Auth0.
1
Démarrage
Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Utiliser Capacitor avec Ionic Framework pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).
2
Configuration d’Auth0
Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).
Tout au long de cet article,
YOUR\_PACKAGE\_ID est l’identificateur du package de votre application. Il peut être trouvé et configuré dans le champ appId de votre fichier capacitor.config.ts. Voir Schéma de configuration de Capacitor pour plus d’informations.Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.Configurer les URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.Si vous suivez notre projet à titre d’exemple, définissez ceci sur
YOUR\_PACKAGE\_ID://{yourDomain}/capacitor/YOUR\_PACKAGE\_ID/callbackConfiguration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.Si vous suivez notre projet à titre d’exemple, définissez ceci sur
YOUR\_PACKAGE\_ID://{yourDomain}/capacitor/YOUR\_PACKAGE\_ID/callback.Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).Si vous suivez notre projet à titre d’exemple, définissez ceci sur
capacitor://localhost, http://localhost pour iOS et Android respectivement.3
Installer la trousse SDK Vue Auth0
Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Vue Auth0 :
npm install @auth0/auth0-vueLa trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Vue, y compris un module et un service d’authentification.Installer les plugiciels Capacitor
Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :npm install @capacitor/browser @capacitor/app@capacitor/browser: vous permet d’interagir avec le navigateur de système de l’appareil et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation de Auth0@capacitor/app: vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0
Le plugiciel de navigateur de Capacitor sur iOS utilise
SFSafariViewController, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.4
Configurer le plugiciel CreateAuht0
La trousse SDK exporte
createAuth0, un composable qui contient tous les services nécessaires au fonctionnement du SDK. Ce composable doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre ID client.Le composable createAuth0 prend la configuration suivante :domain: La valeurdomainprésente dans les Settings (Paramètres) de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisés d’Auth0.clientId: La valeur de l’identificateur client présente dans les Settings (Paramètres) de l’application que vous avez créée dans l’Auth0 Dashboard.useRefreshTokens: Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.useRefreshTokensFallback: Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.authorizationParams.redirect_uri: URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir
cacheLocation sur localstorage lors de la configuration de la trousse SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, la trousse SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas chiffrées, non sécurisées et peuvent également être synchronisées dans le nuage.Point de contrôle
Maintenant que vous avez configuré votre application avec la trousse SDK Vue Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.5
Ajouter une fonctionnalité de connexion à votre application
Dans une application Capacitor, le plugicielCapacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) Auth0. Définissez le paramètre
openUrl sur la fonction loginWithRedirect pour utiliser Browser.open afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).Par défaut, la méthode
loginWithRedirect de la trousse SDK utilise window.location.href pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plateforme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur frustrante.Point de contrôle
La fonctionloginWithRedirect indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.6
Gérer le rappel de connexion
Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement
appUrlOpen doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code et state sont présents dans l’URL.La méthode Browser.close() devrait fermer le navigateur lorsque cet événement est déclenché.Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le callback dans votre application. Pour ce faire, enregistrez votre
YOUR\_PACKAGE\_ID comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lisez Définition d’un schéma d’URL personnalisé pour iOS ou Création de liens profonds vers le contenu des applications pour Android.Point de contrôle
AjoutezappUrlOpen au composant App de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.7
Ajouter une fonctionnalité de déconnexion à votre application
Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
- Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard
- Déconnectez-vous de la trousse SDK en appelant
logoutet transmettez votre URL de redirection comme paramètrelogoutParams.returnTo. - Définissez le paramètre
openUrlsur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide deBrowser.open.
De la même manière que pour l’étape de connexion, si vous ne définissez pas
openUrl lors de l’appel de logout, la trousse SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.Point de contrôle
Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètrereturnTo. Vérifiez que vous n’êtes plus connecté à votre application.8
Afficher le profil utilisateur
La trousse SDK Vue Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles à partir de la propriété
user exposée par la fonction composable useAuth0().L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading et user. Une fois que isLoading est false et que user a une valeur, le profil utilisateur peut être utilisé.Point de contrôle
Assurez-vous que vos utilisateurs ont un moyen de consulter leurs informations de profil dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous vous êtes connecté.É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 :- Auth0 Dashboard : apprenez à configurer et gérer votre locataire et vos applications Auth0
- Auth0 Marketplace : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0