Construir autenticación SvelteKit con Logto
Aprende cómo construir un flujo de autenticación de usuario con SvelteKit integrando SDK de Logto.
Founder
Comenzar
Introducción
- Logto es una alternativa de código abierto a Auth0 para construir infraestructuras de identidad. Soporta varios métodos de inicio de sesión, incluyendo nombre de usuario, correo electrónico, número de teléfono y los inicios de sesión sociales populares como Google y GitHub.
- SvelteKit es un marco para desarrollar rápidamente aplicaciones web robustas y de alto rendimiento usando Svelte.
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.
Requisitos previos
Antes de comenzar, asegúrese de tener lo siguiente:
- Una cuenta de Logto. Si no tiene una, puede registrarse gratis.
- Entorno de desarrollo de A SvelteKit y un proyecto.
Crear una aplicación de Logto
Para comenzar, cree una aplicación de Logto con el tipo "Web tradicional". Siga estos pasos para crear una aplicación de Logto:
- Inicie sesión en la Consola de Logto.
- En la barra de navegación izquierda, haga clic en Aplicaciones.
- Haga clic en Crear aplicación.
- En la página abierta, encuentre la sección "Web tradicional" y localice la tarjeta "SvelteKit".
- Haga clic en Comenzar a construir e ingrese el nombre de su aplicación.
- Haga clic en Crear.
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.
Integra con Logto SDK
Instalación
Instala Logto SDK a través de tu administrador de paquetes favorito:
Añade gancho Logto
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.
Implementar inicio y cierre de sesión
Configurar URIs de redirección
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:
Mostrar información del usuario
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:
Punto de control: Ejecuta la aplicación
Ahora puede ejecutar la aplicación e intentar iniciar/cerrar sesión con Logto:
- Abra la aplicación en su navegador, debería ver el botón "Iniciar sesión".
- Haga clic en el botón "Iniciar sesión" y debería ser redirigido a la página de inicio de sesión de Logto.
- Después de iniciar sesión, debería ser redirigido de vuelta a la aplicación y debería ver los datos del usuario y el botón "Cerrar sesión".
- Haga clic en el botón "Cerrar sesión" y debería ser redirigido a la página de cierre de sesión de Logto y luego redirigido de vuelta a la aplicación con un estado no iniciado.
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!