Crear aplicación web con autenticación en Azure Active Directory

En esta ocasión vamos a ver un sencillo ejemplo para crear una aplicación web ASP.NET con Visual Studio 2015 la cual realiza la autenticación de los usuarios directamente en Azure Active Directory.

Primero, iniciamos Visual Studio 2015 y creamos un nuevo proyecto

En la parte de plantillas seleccionamos Cloud y elegimos la plantilla Aplicación web ASP.NET, le ponemos un nombre al proyecto, en mi caso CloudApp  y luego hacemos clic en Aceptar

Se abrirá la ventana que nos permite crear el nuevo proyecto, de las varias plantillas existentes, vamos a elegir Web Forms, si observamos en la parte derecha de la ventana veremos el botón Cambiar autenticación y también podemos notar que debajo del mismo se encuentra el texto Autenticación: Cuentas de usuario individuales

Hacemos clic en el botón Cambiar autenticación y se abrirá la siguiente ventana:

Como podemos apreciar en la imagen anterior, tenemos varias opciones para realizar la autenticación, por defecto viene marcada la opción Cuentas de usuario individuales, pero en nuestro caso marcaremos la opción Cuentas profesionales y educativas esta es la opción que se utiliza para realizar autenticación con Azure Active Directory como bien podemos leer en la descripción del cuadro de diálogo.

En la imagen anterior, el paso número 1 es seleccionar en dónde realizaremos la autenticación, ya que existe la posibilidad de elegir Nube o Local, en nuestro caso elegimos Nube: organización única

En el paso número 2 debemos elegir nuestro dominio, en mi caso tengo un nombre de dominio personalizado, de lo contrario debe aparecer el nombre de dominio terminado en .onmicrosoft.com

Por último, en el paso número 3 tenemos la opción de marcar la casilla de verificación Leer datos del directorio para el caso en que la aplicación necesite consultar el directorio utilizando la API Graph.

Podemos observar que el texto bajo el botón Cambiar autenticación ha cambiado

 También podemos notar la posibilidad de desplegar como aplicación web o en una máquina virtual de Azure

En nuestro caso haremos el despliegue como Aplicación web

Con esto ya tenemos lo necesario, ahora hacemos clic en Aceptar

En la ventana que se abre, nos solicita configurar la aplicación web de Microsoft Azure, debemos indicar el nombre que llevará la aplicación, se agrega el dominio .azurewebsites.net al final del nombre que elijamos, los datos restantes son la suscripción, región y si usamos un servidor de base de datos, en la siguiente imagen se muestra en detalle. Al finalizar hacemos clic en Crear

Se abrirá la ventana de Publicación web donde veremos el método de publicación, el servidor y su puerto, nombre del sitio, usuario, contraseña y URL. Aquí lo único que debemos hacer es clic en el botón Validar conexión para comprobar que la conexión se realice de forma exitosa. Hacemos clic en Siguiente

En la siguiente ventana verificamos que esté marcada la opción Habilitar la autenticación de organización dejamos el resto de opciones como están y hacemos clic en Siguiente

La siguiente, es la última pantalla, simplemente nos permite hacer una visualización de todos los archivos del proyecto, en este caso lo omitiremos y solamente haremos clic en el botón Publicar 

Esperamos....

Al finalizar se abrirá el navegador y solicitará credenciales de Azure para continuar

Después de proporcionar las credenciales saldrá un mensaje que indicando que la aplicación solicita permiso para leer datos de perfil y data del directorio, hacemos clic en Aceptar

Oops! algo salió mal

No cargó el sitio, y en su lugar obtuve un error, no desesperar, vamos al portal de Azure a revisar.

Vemos que efectivamente se encuentra desplegada la aplicación en Azure

Ingresamos a la aplicación haciendo clic sobre el nombre y en las opciones de la parte superior hacemos clic en Configurar

Bajamos por las opciones hasta encontrar la parte de autenticación o autorización y hacemos clic en la franja verde, que como vemos indica que nos llevará al nuevo portal.

Una vez en el nuevo portal hacemos clic en Activado

En la parte de proveedores de autenticación que se despliega seleccionamos Azure Active Directory Sin configurar

Y luego en modo de administración activamos rápido. dejamos la opción Crear nueva aplicación de AD dejaré el mismo nombre para la aplicación y hacemos clic en Aceptar

Al final debe quedar de la siguiente manera:

Hacemos clic en la opción Guardar de la parte superior

Bien, luego de hacer lo anterior, volvemos a intentar ingresar a la aplicación, y luego de escribir las credenciales de un usuario creado en Azure AD vemos que en efecto cargó la aplicación.

Bien, y esto es todo por hoy, espero esta información les sea de utilidad. Un saludo.