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¡.
Para esto vamos a realizar los siguientes pasos:
- Crear servicio para obtener informacion de Google (Token e informacion necesaria para la app del usuario que autoriza desde google el acceso).
- Implementar llamado a Servicio en App.xaml.cs.
- Implementar Deeplinking para iOS y para Android
- 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.
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
Por ultimo debemos implementar el ViewModel que sera el encargado de administrar la comunicacion entre nuestra vista y el servicio.
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:
