Cómo solicitar permisos avanzados al Graph API de Facebook desde Javascript

Para solicitar permisos avanzados que nos permitan obtener información adicional del usuario tendremos que especificar estos permisos al llamar al método FB.login.

Puedes seguir los pasos que indico en el anterior post (Cómo hacer una llamada al Graph API de Facebook desde Javascript) e incluir la siguiente modificación:

FB.login(function(response) {
    if (response.authResponse) {
        FB.api('/me', function(response) {
            alert(response.email);
        });
    }
}, 
// Aquí es donde especificamos los permisos que queremos obtener
{scope: 'email'});

En este caso estamos solicitando permiso para acceder al email del usuario. Si queremos obtener más permisos bastará con incluirlos todos separados por comas (p.e. ‘email,user_likes,user_photos’). Consultar la lista completa de permisos.

Puedes ver este ejemplo en funcionamiento en jsfiddle.net

Cómo hacer una llamada al Graph API de Facebook desde Javascript

Si queremos que nuestra aplicación pueda interactuar con el Graph API de Facebook a través del Javascript SDK lo primero que debemos hacer es cargarlo e inicializarlo con las opciones por defecto:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID',
      channelUrl : '//WWW.TU_DOMINIO.COM/channel.html',
      status     : true, 
      cookie     : true, 
      xfbml      : true  
    });
 
    // Aquí incluiremos nuestro código
 
  };
 
  // Carga asíncrona del SDK
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/es_ES/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Es fundamental que sustituyas APP_ID por el id de tu aplicación y WWW.TU_DOMINIO.COM/ por la ruta completa de tu aplicación. Debes incluir el fragmento dentro de la etiqueta body de la página. El archivo channel.html es necesario para que el SDK funcione correctamente en algunos navegadores y debe contener únicamente esta línea:

<script src="//connect.facebook.net/es_ES/all.js"></script>

Una vez el SDK se ha inicializado lo primero que vamos a necesitar saber es si el usuario ha iniciado sesión en Facebook y si ha instalado nuestra aplicación. Esto lo averiguamos usando el método FB.getLoginStatus. Justo después de FB.init procedemos a consultar el estado del usuario:

// Aquí incluiremos nuestro código
 
FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // el usuario tiene una sesión iniciada en Facebook y ha autorizado
    // la aplicación, response.authResponse contiene la información 
    // básica sobre la sesión: ID de usuario, access token, signed request
    // y la fecha de caducidad de estos últimos
  } else if (response.status === 'not_authorized') {
    // el usuario tiene una sesión inciada Facebook pero no ha autorizado
    // la aplicación
  } else {
    // el usuario no ha iniciado sesión en Facebook
  }
 });

Nos encontramos con tres escenarios distintos, aunque para nuestra aplicación sólo nos interesa el primero que es el que nos indica que estamos listos para hacer llamadas al Graph API. En caso de que el response.status sea distinto de connected procederemos a solicitar al usuario que inicie sesión y autorice nuestra aplicación. Esto lo conseguimos con el método FB.login que se encarga de todo este proceso:

 FB.login(function(response) {
   if (response.authResponse) {
     // Todo ha ido bien y ya podemos empezar a hacer llamadas al API
   } else {
     // El usuario no ha completado el proceso por lo que no podemos
     // continuar y deberemos buscar alguna alternativa
   }
 });

Llegados a este punto, siempre que el usuario haya aceptado instalar la aplicación, ya podremos realizar nuestra llamada al API. Para ello contamos con el método FB.api:

FB.api('/me', function(response) {
  // response contiene toda la información básica del usuario
});

Hemos realizado la llamada /me que nos devuelve la información básica del usuario como el nombre y otros datos personales que haya decidido hacer públicos.

Uniendo todo lo anterior obtendremos este bloque de código:

 window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID',
      channelUrl : '//WWW.TU_DOMINIO.COM/channel.html',
      status     : true, 
      cookie     : true, 
      xfbml      : true  
    });
 
    // Aquí incluiremos nuestro código
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
          inicializaApp();
      } else {
         FB.login(function(response) {
            if (response.authResponse) inicializaApp();
         });
      }
    });
 
    function inicializaApp() {
        FB.api('/me', function(response) {
          alert(response.name);
        });        
    }
  };
 
  // Carga asíncrona del SDK
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/es_ES/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

Puedes ver este ejemplo en funcionamiento en jsfiddle.net