Autenticación con Xamarin Forms

Antes que cualquier otra cosa necesitaremos una suscripción activa de Azure, puedes crear tu cuenta aquí: Azure Free Account.

Para esta publicación vamos a descargar un proyecto ya trabajado de mi autoria que se ha estado utilizando en el blog en Ingles, llamado Shell Demo Proyect, el cual podemos descargar de aquí.

Una vez abierto este proyecto nos vamos a la solución, click derecho y abrimos el administrador de paquetes de Nuget para la solución y buscaremos dos paquetes, el primero es System.Net.Http y lo instalaremos solo en el proyecto de Android, después buscaremos un paquete que se llama Microsoft.Azure.Mobile.Client y lo descargamos en su versión 4.0.2.

Ahora deberemos crear algunas clases para manejar la autenticación, para ello nos vamos al proyecto portable, y dentro de la carpeta modelos, agregaremos una nueva clase con el nombre de MicrosoftData.

Dentro de esta clase reemplazaremos todo el contenido por el siguiente código:

Agregaremos otra clase llamada GoogleData y reemplazaremos todo el código por lo siguiente:

Finalmente agregaremos otra clase con este nombre: FacebookData y reemplazaremos todo el código de esa clase por el siguiente:

Después de eso deberemos hacer un poco de herencia e interfaces; para ello nos dirigimos a la clase App.cs que se encuentra en el proyecto portable y agregaremos una definición de interface, exactamente después de la definición de la clase App.

Para inicializar la interfaz con implementaciones especificas de cada plataforma, agregaremos los siguientes miembros estáticos en la clase App.cs :

Eso fue toda la configuración para el proyecto portable, ahora tenemos que configurar la plataforma de Android, para ello nos vamos a la clase MainActivity y en la definición de la clase agregaremos otra clase heredada como se muestra a continuación:

Actualiza la clase MainActivity agregando el objeto MobileServiceUser y el metodo Authenticate, el cual es requerido por la interfaz IAuthenticate como se muestra acontinuación:

Actualiza el archivo AndroidManifest.xml agregando el siguiente código dentro de la etiqueta application:

Agrega el siguiente código dentro del metodo OnCreate que esta en el archivo MainActivity.cs antes de llamar el método LoadApplication():

Este código asegura que el Autenticador sea inicializado antes de que cargue la aplicación.

Reconstruye la aplicación.

En algunos casos, hay conflictos con los paquetes de soporte que se instalan y se muestran como un aviso dentro de Visual Studio, pero la aplicación fallara con esta excepción a la hora de probar nuestra aplicación. En este caso necesitas asegurarte de que todos los paquetes referenciados en el proyecto tengan la misma versión. El paquete de Azure Mobile Apps tiene una dependencia con el paquete Xamarin.Android.Support.CustomTabs con el proyecto de Android, entonces si tu proyecto usa una version nueva, deberás instalar el paquete con la versión directa para evitar conflictos.

En la solución portable, dentro de la carpeta Views, agrega una nueva ContentPage con el nombre de AzureAuthPage y reemplaza el contenido por este código:

Ve a AzureAuthPage.xaml.cs y reemplaza todo el contenido por lo siguiente:

Eso es casi todo, ahora necesitaremos configurar la autenticación en el portal de Azure y registrar nuestra aplicación en los diferentes portales de desarrollador (Facebook, Google, Microsoft).

Configuración de el Portal de Azure

Inicia sesión en el Portal de Azure y crea un servicio Web App + SQL Server, dentro de la configuración se debera ver algo así:

Para este ejemplo llene los datos de esta forma:

En la parte de monitoreo por el momento no la ocuparemos asi que tendremos que darle en deshabilitar.

Llena los datos de tu base SQl y da click en Review And Create, tendremos que esperar algunos minutos para que nuestro servicio quede levantado, una vez que el servicio este activo nos aparecera una ventana similar a la siguiente:

Daremos click en jpdauth y en la barra de la izquierda apareceran varias configuraciones, nos iremos al apartado de Authentication / Authorization, lo habilitamos y le damos en guardar.

No cierres el navegador ni tu sesión de Azure, la vamos a utilizar más adelante.

Configuración de Facebook

En otra ventana de tu navegador, dirigete al portal de desarrolladores de Facebook, inicia sesión con tus credenciales.

Si es tu primera vez en esta pagina ve al apartado de Apps, luego en Register as a Developer, y finalmente acepta las politicas y sigue los pasos de registro.

Click en My Apps y agrega una nueva.

En Display Name escribe un nombre único de tu aplicación, también debes proveer tu correo de contacto y da click en Create App Id. Esto te llevara a una nueva parte en donde podrás configurar tu aplicación de Facebook.

