The latest articles on DEV Community by Angel-Gabriel-QR (@angelgabrielqr). https://dev.to/angelgabrielqr https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F520876%2Fa4378b35-11be-4650-9d7a-36beeee1866b.png https://dev.to/angelgabrielqr en Angel-Gabriel-QR Wed, 25 Nov 2020 21:54:33 +0000 https://dev.to/angelgabrielqr/autenticacion-de-azure-active-directory-ad-1ac9 https://dev.to/angelgabrielqr/autenticacion-de-azure-active-directory-ad-1ac9 <p>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.</p> <h1> Prerrequisitos: </h1> <ol> <li>Instalar Node.js <a href="https://nodejs.org/en/" rel="noopener noreferrer">https://nodejs.org/en/</a> .</li> <li>Se requiere la cli angular para crear proyectos npm install -g @angular/cli</li> </ol> <h1> Pasos: </h1> <p>-Paso 1: Crear un nuevo Proyecto Angular. <br> Comando ---&gt; ng new NOMBRE_PROYECTO</p> <p>-Paso 2: Crear un nuevo componente.<br> Comando ---&gt; ng g c NOMBRE_COMPONENTE</p> <p>-Paso 3: Instalar msal angular. <a href="https://www.npmjs.com/package/@azure/msal-angular" rel="noopener noreferrer">https://www.npmjs.com/package/@azure/msal-angular</a><br> Comando ---&gt; npm install msal @azure/msal-angular</p> <p>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.</p> <p>-Paso 4: Registre la aplicación Angular en Azure Portal ( <a href="https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/walkthrough-register-app-azure-active-directory" rel="noopener noreferrer">https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/walkthrough-register-app-azure-active-directory</a> ) y obtenga la identificación del cliente y la identificación del inquilino de la aplicación.</p> <p>-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').</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv5c2q9ywm8o5qtk2ipm7.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv5c2q9ywm8o5qtk2ipm7.PNG" alt="Alt Text"></a></p> <h1> Ejecución </h1> <p>Inyectar el MsalService en el componente donde se ejecutara la autenticación. (import { MsalService } from '@azure/msal-angular'<br> )<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyrxmrmxg4pgsmur6d9sj.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyrxmrmxg4pgsmur6d9sj.PNG" alt="Alt Text"></a></p> <p>Desde un button invocar el siguiente método loginRedirect()</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fufttog4yqcmod6ouacfx.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fufttog4yqcmod6ouacfx.PNG" alt="Alt Text"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyatxpgzuga21t899g0er.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyatxpgzuga21t899g0er.PNG" alt="Alt Text"></a></p> <p>Este método te deberá redireccionar al login de microsoft</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F37b3o0h52259ga41xms4.PNG" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F37b3o0h52259ga41xms4.PNG" alt="Alt Text"></a></p> <p>Si el login es exitoso se redireccionará a la aplicacion registrada en Azure Portal</p> <h1> Comentarios </h1> <p>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 </p>