Aprende cómo construir un flujo de autenticación de usuario con SvelteKit integrando SDK de Logto.
En este tutorial, le mostraremos cómo construir un flujo de autenticación de usuario con SvelteKit integrando el SDK de Logto. El tutorial utiliza TypeScript como el lenguaje de programación.
Antes de comenzar, asegúrese de tener lo siguiente:
Para comenzar, cree una aplicación de Logto con el tipo "Web tradicional". Siga estos pasos para crear una aplicación de Logto:
Luego debería ver una guía interactiva que lo guía a través del proceso de integración del SDK de Logto con su aplicación SvelteKit. El siguiente contenido puede ser una referencia para uso futuro.
Instala Logto SDK a través de tu administrador de paquetes favorito:
En tu archivo hooks.server.ts, añade el siguiente código para inyectar el gancho Logto en tu servidor:
Dado que esta información es sensible, se recomienda usar variables de entorno:
Si tienes varios ganchos, puedes usar la función helper sequence() para encadenarlos:
Ahora puedes acceder al cliente Logto en el objeto locals. Para TypeScript, puedes añadir el tipo a app.d.ts:
Hablaremos del objeto user más adelante.
Cambie a la página de detalles de la aplicación de la Consola de Logto. Agregue una URI de redirección http://localhost:3000/callback.
URI de redirección es un concepto de OAuth 2.0 que implica que la ubicación debe redirigirse después de la autenticación.
De manera similar, agregue http://localhost:3000/ a la sección "URI de redirección después de cerrar sesión".
URI de redirección después de cerrar sesión es un concepto de OAuth 2.0 que implica que la ubicación debe redirigirse después de cerrar sesión.
Luego haga clic en "Guardar" para guardar los cambios.
Vuelve a tu aplicación, en la página donde quieres implementar inicio y cierre de sesión, define las siguientes acciones:
Luego usa estas acciones en tu componente Svelte:
Para mostrar la información del usuario, puedes inyectar el objeto locals.user en el layout, haciéndolo disponible para todas las páginas:
En tu componente Svelte:
Ahora puede ejecutar la aplicación e intentar iniciar/cerrar sesión con Logto:
Si encuentra algún problema durante la integración, no dude en unirse a nuestro servidor de Discord para chatear con la comunidad y el equipo de Logto!