Una de las características principales de un proyecto es identificar las credenciales de un usuario al momento de iniciar sesión. Azure AD, es una solución de identidad basada en la nube, que nos brinda un montón de funcionalidades para cualquier solución de identidad. En este articulo mostraremos un ejemplo de como integrar esta herramienta en un proyecto con Angular mediante la librería @azure/msal-angular.
Prerrequisitos:
- Instalar Node.js https://nodejs.org/en/ .
- Se requiere la cli angular para crear proyectos npm install -g @angular/cli
Pasos:
-Paso 1: Crear un nuevo Proyecto Angular.
Comando ---> ng new NOMBRE_PROYECTO
-Paso 2: Crear un nuevo componente.
Comando ---> ng g c NOMBRE_COMPONENTE
-Paso 3: Instalar msal angular. https://www.npmjs.com/package/@azure/msal-angular
Comando ---> npm install msal @azure/msal-angular
MSAL para Angular permite que las aplicaciones web del lado del cliente autentiquen a los usuarios mediante cuentas de trabajo y escuela (AAD) de Azure AD.
-Paso 4: Registre la aplicación Angular en Azure Portal ( https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/walkthrough-register-app-azure-active-directory ) y obtenga la identificación del cliente y la identificación del inquilino de la aplicación.
-Paso 5: agregue los detalles de configuración de Msal en el archivo app.module.ts, importe el MsalModule (import { MsalModule } from '@azure/msal-angular').
Ejecución
Inyectar el MsalService en el componente donde se ejecutara la autenticación. (import { MsalService } from '@azure/msal-angular'
)
Desde un button invocar el siguiente método loginRedirect()
Este método te deberá redireccionar al login de microsoft
Si el login es exitoso se redireccionará a la aplicacion registrada en Azure Portal
Comentarios
Azure AD permite basar la seguridad de tu empresa en la identidad del usuario, de tal forma que brinda un inicio de sesión único
Top comments (1)
Buen articulo, como feedback seria que como requisito se debio de crear alguna application a nivel de AD de azure, y dentro de la aplicacion creada registrar como cliente un SPA.