Construire l'authentification Nuxt avec Logto
Apprenez à construire un flux d'authentification utilisateur avec Nuxt en intégrant le SDK Logto.
Founder
Commencer
Introduction
- Logto est une alternative open-source à Auth0 pour construire des infrastructures d'identité. Il prend en charge diverses méthodes de connexion, y compris le nom d'utilisateur, l'email, le numéro de téléphone et les connexions sociales populaires comme Google et GitHub.
- Nuxt un framework open source qui rend le développement web intuitif et puissant.
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.
Prérequis
Avant de commencer, assurez-vous d'avoir les éléments suivants :
- Un compte Logto. Si vous n'en avez pas, vous pouvez vous inscrire gratuitement.
- Environnement de développement A Nuxt et un projet.
Créer une application Logto
Pour commencer, créez une application Logto avec le type "Web traditionnel". Suivez ces étapes pour créer une application Logto :
- Connectez-vous à la Console Logto.
- Dans la barre de navigation de gauche, cliquez sur Applications.
- Cliquez sur Créer une application.
- Sur la page ouverte, trouvez la section "Web traditionnel" et localisez la carte "Nuxt".
- Cliquez sur Commencer à construire et entrez le nom de votre application.
- Cliquez sur Créer.
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.
Intégrez Logto SDK
Installation
Installez le SDK Logto via votre gestionnaire de packages préféré :
Inscrivez le module Logto
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.
Mettez en œuvre la connexion et la déconnexion
Configurer les URI de redirection
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 :
- Ajouter trois routes pour la connexion (
/sign-in), la déconnexion (/sign-out), et le callback (/callback). - Importer deux composables :
useLogtoClientetuseLogtoUser.
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.
Afficher les informations de l'utilisateur
Pour afficher les informations de l'utilisateur, vous pouvez utiliser le composable useLogtoUser(), qui est disponible sur le serveur et le client :
Point de contrôle : Exécutez l'application
Vous pouvez maintenant exécuter l'application et essayer de vous connecter/déconnecter avec Logto :
- Ouvrez l'application dans votre navigateur, vous devriez voir le bouton "Se connecter".
- Cliquez sur le bouton "Se connecter" et vous devriez être redirigé vers la page de connexion Logto.
- Après vous être connecté, vous devriez être redirigé vers l'application et vous devriez voir les données utilisateur et le bouton "Se déconnecter".
- Cliquez sur le bouton "Se déconnecter" et vous devriez être redirigé vers la page de déconnexion Logto, puis redirigé vers l'application avec un état non connecté.
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 !