La autenticación web es una pieza fundamental de Firebase. Ya vimos en el pasado artículo que permitir el login social en una aplicación es una tarea muy sencilla, gracias a las funciones del API de Firebase. En esta ocasión iremos un poco más allá y te explicaremos cómo recuperar y almacenar los datos de la persona que se conecta.

Una vez que un usuario se ha logueado con el conector social correspondiente lo más seguro es que quieras captar datos personales de la cuenta, con los que personalizar la experiencia de uso de tu aplicación. Nombre, apellidos, email, imagen avatar son datos que habitualmente exponen las redes sociales para las aplicaciones que hacen oAuth.

Dependiendo de la red social y de la información personal que necesites tendrás que recuperarla de un modo u otro. Sabiendo además que existen diferencias diversas entre los proveedores de oAuth que Firebase nos permite usar:

• Información que será posible recabar. Por ejemplo, Twitter no permite saber el correo de los usuarios.
• Información que se entrega de manera predeterminada. Por ejemplo Facebook no expone el correo de manera predeterminada pero Github sí.
• Permisos especiales que necesitas solicitar para obtener más información de los usuarios, en el caso de Google y Facebook, pues tiienen diversos niveles de permisos que se pueden solicitar de manera extraordinaria cuando nos logueamos.

Objeto de datos del usuario

Como sabes, existen varias maneras de acceder al objeto de los datos del usuario autenticado. Esto lo aprendimos en el primer artículo sobre Autenticación en Firebase. A lo que ahora agregamos un nuevo método muy útil, llamado getAuth(), que te proporciona la autenticación de manera síncrona, es decir, en un instante dado.

var ref = new Firebase("https://ejapp.firebaseio.com");
var authData = ref.getAuth();

Ese método depende, como muchos otros, de una referencia a tu aplicación. Al invocarlo te devuelve los datos del usuario que está autenticado, o null, si no se autenticó ningún usuario hasta el momento.

Si nos hemos logueado con una red social en ese objeto encontraremos toda la información que esa red nos proporciona. Ese objeto tendrá una forma como se puede ver en la siguiente imagen:

Scope, para solicitar datos adicionales

Observarás que en ese objeto de autenticación a veces no están todos los datos que necesitas, como por ejemplo el email del usuario

Para definir qué nuevos permisos, adicionales a los predeterninados, necesitas que se concedan a tu aplicación tienes la posibilidad de definir el "scope". Ahora vamos a ver cómo usar ese parámetro, procedimiento que será exactamente igual autentiques mediante el método authWithOAuthPopup() o authWithOAuthRedirect().

ref.authWithOAuthPopup("facebook", function(error, authData) {
    // código para gestión del intento de autenticación
}, {
  scope: "email"
});

Eso indicará a Facebook que tu aplicación también quiere leer el email del usuario y por tanto Facebook se encargará de informar al usuario interesado que esta información será accedida. Si el usuario otorga los permisos entonces se podrá loguear en nuestra página.

Si hubiese necesidad de acceder a varias informaciones extra, se señalarán todos los permisos en la propiedad scope, separados por comas. Además, en el código siguiente verás que en ese parámetro adicional también sirve para marcar la persistencia de la sesión del usuario.

ref.authWithOAuthPopup("github", function(error, authData) { 
// procesar el intento de autenticación una vez concluido
}, {
  remember: "sessionOnly",
  scope: "user,gist"
});

Almacenar los datos del usuario logueado con conector social

Ahora que tenemos el acceso a todos los datos que podamos necesitar, aprendamos a almacenarlos en la aplicación para mantenerlos con nosotros y personalizar la experiencia de usuario.

El perfil de los usuarios generalmente lo querrás guardar en una entidad, donde tendrás una colección de todos los usuarios que se hayan registrado. De una manera similar a la que sigue.

user {
    "user1": {
        "nombre": "Miguel Angel Alvarez",
        "email": "miguel@desarrolloweb.com"
    }
    "user2": {
        "nombre": "Alvaro Martínez",
        "email": "alvaro@desarrolloweb.com"
    }
}

En el siguiente código verás cómo realizar el login del usuario. En caso de detectar un logueo correctamente se podrá acceder a los datos del usuario mediante el parámetro authData y almacenarlo en la base de datos.

var ref = new Firebase("https://ejapp.firebaseio.com/");		
ref.authWithOAuthPopup("facebook", function(error, authData) {
  if(error) {
    // gestionar un error en el intento de autenticación
  } else {
    // gestionar el acceso permitido, almacenando el perfil
    var refUser = ref.child("user").child(authData.uid);
    refUser.set({
        email: authData.facebook.email,
        nombreCompleto: authData.facebook.displayName
    });
  }
},{
  scope: 'email'
});

Esta estrategia no funcionaría tan bien si estamos usando el método authWithOAuthRedirect(), puesto que al producirse la redirección no seremos capaces de ejecutar el código de la función callback. Podemos llevar esa lógica hacia el método onAuth, que también se ejecuta al detectar el logueo positivo.

var ref = new Firebase("https://ejapp.firebaseio.com/");	
ref.onAuth(function(authData){
  if(authData) {
    console.log('el usuario está autenticado');
    var refUser = ref.child("user").child(authData.uid);
    refUser.set({
      email: authData.facebook.email,
      nombreCompleto: authData.facebook.displayName
    })
  } else {
    console.log('el usuario NO está autenticado');
  }
});

Eso es todo. Como has podido comprobar, el código que se necesita es bastante elemental, gracias a Firebase. Para otras redes sociales será un código exactamente igual, o con mínimas diferencias porque el objeto de autenticación tendrá juegos de propiedades diferentes y algunas veces hasta otros nombres.