Autenticación con Google Usando Xamarin Forms. solucion a problema 403 That’s an error, disallowed_useragent

Destacado

En dias pasados mi buen amigo Alejandro Ruiz Varela me apoyo en una modificación con el proyecto que estaba desarrollando en Xamarin Forms, y que consistía en cambiar el modelo de autenticación de mi aplicación usando Google, ya que la autenticacion que se venia usando con xamarin consistia en hacer uso de un WebView para enviar la solicitud de autenticación, pero como esta forma basada en http via user Agent se considera intrusiva, google decidio descontinuarla, dejandonos solo una alternativa para esta autenticación desde XamarinForms (Xamarin.Android puede usar fragment y las apis nativas de Google Services).

Esta opción consiste en apoyarnos en el browser del dispositivo para hacer llamado a la famosa página de , una vez nos redirija nuestra aplicación a esta pagina el usuario podra validar su autenticación. El truco esta en volver al hilo de nuestra aplicación con las credenciales del usuario y el token de autorización. !Como Hacemos esto¡.

Descarga el codigo aqui

Para esto vamos a realizar los siguientes  pasos:

  1. Crear servicio para obtener informacion de Google (Token e informacion necesaria para la app del usuario que autoriza desde google el acceso).
  2. Implementar llamado a Servicio en App.xaml.cs.
  3. Implementar Deeplinking para iOS y para Android
  4. Capturar la información y persistirla en la configuracion de la aplicacion.

Manos a la obra…

1. Crear servicio para obtener información de Google

Partiendo de una estructura de proyecto Xamarin.Forms PCL, creamos dentro nuestra capa de servicios del proyecto PCL, una clase llamada GoogleService dentro de la carpeta Services.

googleAuth3

Esta clase se encargara de recibir la informacion de la autenticacion, obtener el token y administrar la informacion que necesitamos en nuesta app.

Ahora debemos generar el modelo de datos que vamos a obtener de Google, esto lo hacemos en la capa Model por medio de la Clase GoogleProfile que contiene el conjunto necesario de propiedades que necesitamos para mapear la informacion de la cuenta del usuario de Google a traves del token

googleAuth4

Por ultimo debemos implementar el ViewModel que sera el encargado de administrar la comunicacion entre nuestra vista y el servicio.

googleAuth5

2. Implementar llamado a Servicio en App.xaml.cs

Ya tenemos listo todo el manejo que haremos al momento de llamar a la autenticacion de google, ahora lo que haremos sera implementar el llamado en la clase app.xaml.cs para que desde esta clase podamos acceder tanto desde android como desde iOS. para esto creamos un metodo estatico llamado getGoogleCode(string code), el cual recibira la respuesta cuando abramos el navegador del dispositivo, extraera el token y obtendra la informacion de la cuenta de google.

public async static void getGoogleCode(string code)
 {
 try
 {
 if (code != "")
 {
 GoogleLogin.ViewModels.GoogleViewModel _vm = new GoogleLogin.ViewModels.GoogleViewModel();
 var accessToken = await _vm.GetAccessTokenAsync(code);

await _vm.SetGoogleUserProfileAsync(accessToken);
 App.UserName = _vm.GoogleProfile.DisplayName;
 string photo = _vm.GoogleProfile.Image.Url;

App.ImageUser = ImageSource.FromUri(new Uri(photo));

}
 }
 catch (Exception error)
 {
 Debug.WriteLine(error.Message);
 }
 }

Esto es todo lo que haremos desde el proyecto PCL.

Ahora vamos a los proyectos iOS y Android.

3. Implementar Deeplinking para iOS y para Android

