Cree autenticación Nuxt con Logto
Aprenda cómo construir un flujo de autenticación de usuario con Nuxt integrando SDK de Logto.
Founder
Empieza
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.
- Nuxt un marco de trabajo de código abierto que hace que el desarrollo web sea intuitivo y poderoso.
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.
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 Nuxt 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 "Nuxt".
- 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 Nuxt. El siguiente contenido puede ser una referencia para uso futuro.
Integra el SDK de Logto
Instalación
Instala el SDK de Logto a través de tu gestor de paquetes favorito:
Registra el módulo de Logto
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.
Implementa el 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.
Al registrar el módulo @logto/nuxt, se llevarán a cabo las siguientes acciones:
- Añadir tres rutas para iniciar sesión (
/sign-in), cerrar sesión (/sign-out) y callback (/callback). - Importar dos componentes utilizables:
useLogtoClientyuseLogtoUser.
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.
Muestra la información del usuario
Para mostrar la información del usuario, puedes usar el elemento utilizable useLogtoUser(), que está disponible tanto en el servidor como en el cliente:
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!