Azure AD (II): desarrollo de aplicaciones web para Azure AD

Azure Active Directory permite integrar servicios de autenticación basados en la nube con nuestras aplicaciones. En el post introductorio de Azure Active Directory vimos las características principales de este servicio y cómo registrar aplicaciones para que puedan utilizarlo. En este post veremos cómo desarrollar una aplicación web que integre el servicio de autenticación de Azure AD.  Para este ejemplo usaremos .Net, pero hay disponible documentación referente a cómo a hacerlo en diversos lenguajes.

Para poder conectar una aplicación con un directorio activo debemos registrarla en él. Si ya tenemos una aplicación podemos registrarla a través del portal de Azure o si vamos a crear una nueva al crear el proyecto en Visual Studio tenemos la opción de registrarla en el directorio.  En nuestro caso crearemos una aplicación nueva que registraremos en el directorio con el asistente de Visual Studio.

Lo primero que vamos a hacer es crear una aplicación web ASP.NET desde Visual Studio que desplegaremos en Azure como una Web App.

2AD2

 

Pulsamos en OK y se nos abrirá otra ventana para elegir la plantilla, vamos a seleccionar MVC. En la parte derecha de la ventana se habilitará la opción Change Authentication, pulsamos sobre ella.

2AD3

 

Para que la autenticación se realice contra nuestro directorio activo debemos seleccionar Work and School Accounts.

2AD4

 

Vemos que en el dominio nos aparece ya por defecto el dominio de nuestro directorio activo. Si tenemos varios directorios y no aparece el correcto podemos cambiarlo. Para consultar el dominio de nuestro directorio activo accedemos al portal clásico de Azure, buscamos el directorio que queremos conectar y pulsamos en dominios.

2AD5

 

Una vez hemos introducido el dominio de nuestro directorio activo pulsamos en OK y volvemos a la ventana anterior y vemos que ya tenemos configurado el sistema de autenticación.

2AD6

 

Como hemos comentado anteriormente alojaremos nuestra aplicación en Azure como una Web App, por lo que debemos marcar el check de Host in the cloud. 2AD7

 

Al pulsar en OK se nos abrirá la ventana de configuración de la Web App que se va a crear en Azure.

Lo primero que tenemos que hacer es introducir un nombre para la Web App. Ese nombre formará parte de la dirección URL que se le asignará a la web.

Hemos de seleccionar también la suscripción de Azure que queremos usar.

A continuación, hemos de seleccionar un grupo de recursos y un App Service Plan. Los grupos de recursos son agrupaciones lógicas de servicios de Azure. Es recomendable cuando creamos un servicio meter en un grupo de recursos todo lo relacionado con ese servicio. Por ejemplo, si creamos una página web que utiliza una base de datos SQL pondríamos en el mismo grupo de recursos la Web App y la base de datos. En este caso crearemos un nuevo grupo de recursos. El App Service Plan es el conjunto de características de las máquinas que van a dar servicio a nuestra aplicación. Crearemos un plan de servicios nuevo.

2AD8

 

Al pulsar en Create se creará el proyecto en Visual Studio con la configuración necesaria para poder publicar la web directamente en Azure y con los datos necesarios para comunicarse con el directorio activo.

Si vamos al portal de Azure y accedemos a nuestro directorio vemos que se ha registrado la aplicación en el apartado de “aplicaciones”.

2AD10
Ahora ya tenemos nuestra aplicación conectada con el directorio activo.

Vamos a revisar el proyecto para ver qué modificaciones se han hecho sobre un proyecto normal de ASP.NET MVC que no tiene la autenticación configurada para usar el directorio activo. La autenticación se realizará usando OpenID Connect.

Si abrimos el fichero Web.config vemos que tenemos los datos referentes al directorio.

2AD9

 

Si vamos a las referencias del proyecto vemos que tenemos referencias a varios paquetes OWIN. OWIN es el middleware que usaremos para la autenticación mediante OpenID Connect.