El concepto de Deeplinking es sencillo, consiste en indicarle a la plataforma (iOS o Android) que vamos a asociar una url que se abrira desde el navegador a nuestra aplicación, es decir que cada vez que se abra una url con formato (http://miApp.com/oauth2redirect) se redirija a mi aplicacion y no hacia una url externa.

PROYECTO ANDROID

Vamos al mainActivity de nuestro proyecto android. y agregamos la siguiente  etiqueta de clase:

Con este atributo de clase estamos asociando una url a nuestra aplicacion

[IntentFilter(new[] { Intent.ActionView },Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable }, DataScheme = "http",DataHost = "leonardoromerocastro.wordpress.com", DataPath = "/oauth2redirect")]

Es muy importante modificar la propiedad LaunchMode = LaunchMode.SingleInstance en el atributo de clase [Activity] ya que esto evitara que se abran varios hilos de nuestra aplicacion impidiendo asi que tengamos el control de la respuesta de la url de google.

el atributo activity debe pasar de esto:

[Activity(Label = "GoogleAuthentication", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

a esto:

[Activity(Label = "GoogleAuthentication", Icon = "@drawable/icon",LaunchMode = LaunchMode.SingleInstance, Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

sobreescribimos el metodo OnNewIntent, para que cuando el navegador identifique la url y nos devuelva la respuesta, podamos capturar el evento y obtener la información

protected override void OnNewIntent(Intent intent)
 {
 if (intent.Data != null)
 {
 var data = intent.Data;

string queryParameter = data.GetQueryParameter("code");
 App.getGoogleCode(queryParameter);

}
 base.OnNewIntent(intent);
 }

Listo, esto es todo lo que debemos hacer para poder autenticarnos, en la ejecucion del proyecto obtendremos la informacion que necesitamos y ya podemos hacer uso de la informacion de google.

4. Capturar la información y persistirla en la configuracion de la aplicacion.

En el archivo MainPage del proyecto PCL, agregamos un boton para llamar a la url de google.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:local="clr-namespace:GoogleAuthentication"
 x:Class="GoogleAuthentication.MainPage">
 <StackLayout VerticalOptions="FillAndExpand" 
 HorizontalOptions="FillAndExpand" >
 <Label Text="Welcome to Xamarin Forms!" 
 VerticalOptions="StartAndExpand" 
 HorizontalOptions="Center" />
 <Button Text="Login con Google" VerticalOptions="Center" 
 HorizontalOptions="Center" HeightRequest="30" WidthRequest="90" BackgroundColor="Navy" Image="ic_login" TextColor="White" Clicked="Button_Clicked"></Button>
 </StackLayout>
</ContentPage>

y en el code Behind hacemos el llamado al metodo Button_Clicked

 private void Button_Clicked(object sender, EventArgs e)
 {
 var authRequest =
 "https://accounts.google.com/o/oauth2/v2/auth"
 + "?response_type=code"
 + "&scope=openid"
 + "&redirect_uri=" + GoogleServices.RedirectUri
 + "&client_id=" + GoogleServices.ClientId;
 Device.OpenUri(new Uri(authRequest));
 }

Probando la app el resultado seria el siguiente:

El pase de diapositivas requiere JavaScript.

 

Anuncios

Habilitar VS_Emulator para Visual studio 2017

Destacado

Como habilitar el emulador de android de visual studio en Visual Studio 2017

A muchos nos ha pasado tras la instalación de visual studio 2017, que en el listado de emuladores que usamos para ejecutar los proyectos android de Xamarin, no nos lista los emuladores que previamente si funcionaban en visual studio 2016.

visual_studio2017_emulator

Sigue leyendo

Instalación y configuración de entorno de trabajo Xamarin

Destacado

Para poder tener un buen entorno de trabajo necesitaras tener claros los pasos a seguir para la instalación y configuración de los diferentes componentes que hacen parte del conjunto de desarrollo Multiplataforma basado en Xamarin.

Entre ellos tenemos los siguientes componentes:

Componentes y su uso en el desarrollo

Android SDK

Es el kit de desarrollo para poder realizar aplicaciones android, en este video podemos ver una breve descripción de su uso e implementación SDK Manager