Mobile App: Apache Cordova Azure AD Authentication
07 Jul 2016En 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.
Una vez activada, seleccionamos la opción Azure Active Directory
Nos aparecen tres opciones:
- Off: Opción si queremos dejar de utilizar este proveedor de identidad.
- Express: Nos permite configurar la aplicación en Azure AD de forma rápida y sencilla.
- 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.
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.
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
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 |
| https://www.facebook.com | ||
| https://accounts.google.com | ||
| Microsoft | microsoftaccount | https://login.live.com |
| 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:
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.
Y así se vería en un dispositivo Android:
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!