2AD11

 

Si miramos los archivos de código vemos que se han creado dos archivos, Startup.cs. y Startup.Auth.cs.

2AD12

 

En Startup.cs encontramos un método de configuración que recibe un objeto de tipo IAppBuilder y llama a un método ConfigureAuth. Esto permite configurar los componentes de OWIN.

2AD13

 

El método ConfigureAuth se encuentra en el archivo Startup.Auth.cs. A partir de los parámetros que hemos introducido en el fichero Web.config se establece la autenticación usando OpenID Connect.

2AD14

 

Si abrimos el fichero AccountController.cs, vemos que el login está configurado para usar OpenID Connect, no es el método de login habitual que encontraríamos en un proyecto de ASP.NET.

2AD15

 

Ya tenemos la aplicación configurada para conectarse a nuestro directorio activo de Azure y realizar la autenticación de usuarios a través de OpenID Connect.

Si ejecutamos el proyecto vemos que nos redirige a la página de login (login.microsoftonline.com) que hemos establecido en el fichero Web.config.

2AD16

 

Para poder acceder a la aplicación necesitamos ser un usuario registrado en el directorio activo para esta aplicación. Vamos a abrir el portal de Azure para dar de alta un usuario.

Lo primero que haremos es darlo de alta en el directorio.

2AD17

 

Al pulsar en Agregar usuario se nos abrirá el asistente de creación de usuarios. Seleccionamos Nuevo usuario de la organización. También podríamos dar de alta un usuario con una cuenta de Microsoft, proveniente de otro directorio activo o de otra organización colaboradora.

2AD18

 

Le damos un nombre de usuario y pulsamos en la flecha para acceder a la siguiente pantalla.

2AD19

 

Introducimos los datos del usuario y pulsamos de nuevo en la flecha. Seleccionamos obtener una contraseña temporal y tomamos nota de la misma.

Ahora que ya tenemos dado de alta el usuario en el directorio vamos a asignarlo a la aplicación. Para ello vamos al apartado de aplicaciones y seleccionamos nuestra aplicación.

En el apartado de usuarios vemos que nos sale el nuevo usuario y la posibilidad de asignarlo a la aplicación.

2AD20

 

Una vez lo hemos asignado ya podremos acceder a la aplicación usando el nombre de usuario y la contraseña.

Volvemos a Visual Studio y ejecutamos nuestra aplicación. Cuando aparece la ventana de login introducimos los datos del usuario y veremos que podemos acceder a la aplicación.

La contraseña generada es solo de uso temporal por lo que nos pedirá que la cambiemos al intentar acceder.

2AD21

Ahora ya podemos publicar nuestra web.

Para ello pulsamos sobre el proyecto con el botón derecho y seleccionamos publish. Una vez publicada debemos hacer unos cambios en el directorio activo y en el código para que la URL ya no sea la de localhost sino la URL asignada a la aplicación.

Para ello abrimos el portal y vamos a la parte de aplicaciones web.

2AD22

 

Seleccionamos la aplicación que acabamos de crear y en el panel buscamos la URL. La copiamos.

2AD23

 

Vamos al directorio activo y entramos en nuestra aplicación. Vamos al apartado de configurar.

En el campo URL de inicio de sesión copiamos la URL de la página.

2AD24

 

Más abajo en la parte de Inicio de Sesión Único cambiamos también la URL de respuesta por nuestra URL.

2AD26

 

Guardamos y vamos a Visual Studio. En el fichero Web.config hemos de cambiar también la dirección de retorno cuando se cierra sesión.

2AD25

 

Volvemos a publicar la aplicación y ya está lista para funcionar usando nuestro directorio activo.

Puedes encontrar más información de cómo desarrollar para Azure AD en distintos lenguajes en la página de Azure.

 

Beatriz García Roces
Technical Evangelist Intern
@BeRoces