DEV Community

Cover image for Autenticación con Azure Active Directory (AD)
Angel-Gabriel-QR
Angel-Gabriel-QR

Posted on • Updated on

Autenticación con Azure Active Directory (AD)

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:

  1. Instalar Node.js https://nodejs.org/en/ .
  2. 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').

Alt Text

Ejecución

Inyectar el MsalService en el componente donde se ejecutara la autenticación. (import { MsalService } from '@azure/msal-angular'
)
Alt Text

Desde un button invocar el siguiente método loginRedirect()

Alt Text

Alt Text

Este método te deberá redireccionar al login de microsoft

Alt Text

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)

Collapse
 
christian1607 profile image
Christian Altamirano Ayala

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.