Construire l'authentification SvelteKit avec Logto
Apprenez comment construire un flux d'authentification utilisateur avec SvelteKit 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.
- SvelteKit est un cadre pour développer rapidement des applications web robustes et performantes en utilisant Svelte.
Dans ce tutoriel, nous allons vous montrer comment créer un flux d'authentification utilisateur avec SvelteKit 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 SvelteKit et un projet.
Créer une application Logto
Pour commencer, créez une application Logto avec le type "Web traditionnelle". 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 traditionnelle" et localisez la carte "SvelteKit".
- 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 SvelteKit. Le contenu suivant peut être une référence pour une utilisation future.
Intégrer avec le SDK Logto
Installation
Installez le SDK Logto via votre gestionnaire de packages préféré:
Ajoutez le crochet Logto
Dans votre fichier hooks.server.ts, ajoutez le code suivant pour injecter le crochet Logto dans votre serveur:
Comme ces informations sont sensibles, il est recommandé d'utiliser des variables d'environnement:
Si vous avez plusieurs crochets, vous pouvez utiliser la fonction d'aide sequence() pour les chaîner:
Maintenant, vous pouvez accéder au client Logto dans l'objet locals. Pour TypeScript, vous pouvez ajouter le type à app.d.ts:
Nous discuterons de l'objet user plus tard.
Mettre 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.
Retournez à votre application, dans la page où vous voulez implémenter la connexion et la déconnexion, définissez les actions suivantes:
Ensuite, utilisez ces actions dans votre composant Svelte:
Afficher les informations de l'utilisateur
Pour afficher les informations de l'utilisateur, vous pouvez injecter l'objet locals.user dans la mise en page, le rendant ainsi disponible pour toutes les pages:
Dans votre composant Svelte:
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 !