Implementando un sistema de login en Xamarin.Forms


Una de las features más comunes a la hora de desarrollar una aplicación móvil suele ser la de colocar un sistema de login y registro tras un splash screen inicial.

Tenemos la problemática añadida de que en dispositivos Android, podemos volver atrás y quizás no nos interese que esa vista esté disponible en el histórico de navegación una vez autenticado el usuario.

Un buen ejemplo de implementación podemos encontrarla en el github de Craig Dunn. Basándonos en esta idea, vamos a ver paso a paso una implementación de ejemplo.

1: Crear las interfaces para el LoginManager y el UserProvider

Esta interfaz define dos operaciones: showMainPage, que se encargará de mostrar al usuario la primera pantalla que debe ver tras autenticarse. También implementa el método logout, que cerrará la sesión del usuario y mostrará la pantalla de login.

La interfaz IUserProvider la usaremos para recuperar la información del usuario ya sea de un base de datos, un servicio web o un archivo de recursos.

2: Implementar la interfaz AutenticationManager en la clase App de nuestro proyecto Xamarin.Forms compartido o PCL.

Lo primero que hacemos es crear un asembly para indicar qué clase implementa el servicio de IUserProvider. De esta forma el servicio estará disponible en todas las pantallas de la aplicación Xamarin.Forms.

Hemos indicado que la clase App implementa la interfaz ILoginManager, por lo que implementamos los dos métodos que conlleva dicha interfaz.

Un detalle a fijarse, consultamos a la propiedad “IsLoggedIn” con Properties.ContainsKey(“IsLoggedIn”). Esta propiedad la establecemos en la pantalla de login si el usuario se autentica.
Lo ideal sería añadir un sistema que al hacer login guardase en una base de datos local o almacenamiento interno del teléfono, los datos de email y contraseña para que se recordasen cuando el usuario vuelva a abrir la aplicación y no haya información en la propiedad IsLoggedIn.

Una vez comprobado si el usuario está autenticado, establecemos la propiedad MainPage con la página interna dentro del sistema de navegación de Xamarin.Forms o por el contrario, si el usuario no está autenticado, establecemos la propiedad MainPage a la página de Login.

Hay que notar el detalle de que la página de Login no forma parte de la navegación es decir, no es una NavigationPage.
Si estableciésemos la LoginPage como una NavigationPage, en Android el usuario podría pulsar en el botón de volver atrás accediendo a esa pantalla estando logueado. El no meterla en el sistema de navegación es como establecer una Activity con el history desactivado para que no esté accesible con el botón de atrás.

3: Crear página de login y su ViewModel

El ViewModel se encargará de actualizar los valores automáticamente indicados en la vista sin que nosotros tengamos que lidiar con eventos de los inputs. Todo gracias al patrón MVVM.

Establecemos tres propiedades: Email, Password y Loading. La última propiedad la usaremos para controlar la visualización de un ActivityIndicator (la típica rueda que mostramos mientras estamos cargando información).

En la página de login mostramos los inputs para que el usuario inserte email y contraseña además de un ActivityIndicator.
Los inputs y el ActivityIndicator están enlazados al viewModel, por lo que cuando cambien sus valores se actualizará la información del viewModel automáticamente y al revés.

Hemos mostrado también un botón que al pulsarse comprobará si el usuario existe con esa combinación de email+contraseña, estableciendo la página principal correspondiente.

 

4: Crear página interna con botón de logout en la barra de navegación

Una vez autenticado el usuario, en la página podemos mostrar lo que queramos. Hemos añadido una opción en la navegación superior para mostrar la opción de “cerrar sesión” o “salir”, que llamará al método logout del LoginManager.

Con esto tenemos implementado un sistema de login para Xamarin.Forms que funcionará en Android, iOS y WindowsPhone.

Escrito por Asier Marqués

Finalizado curso PECO (plan de empleo comarcal) de HTML5 y Javascript

Una de las features más comunes a la hora de desarrollar una aplicación móvil suele ser la de colocar un sistema de login y registro tras un splash screen inicial. Tenemos la problemática añadida de que en dispositivos Android, podemos volver atrás y quizás no nos interese que esa vista esté disponible en el histórico […]

Utilizando Inyección de Dependencias en WordPress

Una de las features más comunes a la hora de desarrollar una aplicación móvil suele ser la de colocar un sistema de login y registro tras un splash screen inicial. Tenemos la problemática añadida de que en dispositivos Android, podemos volver atrás y quizás no nos interese que esa vista esté disponible en el histórico […]