Datos personales de usuarios entregados por login social con Firebase

  • Por
Cómo acceder y almacenar en nuestra propia base de datos la información personal de los usuarios que hacen login social en nuestra aplicación web Firebase.

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.

Nota: Recuerda además que ese mismo objeto authData lo puedes obtener mediante la función callback ejecutada tras el intento de autenticación. Además de manera asíncrona mediante onAuth(). Todo eso ya se explicó.

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

Nota: Como decíamos al principio del artículo, los datos que se proporcionan de manera predeterminada dependen mucho de la red social. Durante el proceso de login los podemos alterar solicitando nuevos permisos adicionales. Esto es válido al autenticarse con Facebook, Google y Github. Twitter no nos ofrece la posibilidad de solicitar permisos adicionales.

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().

Nota: En el pasado artículo de autenticación con redes sociales ya explicamos las bases para trabajo con esos métodos. Ahora veremos cómo indicarle permisos adicionales a través del scope.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

davidcm86

11/5/2016
Rapidez firebase vs ORM u ODM de Frameworks PHP
Buenas,
Con todos estos tutoriales no cabe duda de lo potente que es firebase y de lo que nos puede ayudar. Ahora bien, ¿sería aconsejable utilizar Firebase con un framework PHP y quitar a este de su ORM u ODM para así utilizar sus características?. Por un lado tendríamos una llamda CURL para hacer cualquier consulta a firebase y por otro un SELECT o FIND que ya viene implementado en el framework y así no utilizar firebase.

Un ejemplo de esto sería una aplicación PHP normal que de momento no está pensada para móvil. Quizás para ello no merece la pena Firebase o quizás es igual de rápido que utilizar los propios métodos de cualquier Framework.

Un saludo!

diego alberione

21/7/2016
Obtener el Id de facebook del usuario autenticado
Hola!! excelente posteos... para la version v3.0.3 de Firebase, como hago para obtener el id de facebook del usuario autenticado, porque devuelve el uid de firebase, pero necesito el id propia de la red social (sea facebook, google o twitter)

gracias!!! saludos,