Apprenez comment construire un flux d'authentification utilisateur avec SvelteKit en intégrant le SDK Logto.
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.
Avant de commencer, assurez-vous d'avoir les éléments suivants :
Pour commencer, créez une application Logto avec le type "Web traditionnelle". 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 SvelteKit. 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 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.
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:
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:
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 !