Mobile App: Apache Cordova Azure AD Authentication

En un post anterior os explicaba cómo se podía enviar notificaciones push a través de Azure Mobile Apps.

Además de poder enviar notificaciones push, otra característica que tiene Azure Mobile Apps y que me encanta, es el poder de autenticarte y autorizarte sobre  varios sistemas de identidad: Microsoft Account , Google, Facebook, Twitter o Azure AD.

¿Qué es y cómo funciona App Service Authentication/Authorization?

Esta característica nos ofrece una vía para poder realizar la autenticación de los usuarios en diversos sistemas de identidad sin que tengamos que realizar cambios significativos, ni realizar códigos específicos para cada identidad de autenticación, ya sea en nuestro Back-End o en Front-End en el caso de una Single Page Application.

Azure App Services utiliza federated identity, haciendo de hub de proveedores de identidad de terceros y guardando los datos necesarios de cada uno de ellos para poder realizar la autenticación. Para más información en detalle visitar: https://azure.microsoft.com/en-us/documentation/articles/app-service-authentication-overview/

¿Qué vamos a ver?

En este post vamos a ver cómo se puede realizar la autenticación de usuarios en Apache Cordova contra Azure Active Directory(Azure AD) utilizando Azure Mobile Apps.

Lo primero que debemos hacer es crear una Azure Mobile App, para ello podéis visitar, como os comentaba anteriormente, mi post sobre notificaciones push: http://www.robertbermejo.com/mobile-app-apache-cordova-push-notification/

Lo primero que haremos en activar la autenticación en nuestra Azure Mobile App mediante el portal.

selectexportsql

Una vez activada, seleccionamos la opción Azure Active Directory

selectexportsql

Nos aparecen tres opciones:

  1. Off: Opción si queremos dejar de utilizar este proveedor de identidad.
  2. Express: Nos permite configurar la aplicación en Azure AD de forma rápida y sencilla.
  3. Advanced: La aplicacion ya ha sido asignada a un Azure AD y poseemos el Client ID y Issuer URL, simplemente los introduciríamos y lo tendríamos listo.

En nuestro caso lo haremos express. Lo único que necesitamos configurar es sobre que Active Directory(AD) queremos actuar y si queremos crear una nueva aplicación en AD o si queremos utilizar una ya existente.

En nuestro caso utilizaremos el directorio predeterminado y seleccionaremos la creación de una nueva aplicación en AD.

selectexportsql

selectexportsql

Una vez creada la identidad, podemos ir a nuestro Azure AD y ver que se ha vinculado la app en este. Para ello debemos ir al portal antiguo e ir a AD sección aplicaciones.

selectexportsql

Bien, ahora necesitamos crear un proyecto de Apache Cordova en Visual Studio. Para ello, nuevamente seguiremos los pasos de mi anterior post excepto a la hora de añadir plugins, en este caso no necesitamos el plugin de push notifications, los que necesitamos son:

  • Azure Mobile Apps
  • InAppBrowser
  • Whitelist

selectexportsql

Una vez añadidos, vamos a index.js y añadimos el siguiente código dentro del método onDeviceReady:

var client = new WindowsAzure.MobileServiceClient('http://yoursite.azurewebsites.net/');
    
  client.login('aad').done(function (results) {        
          element.innerHTML = results.userId;
     }, function (err) {
            element.innerHTML = 'Error Auth: ' + err;
     });

Como veréis hemos puesto “aad” como la fuente para realizar nuestro login, esto significa que atacaremos a la configuración de Azure AD que hemos realizado anteriormente. En la siguiente tabla se muestran las opciones y valores que deberíamos poner dependiendo del proveedor que utilizásemos:

Provider SDK Provider Name OAuth Host
Azure Active Directory aad https://login.windows.net
Facebook facebook https://www.facebook.com
Google google https://accounts.google.com
Microsoft microsoftaccount https://login.live.com
Twitter twitter https://api.twitter.com

Solo nos queda un último paso que consiste en añadir un tag meta de seguridad en index.html para dar acceso a nuestro proveedor de identidad vía nuestra Mobile App.

Se debe añadir el siguiente tag:

<meta http-equiv="Content-Security-Policy" rity-Policy" content="default-src 'self'data: gap: https://login.windows.net https://yoursite.azurewebsites.net; style-src 'self'">

Donde en gap: se deberá introducir la URL del proveedor utilizado (ver tabla anterior).

En este punto ya podemos  ejecutar nuestra aplicación.

Ejecutamos la aplicación en Windows 10:

selectexportsql
Introducir el usuario y password del usuario con el que entráis en vuestro portal de Azure, que será Global Admin y automáticamente se os habrá añadido acceso a la aplicación.

Siempre podéis crear usuarios en Azure AD y darle permisos de acceso a vuestra aplicación. Aquí podéis ver como crear un usuario en Azure AD.

Una vez introducido podéis ver que ya estáis autenticados.
selectexportsql

Y así se vería en un dispositivo Android:

selectexportsql

selectexportsql

CONCLUSION

Utilizar Azure Mobile Apps como hub de autenticación nos facilita la vida a la hora de desarrollar y mantener nuestros sistemas de identidad. El objetivo es muy similar que el servicio de Push: concentrar en un solo punto las configuraciones y donde se debe atacar para realizar las operaciones.

Podéis descargar el código desde mi github:  https://github.com/bermejoblasco/MobileAuthAuth

¡Hasta la próxima!

 

 

[Total: 2    Average: 5/5]

Published by

rbermejo

Ingeniero informático y apasionado de la tecnología, sobre todo apasionado del cloud. Desarrollo mi carrera profesional en Sogeti España,SLU como .Net Architect, Team Lead, Mobility Lead & Azure Lead.

Leave a Reply

Your email address will not be published. Required fields are marked *