Aprenda cómo construir un flujo de autenticación de usuario con Nuxt integrando SDK de Logto.
En este tutorial, le mostraremos cómo construir un flujo de autenticación de usuario con Nuxt 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 Nuxt. El siguiente contenido puede ser una referencia para uso futuro.
Instala el SDK de Logto a través de tu gestor de paquetes favorito:
En tu archivo de configuración de Nuxt (nuxt.config.ts), agrega el módulo de Logto:
La configuración mínima para el módulo es la siguiente:
Dado que esta información es sensible, se recomienda usar variables de entorno:
Ver configuración en tiempo de ejecución para más informació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.
Al registrar el módulo @logto/nuxt, se llevarán a cabo las siguientes acciones:
/sign-in), cerrar sesión (/sign-out) y callback (/callback).useLogtoClient y useLogtoUser.Estas rutas son configurables a través de logto.pathnames en las opciones del módulo, por ejemplo:
Mira el archivo de definición de tipo en el paquete @logto/nuxt para más información.
Como las páginas de Nuxt se hidratarán y se convertirán en una aplicación de una sola página (SPA) después de la carga inicial, necesitamos redirigir al usuario a la ruta de inicio de sesión o cierre de sesión cuando sea necesario.
Para mostrar la información del usuario, puedes usar el elemento utilizable useLogtoUser(), que está disponible tanto en el servidor como en el cliente:
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!