Apprenez à construire un flux d'authentification utilisateur avec Nuxt en intégrant le SDK Logto.
Dans ce tutoriel, nous allons vous montrer comment créer un flux d'authentification utilisateur avec Nuxt en intégrant le SDK Logto. Le tutoriel utilise TypeScript comme langage de programmation.
Avant de commencer, assurez-vous d'avoir les éléments suivants :
Pour commencer, créez une application Logto avec le type "Web traditionnel". Suivez ces étapes pour créer une application Logto :
Vous devriez ensuite voir un guide interactif qui vous guide à travers le processus d'intégration du SDK Logto avec votre application Nuxt. Le contenu suivant peut être une référence pour une utilisation future.
Installez le SDK Logto via votre gestionnaire de packages préféré :
Dans votre fichier de configuration Nuxt (nuxt.config.ts), ajoutez le module Logto :
La configuration minimale pour le module est la suivante :
Comme ces informations sont sensibles, il est recommandé d'utiliser des variables d'environnement :
Voir config runtime pour plus d'informations.
Passez à la page des détails de l'application de la Console Logto. Ajoutez une URI de redirection http://localhost:3000/callback.
URI de redirection est un concept OAuth 2.0 qui implique que l'emplacement doit rediriger après l'authentification.
De même, ajoutez http://localhost:3000/ à la section "URI de redirection après déconnexion".
URI de redirection après déconnexion est un concept OAuth 2.0 qui implique que l'emplacement doit rediriger après la déconnexion.
Cliquez ensuite sur "Enregistrer" pour enregistrer les modifications.
Lors de l'inscription du module @logto/nuxt, il fera ce qui suit :
/sign-in), la déconnexion (/sign-out), et le callback (/callback).useLogtoClient et useLogtoUser.Ces routes sont configurables via logto.pathnames dans les options du module, par exemple :
Consultez le fichier de définition de type dans le package @logto/nuxt pour plus d'informations.
Comme les pages Nuxt seront hydratées et deviendront une application à page unique (SPA) après le chargement initial, nous devons rediriger l'utilisateur vers la route de connexion ou de déconnexion si nécessaire.
Pour afficher les informations de l'utilisateur, vous pouvez utiliser le composable useLogtoUser(), qui est disponible sur le serveur et le client :
Vous pouvez maintenant exécuter l'application et essayer de vous connecter/déconnecter avec Logto :
Si vous rencontrez des problèmes lors de l'intégration, n'hésitez pas à rejoindre notre serveur Discord pour discuter avec la communauté et l'équipe Logto !