SSO de inicio de sesión único angular
La solución de inicio de sesión único (SSO) con JWT para Angular de miniOrange proporciona acceso seguro a aplicaciones Angular mediante un único conjunto de credenciales. Esto se logra utilizando tokens JSON Web Token (JWT) y se integra fácilmente con Angular, independientemente del framework o lenguaje de programación. Puede habilitar el inicio de sesión social para que sus usuarios accedan de forma segura a las aplicaciones utilizando sus redes sociales habituales, como Facebook, Twitter, Google o LinkedIn.
Con miniOrange Angular SSO, obtienes:
- Experiencia de inicio de sesión de usuario perfecta.
- Personalizaciones infinitas para sus formularios y páginas de inicio de sesión.
- Incorporación simplificada de clientes o usuarios.
Siga la guía paso a paso que se proporciona a continuación para Angular Single Sign-On (SSO):
1. Configurar Angular en miniOrange:
- Inicie sesión en la Consola de administración miniOrange.
- Vaya al Aplicaciones y haga clic en Agregar aplicación .
- In Seleccione Aplicación, selecciona JWT desde el menú desplegable de tipo de aplicación.
- En el siguiente paso, busque Angular aplicación de la lista. Si no se encuentra su aplicación, busque Aplicación JWT y podrá configurar su aplicación.
-
Puede configurar los siguientes detalles en la aplicación:
| Nombre que se ve en la pagina |
Escriba el Nombre que se ve en la pagina (es decir, el nombre de esta aplicación) |
| URL a redirigir |
Escriba el URL a redirigir (es decir, el punto final donde desea enviar/publicar su token JWT). Puede agregar varias URL de redireccionamiento separándolas con un ';'. Por ejemplo, abc.com;xyz.com
|
| ID de cliente |
El ID de cliente Se muestra en el campo de abajo. Haga clic en el icono del portapapeles para copiarlo. |
| Secreto del cliente |
Secreto del cliente Está oculto por defecto. Haga clic en el icono del ojo para revelarlo y use el icono del portapapeles para copiarlo. Esto se utiliza en el algoritmo de firma HS256 para generar la firma.
|
| Descripción (opcional) |
Añade una descripción si es necesario.
|
- Haga clic en Guardar.
- Usted será redirigido a la Políticas .
- Haga clic en el elemento Asignar grupo botón. Un nuevo Configurar la asignación de grupos Se abrirá una ventana modal.
- Asignar grupo: Seleccione los grupos que desea vincular con la aplicación. Puede seleccionar hasta 20 grupos a la vez.
- Si necesitas crear un nuevo grupo, haz clic en Agregar nuevo grupo .
- Introduzca el nombre del grupo y haga clic en Crear grupo.
- Haga clic en Siguiente.
- Asignar políticas: Agregue las políticas requeridas a los grupos seleccionados. Ingrese los siguientes detalles:
- Primer factor: Seleccione el método de inicio de sesión en el menú desplegable.
- Si selecciona Contraseña Como método de inicio de sesión, puede habilitar Autenticación de dos factores (MFA) y Autenticación adaptable, si es necesario.
- Si selecciona Sin contraseña Como método de inicio de sesión, puede habilitar Autenticación de dos factores (MFA) si es necesario.
- Si selecciona Enlace Mágico Como método de inicio de sesión, aparecen las siguientes opciones:
- Habilitar el inicio de sesión desde otras direcciones IP: Cuando está habilitada, los usuarios pueden abrir el Enlace Mágico desde una dirección IP diferente a aquella desde la que se solicitó.
- Habilitar el inicio de sesión desde otros dispositivos: Cuando está habilitada, los usuarios pueden abrir el Enlace Mágico en un dispositivo diferente al que utilizaron para solicitarlo.
- Haga clic en GuardarSe crearán políticas para todos los grupos seleccionados.
- Verá la política listada una vez que se haya agregado correctamente.
- Haga clic en Avanzado .
- Introduzca los siguientes detalles según sea necesario:
| El acceso de emergencia |
Ingrese el token de acceso que se enviará a su URL de redireccionamiento después de que un usuario inicie sesión. Este token ayuda a su aplicación a saber que el usuario tiene permiso para acceder a ciertas funciones. |
| Vencimiento del token de identificación (en minutos) |
Establezca la duración (en minutos) de la validez del token de identificación. Transcurrido este tiempo, el usuario deberá volver a iniciar sesión para obtener un nuevo token. |
| Asunto |
Elige qué información, como la dirección de correo electrónico del usuario, se usará para identificarlo en el token. Esto ayuda a tu aplicación a saber qué usuario ha iniciado sesión. |
| Algoritmo de firma |
Seleccione su algoritmo de firma en el menú desplegable. |
| La URL de cierre de sesión de su aplicación |
Introduzca la dirección web a la que deben dirigirse los usuarios después de cerrar la sesión. |
| Habilitar identidad compartida |
Esta función le permite controlar si un usuario compartido puede acceder o no a una aplicación específica. |
- Algoritmos de firma para JWT
RSA-SHA256
- Asimétrico, utiliza un conjunto de claves públicas y privadas para generar y validar la firma que se incluye en el token JWT.
- La clave privada se utiliza para generar la firma en el lado del IDP.
- La clave pública se utiliza para verificar la firma en el lado del SP.
- Proporcionamos la clave pública para esto.
HS256
- Simétrico, utiliza la misma clave secreta para generar y validar la firma.
- La clave secreta en este caso se puede configurar desde la página de configuración de la aplicación.
-
Cambiar a Opciones de inicio de sesión .
| Proveedor de identidad principal |
Seleccione la fuente de ID predeterminada en el menú desplegable de la aplicación. Si no se selecciona, los usuarios verán la pantalla de inicio de sesión predeterminada y podrán elegir su propio proveedor de identidad (IDP). [En este caso, seleccione miniOrange].
|
| Forzar autenticación |
Si habilita esta opción, los usuarios tendrán que iniciar sesión cada vez, incluso si su sesión ya existe. |
| Habilitar mapeo de usuarios |
Habilite esta opción si desea que la aplicación muestre qué usuario ha iniciado sesión cuando responde. |
| Mostrar en el panel del usuario final |
Habilite esta opción si desea mostrar esta aplicación en el panel del usuario final. |
- Navegue a Endpoints y copia los siguientes detalles:
-
URL de inicio de sesión único:
- Esta URL se utiliza para iniciar la autenticación del usuario para obtener el token JWT.
- Tome redirección_uri como uno de los parámetros de consulta.
- Después de una autenticación exitosa en el lado del IDP, se crea una sesión de usuario activa en el IDP y el usuario es redirigido a redirigir_uri con el token JWT.
-
-
URL de cierre de sesión única:
- Esta URL se utiliza para cerrar la sesión del usuario en el IDP eliminando la sesión del usuario activo.
- Tome redirección_uri como uno de los parámetros de consulta.
- Después de eliminar la sesión del usuario activo, el IDP redirige al usuario a la redirección_uri.
-
URL de respuesta para el cierre de sesión iniciado por el IdP:
- Esta URL se utiliza para iniciar el cierre de sesión en caso de que el inicio de sesión del usuario JWT haya sido iniciado por IDP [El usuario inició sesión en el panel
primero y luego inició el inicio de sesión para la aplicación desde el panel.]
- Después de cerrar la sesión del usuario en el IDP, se redirige al usuario a la página de inicio de sesión del panel de IDP.
2. Configurar SSO en Angular
- Seleccione un componente que será responsable de verificar el token JWT, preferiblemente el componente de inicio de sesión.
- Importar el JWTBuilder clase del conector jwt. Desde la ruta a la que se movió en el paso 1 de Requisitos previos.
import { JWTBuilder } from './path/to/jwt-connector';
- Puede agregar un botón en su pantalla de inicio de sesión para redirigir a la URL de SSO. Puede obtener esta URL de SSO desde el paso 1 de Configure su aplicación en miniOrange.
<button> onClick={sso}>Single Sign On</button>
function sso() {
window.location.href = window.location.href = ‘
’; //
example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A
MNTBzg2o7&redirect_uri=http://localhost:3000/login;
}
- Al hacer clic en el botón SSO el usuario será redirigido al portal miniOrange para su autenticación.
- Luego, el token JWT se devuelve a su aplicación a la URL de redireccionamiento que configuró al agregar su aplicación en miniOrange. En los siguientes pasos, verificaremos este token y recuperaremos los detalles del usuario.
- Necesitas agregar el certificado x509 que puedes obtener en el paso 1 'configura tu aplicación en miniOrange'.
- Ahora, si se verifica el token, la carga útil que consiste en los detalles del usuario se puede guardar en el almacenamiento local o serializar en una clase de usuario y el usuario ahora verificado puede ser redirigido a la pantalla de inicio de su aplicación.
3. Pruebe la configuración de SSO
Pruebe el inicio de sesión SSO en su cuenta Angular con miniOrange IdP:
Referencias externas
