![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/07\/MSAL-la-nueva-librer\u00eda-de-autenticaci\u00f3n-de-Azure-AD.jpg\")
<\/p>\n<\/p>\n
Desde hace mucho tiempo, para los desarrollos que requer\u00edan de autenticaci\u00f3n contra el Azure Active Directory<\/strong> se hac\u00eda uso de la librer\u00eda ADAL (de la que hemos hablado en multitud de ocasiones<\/a>).\u00a0\u00a0 Sin embargo, Microsoft anunci\u00f3 un nuevo endpoint de autenticaci\u00f3n con una finalidad en la que a\u00f1ade novedades importantes que trataremos de desgranar en este art\u00edculo.<\/p>\n Es decir, identificador de recursos o AppID URI: https:\/\/graph.windows.net\/<\/p>\n Los \u00e1mbitos, o oAuth2Permissions: Directory.Read, Directory.Write, etc. Todos estos cambios provocaron que la librer\u00eda ADAL se quedara obsoleta. Desde el equipo de identidad de Microsoft optaron por la reescritura total de la librer\u00eda para adaptarse a los nuevos requerimientos. Esta librer\u00eda se llama MSAL<\/strong> y desde el anuncio en el Build el pasado mayo<\/a> ya se puede utilizar en nuestros desarrollos sin ning\u00fan problema.<\/p>\n En este art\u00edculo desgranaremos c\u00f3mo empezar a utilizarla en los\u00a0 desarrollos en ReactJS y veremos todo lo que debemos\u00a0 realizar desde el FrontEnd. En el caso de que necesit\u00e9is hacer uso en C# dispon\u00e9is de este art\u00edculo que se p\u00fablic\u00f3 en la revista Compartimoss<\/a> a cargo de Luis Ma\u00f1ez.<\/a><\/p>\n Requerimientos previos\u00a0<\/strong><\/p>\n En\u00a0 toda aplicaci\u00f3n en JS\/TS\u00a0 bastar\u00eda con a\u00f1adir la dependencia de MSAL en el fichero package.json :<\/p>\n Para el tema de autenticar nuestra aplicaci\u00f3n vamos a crear un Higher Order Component(HOC) en React. Un HOC es una funci\u00f3n que como entrada tiene un componente, y como salida de la misma, un nuevo componente. Este comportamiento es relativamente com\u00fan dentro de los desarrollos en React.<\/p>\n En este ejemplo \u00bfqu\u00e9 sentido tiene tener un HOC para la autenticaci\u00f3n? Al encapsular la autenticaci\u00f3n en un componente podemos ceder la responsabilidad de la autenticaci\u00f3n a este componte. Es decir, este HOC\u00a0 se encargar\u00e1 de ver si el usuario est\u00e1 autenticado o no en la aplicaci\u00f3n. En caso de que est\u00e9 autenticado, le mostrar\u00e1 el componente que quiere visualizar, y en caso de que no est\u00e9 autenticado, se le pedir\u00e1 al usuario que introduzca sus credenciales. De esta forma se evitar\u00e1 que el usuario contin\u00fae con la aplicaci\u00f3n hasta que finalmente le de un error porque no tiene permisos para realizar determinada acci\u00f3n.<\/p>\n Antes de meternos en faena, vamos a ver qu\u00e9 caracter\u00edsticas tiene MSAL, qu\u00e9 opciones nos proporciona y c\u00f3mo empezar a utilizarla. Al igual que hac\u00edamos con ADAL, tenemos que tener un fichero de configuraci\u00f3n en el que le indicaremos qu\u00e9 opciones necesitamos. Aqu\u00ed est\u00e1n todas las opciones que se soportan hasta ahora.<\/p>\n No es necesario que incluyamos todas estas opciones. Realmente, las \u00fanicas indispensables son las opciones de AuthOptions. Para una primera toma de contacto se podr\u00eda hacer uso de un fichero de configuraci\u00f3n similar al siguiente.<\/p>\n Una vez tenemos el objeto msalInstance creado, tendremos que ver en qu\u00e9 estado est\u00e1. Para ello disponemos de una serie de m\u00e9todos en los que podemos saber en cada momento el estado en que se encuentra la autenticaci\u00f3n. Por un lado, podemos ver el usuario que est\u00e1 autenticado con el m\u00e9todo msalInstance.getAccount(). Tambi\u00e9n podemos redirigir a la p\u00e1gina de login invocando al m\u00e9todo msalInstance.loginRedirect({}) o bien mostrarlo en un Popup. En definitiva, tenemos multitud de m\u00e9todos que nos aportan mucho m\u00e1s control sobre la misma.<\/p>\n Junto con estos m\u00e9todos m\u00e1s simples, tambi\u00e9n se incluyen la interacci\u00f3n de la librer\u00eda cuando pierde el contexto, debido a que est\u00e1 en la propia p\u00e1gina de Microsoft autenticando. Disponemos de m\u00e9todos para saber el estado de la autenticaci\u00f3n y el resultado de la misma. Partiendo de este supuesto mostramos el siguiente componente de ejemplo :<\/p>\n Ahora bien como podemos usar esta autenticaci\u00f3n, pues antes de cargar un componente si invocamos a la funci\u00f3n withAuth tendremos la funcionalidad del login. Quedar\u00eda de la siguiente forma:<\/p>\n El funcionamiento ser\u00eda el siguiente:<\/p>\n Una vez ya vemos c\u00f3mo podemos empezar a utilizar MSAL, la siguiente pregunta que nos surge es si debemos migrar nuestros desarrollos de ADAL a MSAL<\/strong>… La respuesta es que es MUY recomendable hacerlo, principalmente porque MSAL cumple mejor con los est\u00e1ndares de OpenIdConnect y oAuth2.<\/p>\n Desde la propia documentaci\u00f3n oficial de Microsoft indica los pasos que hay que realizar para migrar tanto de .NET como desde JS en los siguientes enlaces: Happy codding \ud83d\ude42<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" Desde hace mucho tiempo, para los desarrollos que requer\u00edan de autenticaci\u00f3n contra el Azure Active Directory se hac\u00eda uso de la librer\u00eda ADAL (de la que hemos hablado en multitud de ocasiones).\u00a0\u00a0 Sin embargo, Microsoft anunci\u00f3 un nuevo endpoint de … Continue reading
\nEn primer lugar, se a\u00f1adi\u00f3 soporte para m\u00e1s plataformas de identidad compatibles<\/strong>. El punto de conexi\u00f3n v1.0 solo permite iniciar sesi\u00f3n en la aplicaci\u00f3n con cuentas profesionales y educativas (Azure AD)<\/em>. El punto de conexi\u00f3n de plataforma de identidad de Microsoft permite trabajo y cuentas educativas de Azure AD y cuentas personales de Microsoft (MSA)<\/em>, como hotmail.com, outlook.com y msn.com, para iniciar sesi\u00f3n.<\/p>\n![\"Diferencias](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2019\/07\/msalv1-1024x228.png\")
\nOtra de las mejoras que se incorpor\u00f3 fueron\u00a0 los permisos sobre las API. <\/strong>En la primera versi\u00f3n se ped\u00edan permisos sobre el \u00abresource\u00bb y en la versi\u00f3n v2 es sobre el \u00abscope\u00bb.<\/p>\n
\nEstos son cambios internos que se hacen tanto para pedir los permisos impl\u00edcitos, como en la generaci\u00f3n del token para poder acceder, pero que hacen que la aplicaci\u00f3n sea m\u00e1s segura y cumpla con los est\u00e1ndares de OpenID y Oauth2.0.<\/p>\nC\u00f3mo empezar a utilizarla en nuestros desarrollos<\/strong><\/h2>\n
\n
Manos a la obra\u00a0<\/strong><\/h3>\n
\r\n "msal": "1.0.2"\r\n<\/pre>\n
\r\ntype storage = "localStorage" | "sessionStorage";\r\n\/\/ Protocol Support\r\nexport type AuthOptions = {\r\n clientId: string;\r\n authority?: string;\r\n validateAuthority?: boolean;\r\n redirectUri?: string | (() => string);\r\n postLogoutRedirectUri?: string | (() => string);\r\n navigateToLoginRequestUrl?: boolean;\r\n};\r\n\/\/ Cache Support\r\nexport type CacheOptions = {\r\n cacheLocation?: CacheLocation;\r\n storeAuthStateInCookie?: boolean;\r\n};\r\n\/\/ Library support\r\nexport type SystemOptions = {\r\n logger?: Logger;\r\n loadFrameTimeout?: number;\r\n tokenRenewalOffsetSeconds?: number;\r\n};\r\n\/\/ Developer App Environment Support\r\nexport type FrameworkOptions = {\r\n isAngular?: boolean;\r\n unprotectedResources?: Array<string>;\r\n protectedResourceMap?: Map<string, Array<string>>;\r\n};\r\n\/\/ Configuration Object\r\nexport type Configuration = {\r\n auth: AuthOptions,\r\n cache?: CacheOptions,\r\n system?: SystemOptions,\r\n framework?: FrameworkOptions\r\n};\r\n<\/pre>\n\r\nexport const msalConfig = {\r\n authority: process.env.REACT_APP_MSALAUTHORITY,\r\n clientId: process.env.REACT_APP_MSALCLIENTID\r\n };\r\n\r\nexport const msalInstance = new UserAgentApplication({\r\n auth: msalConfig\r\n});\r\n<\/pre>\nCreando el HOC<\/strong><\/h2>\n
\r\nimport * as React from 'react';\r\nimport { msalConfig } from '..\/msal\/msalConfig';\r\nimport { LoginError,LoginInProgress } from '..\/login';\r\nimport { UserAgentApplication, AuthError } from 'msal';\r\n\r\nexport const msalInstance = new UserAgentApplication({\r\n auth: msalConfig\r\n});\r\n\r\ninterface IState {\r\n authenticated: boolean;\r\n renewIframe: boolean;\r\n errorMessage: string;\r\n hasError: boolean;\r\n}\r\n\r\nexport function withAuth<TOriginalProps>(\r\n WrappedComponent: React.ComponentClass<TOriginalProps> | React.StatelessComponent<TOriginalProps>\r\n): React.ComponentClass<TOriginalProps> {\r\n return class Auth extends React.Component<TOriginalProps, IState> {\r\n constructor(props: TOriginalProps) {\r\n super(props);\r\n this.state = {\r\n authenticated: false,\r\n renewIframe: false,\r\n hasError: false,\r\n errorMessage: null\r\n };\r\n }\r\n\r\n public componentWillMount(): void { \r\n msalInstance.handleRedirectCallback(() => { \/\/ on success\r\n this.setState({\r\n authenticated: true\r\n }); \r\n }, (authErr: AuthError, accountState: string) => { \/\/ on fail\r\n console.log(authErr);\r\n this.setState({\r\n hasError: true,\r\n errorMessage: authErr.errorMessage\r\n });\r\n });\r\n\r\n if (msalInstance.isCallback(window.location.hash)) {\r\n this.setState({\r\n renewIframe: true\r\n });\r\n return;\r\n } \r\n\r\n if (!msalInstance.getAccount()) {\r\n msalInstance.loginRedirect({});\r\n return;\r\n } else {\r\n this.setState({\r\n authenticated: true\r\n }); \r\n }\r\n }\r\n\r\n public render(): JSX.Element {\r\n if (this.state.renewIframe) {\r\n return <div>hidden renew iframe - not visible<\/div>;\r\n }\r\n if (this.state.authenticated) {\r\n return <WrappedComponent {...this.props} \/>;\r\n }\r\n if (this.state.hasError) {\r\n return <LoginError message={this.state.errorMessage} \/>;\r\n }\r\n return <LoginInProgress \/>;\r\n } \r\n };\r\n}\r\n<\/pre>\n\r\nexport const routes =\r\n <Layout>\r\n <Route exact path='\/' strict={false} component={withAuth(HomeContainer)} \/>\r\n <\/Layout>\r\n<\/pre>\n\n
Siguientes pasos\u00a0<\/strong><\/h3>\n
\n– https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory\/develop\/msal-compare-msal-js-and-adal-js
\n-https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory\/develop\/msal-net-migration<\/p>\n