Dentro de la opción Facebook Login, da click en Set Up, y elige Settings que se encuentra en la parte izquierda de la ventana.

Agrega a tu aplicación un URL de redireccion con una dirección OAuth válida y da click en Save Changes.

En la parte izquierda nos dirigiremos a Settings, luego click en Basic. En el campo de App Secret click en Show, luego toma nota de esos valores, tanto el App Id como el App Secret. Usaremos estos campos mas adelante para configurar nuestra aplicación en Azure.

Retornando al portal de Azure, navegamos a nuestra aplicación, damos click en Settings > Authentication / Authorization, y asegurate de que este activa la autenticación.

Da click en el apartado de Facebook, pega el App Id y el App Secret los cuales se obtuvieron previamente, opcionalmente puedes habilitar algun Scope que necesites en tu aplicación y da click en OK.

Cuando acabes de esta configuración da click en Save.

Ahora esta lista la autenticación con Facebook. Para probar que realmente este funcionando copia y pega este URL en tu navegador:

Configuración de Google

Navega al sitio de desarroladores de Google, inicia sesión con tu cuenta, da click en Create Proyect, ponle un nombre a tu proyecto y da click en Create.

Una vez que el proyecto se creó, da click en el, desde el dashboard da click en API’s overview.

Selecciona Enable APIs and services. Busca Google+ API y seleccionalo, después habilita el servicio.

En la barra de navegación izquierda, dirigete a Credentials > OAuth consent screen, luego selecciona tu correo y ponle un nombre de producto, finalmente da click en guardar.

En el apartado de las credenciales, da click en crear credenciales > OAuth client ID.

Dentro de la ventana siguiente que saldrá, selecciona Web application.

Pega el URL de tu servicio que copiaste anteriormente al apartado de Authorized JavaScript Origins, y luego pega tu URl de redirección de tu aplicación seguido de lo siguiente: /.auth/login/google/callback

Quedará algo así:

Asegúrate de que estas usando HTTPS y da click en crear.

En la siguiente pantalla, toma nota de los valores del client ID y el client secret.

Regresando al portal de Azure, navega a tu aplicación web, da click en Settings, y luego en Authentication / Authorization.

Da click en Google, pega los valores de App ID y el App Secret, los cuales se obtuvieron anteriormente, y opcionalmente habilita los scopes que necesites o que tu aplicación requiera, luego da click en OK.

Da click en Save y ahora estarás listo para usar la autenticación con Google en tu aplicación. Para probarlo, pega la siguiente URL en tu navegador.

Felicitaciones, has configurado todo para realizar la autenticación con las tres redes sociales.

Antes de probar la aplicación, tenemos que hacer algunos cambios en nuestras llaves de los servicios de Microsoft, para ello vamos a la solución ShellDemo y abrimos el archivo llamado App.xaml.cs. Modificaremos esto {mobile-app-url} por nuestro URL de la aplicacion web, en mi caso quedara reemplazado por ésto:

https://jpdauth.azurewebsites.net.

Bien, ahora solo falta un paso más, obtener la información del usuario en caso de que la autenticación haya sido satisfactoria, si te diste cuenta en la clase MainActivity.cs, la cuál se encuentra dentro del proyecto de Android, deberas ver que hay un método llamado CurrentClient.InvokeApiAsync, y con un parámetro UserInfo. Ese será el nombre de nuestra API.

Regresando al portal de Azure y nuestra aplicación web, en la parte de Mobile, primero da click en Configuration y agrega una nueva conexión, en nombre deberas ponerle MS_TableConnectionString, no funcionará si le pones algun otro nombre, entonces en el valor deberas copiar la cadena de conexión de tu base de datos, la cuál se encuentra en Database Configurations, luego da click en Easy API’s. Se habilitará la característica.

Una vez que el servicio este habilitado, has click en agregar, y en nombre pon: UserInfo, da click en OK, y luego da click en Edit Script, finalmente reemplaza todo el contenido de ese archivo por esto:

Presiona las teclas Ctrl + S para guardar los cambios del archivo y eso es todo.

Retomando nuestro proyecto, en mi caso ShellDemo, iremos al archivo App.xaml y agregaremos después de estas líneas de código:

Este código:

Finalmente ve al archivo AzureAuthPage.xaml.cs y pon algunos breakpoints.

Ahora estamos listos para probar nuestra aplicación.

Links Relacionados

Portal de Desarrolladores de Facebook - Facebook

Portal de Desarrolladores de Google- Google

Portal de Desarrolladores de Microsoft - Microsoft

Portal de Azure - Azure

Solución Completa - ShellDemo Repo