Aprende cómo construir un flujo de autenticación de usuario con Angular integrando la biblioteca cliente de OIDC para Angular.
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.
Antes de comenzar, asegúrese de tener lo siguiente:
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:
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.
Instala el núcleo del SDK de Logto JS y la biblioteca cliente de OIDC para Angular:
En tu proyecto de Angular, agrega el proveedor de autenticación en tu app.config.ts:
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:
El OidcSecurityService proporciona una manera conveniente de suscribirse al estado de autenticación:
Y úsalo en el template:
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!