Autenticación en dispositivos móviles: WebAuthenticationBroker

A día de hoy, no son pocas las aplicaciones que nos ofrecen iniciar sesión mediante Facebook o Twitter además de nuestro correo electrónico de toda la vida. Esto es debido a que damos al usuario una sensación mayor de seguridad, al realizarse el login mediante un proveedor de confianza, ya que los usuarios son más propensos a insertar sus datos en estos servicios de autenticación antes que en una interfaz desarrollada por un desarrollador. Además, podemos aprovechar que autenticamos en un servicio de este tipo para añadir nuevas funcionalidades.

Uno de los puntos que debemos tener en cuenta antes de empezar con la implementación es que deberemos hacer uso del método AuthenticateAndContinue[LG1] (), el cual viene de la clase WebAuthenticationBroker. Dicho método permite suspender nuestra aplicación temporalmente mientras lleva a cabo otra acción, para que al volver a arrancar la app esta se inicie en la página donde nos encontrábamos previamente con la información solicitada durante el login. Esto es debido a que nuestra aplicación se va a cerrar temporalmente, quedando en un segundo plano, para dar lugar a la ventana de login de Facebook o Twitter. Al no poder garantizarse que nuestra aplicación siga abierta una vez completemos este proceso, ya que hay dispositivos con poca memoria RAM, debemos realizar este proceso de forma que estemos preparados ante un posible cierre.

WebAuthenticationBroker con Facebook

Para empezar, deberemos registrar nuestra aplicación en la página de developers de Facebook, gracias a lo cual recibiremos una serie de claves que nos serán necesarias posteriormente.

Una vez le damos a añadir una nueva aplicación, deberemos clickar sobre “Advanced setup” e introducir los datos requeridos de nuestra aplicación.

Una vez completado este pequeño formulario, nos encontraremos con el panel de administración de nuestra aplicación, en la cual se encuentran las claves que debemos añadir en nuestra aplicación y el resto de la configuración disponible.

Tras esto deberemos indicar a esta aplicación cual es la dirección del callback tras la solicitud, pudiendo poner en este apartado la url de nuestro propio blog en Azure. Esto se lleva a cabo en el apartado de “Settings”, accediendo a la pestaña de “Advanced” y ahí en el apartado de “Valid OAuth redirect URIs”, una vez hayamos activado la característica de Client OAuth Login.

Una vez hemos realizado estos pasos, ya tenemos todo lo necesario para emplear la autenticación mediante Facebook.

Empezaremos formando el cuerpo de la petición. Para ello debemos indicar el ID de la aplicación que acabamos de registrar en la página de Facebook, la dirección que hemos indicado y los permisos a los cuales queremos tener acceso.

  1: private void LoginFacebookExecute()
  2:         {
  3:             string appID = "YOUR_CONSUMER_KEY";
  4:             string callbackURL = "YOUR_CALLBACK_URL";
  5:             string permissions = "publish_actions";
  6:             string authUrl = string.Format("https://www.facebook.com/dialog/oauth?client_id={0}&redirect_uri={1}&scope={2}&display=popup&response_type=token", appID, callbackURL, permissions);
  7:  
  8:             WebAuthenticationBroker.AuthenticateAndContinue(new Uri(authUrl), new Uri(callbackURL), null, WebAuthenticationOptions.None);
  9:         }

Una vez hemos hecho esto, debemos volver a la aplicación y obtener el token recibido como respuesta. Este proceso se lleva a cabo controlando el método OnActivated del fichero App.xaml.cs.

  1: protected override void OnActivated(IActivatedEventArgs args)
  2:         {
  3:             var rootFrame = (Frame)Window.Current.Content;
  4:             var currentPage = (Page)rootFrame.Content;
  5:             var currentViewModel = (IContinuationAwareViewModel)currentPage.DataContext;
  6:  
  7:             currentViewModel.Continue(args);
  8:         }

Podemos apreciar que dentro de este método empleamos IContinuationAwareViewModel, lo cual es una interfaz que añadimos a las ViewModels y que define únicamente el método Continue.

  1: public void Continue(IActivatedEventArgs args)
  2:         {
  3:             var arguments = (WebAuthenticationBrokerContinuationEventArgs)args;
  4:             WebAuthenticationResult result = arguments.WebAuthenticationResult;
  5:  
  6:             if (result.ResponseStatus == WebAuthenticationStatus.Success)
  7:             {
  8:                 string responseCode = result.ResponseData;
  9:                 responseCode = responseCode.Substring(responseCode.IndexOf("=") + 1);
  10:                 AccessToken = responseCode.Split('&').First();
  11:                 ExpirationTime = responseCode.Split('&').Last().Split('=').Last();
  12:             }
  13:         }

Podemos observar que en este método recibimos la respuesta y la troceamos para obtener la información que nos interesa.

Tras hacer esto, podemos comprobar cómo en nuestra aplicación ahora tenemos la pantalla de login de Facebook y recibimos el token del usuario de una manera fácil y sencilla.

Acabamos de comprobar que con muy poco esfuerzo podemos realizar un login completo con Facebook, lo cual otorga un mayor valor a nuestra aplicación de manera muy rápida.

En la próxima entrega veremos cómo llevar a cabo este proceso con Twitter, el cual varía tanto en requisitos como en la forma de hacerlo, pero con un resultado y una sencillez similar.

Un saludo,

Josevi Agulló (@josevi_7)