Construir autenticación en Angular con Logto
Aprende cómo construir un flujo de autenticación de usuario con Angular integrando la biblioteca cliente de OIDC para Angular.
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.
- Angular es un marco de desarrollo web creado y mantenido por Google.
En este tutorial, le mostraremos cómo construir un flujo de autenticación de usuario con Angular 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 An Angular y un proyecto.
Crear una aplicación de Logto
Para comenzar, cree una aplicación de Logto con el tipo "Aplicación de una sola página". 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 "Aplicación de una sola página" y localice la tarjeta "Angular".
- 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 Angular. El siguiente contenido puede ser una referencia para uso futuro.
Integrar Logto en tu proyecto
Instalación
Instala el núcleo del SDK de Logto JS y la biblioteca cliente de OIDC para Angular:
Configurar la aplicación
En tu proyecto de Angular, agrega el proveedor de autenticación en tu app.config.ts:
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.
En el componente donde deseas implementar inicio y cierre de sesión (por ejemplo, app.component.ts), inyecta el OidcSecurityService y úsalo para iniciar y cerrar sesión.
Luego, en el template, agrega botones para iniciar y cerrar sesión:
Suscribirse al estado de autenticación y mostrar información del usuario
El OidcSecurityService proporciona una manera conveniente de suscribirse al estado de autenticación:
Y úsalo en el template:
Punto de control: Ejecutar 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!