Facebook JS SDK: Check permissions before Login PopUp

Question

I want to check permissions of a logged in user before presenting the iframe login to request extended perms, but the iframe popup gets blocked by the browser (ff, chrome tested). I want to avoid this and i'm pretty certain its because the results of the js functions are 'nested' - my js cleverness is limited so excuse me.

I'm guessing that if I can keep everything in the original function without passing down the results the browsers would still see the login iframe as 'user initiated' and not block.

But i'm unable to do this - e.g. why does the following result in data = undefined.

var data = FB.api(
{
method: 'fql.query',
query: 'SELECT create_event FROM permissions WHERE uid=' + response.session.uid
 });
alert(data); // = undefined

My full current code is:

<button id="myButton" >Test Publish Event</button>

<script>

$('#myButton').bind('click', function() {

FB.getLoginStatus(function(response) {

if (response.session) {
// logged in and connected user, someone you know

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT create_event FROM permissions WHERE uid=' + response.session.uid
  },
  function(response) {
        if(response[0].create_event == 1) {
                alert('permission granted');
        } else {
            alert('permission absent');

    FB.login(  function(response) {if (response.session) {
        handleSessionResponse(response);
        if (response.perms) {
          // user is logged in and granted some permissions.
          // perms is a comma separated list of granted permissions
          alert(response.perms);
            } else {
          // user is logged in, but did not grant any permissions       
        }
      } else {
        // user is not logged in
      }
    }, {perms:'create_event,rsvp_event'});

    }
  }
);
</script>

Answer 1

YAY ! The same problem problem(well no the same problem but the same desired functionality) troubled me a lot but finally after HOURS of Research on various sources i figured out a solution!!

1st

var data = FB.api(

this is wrong! Because all fb requests are executed asynchronously and the only way to retrieve the data values are inside that request after its been executed. ex

FB.api(
{
method: 'fql.query',
query: 'SELECT create_event FROM permissions WHERE uid=' + response.session.uid
 },function(response){
This function will run after the request is finished and ONLY inside here you can read the results data
ex  alert(response.data);
});         
  }
});

2nd Your Permission request pop up is blocked by chrome for security reasons(firefox allows it other browsers ask to allow or not)

"One pop-up can only be allowed if its opened from a user-action event such as .onclick" So you can attach the function to an .onclick event to be allowed.

3rd My solution for checking if a user has the required permissions to use your app is :

 FB.getLoginStatus(function(response) {
 if (response.status.toString().indexOf("connected")>-1) {
    initAll();
  } else {

requestPermisions proceedure
 }

This function checks if a user is connected and has given permissions to your app other way response.status = "unknown" is returned.

Now....

The permission pop-up block problem has 2 solutions.

1st solution = attach the FB.login() function to an onclick event of a button.Ex.

     ifUserNotgrandedPermisions{document.getElementByid("aLogInButton").onclick = function(){
 FB.login(....blah blah blah);
 };

2nd solution and the one i implemented is redirecting the iFrame, to a request permission page, and not pop up

Below is a full solution, that checks if user is logged in and granted perms...if not it asks the user to log in and then requests permissions (if logged in just ask perms)(if has perms just logs in)

    FB.init({appId: 'YourAPPID', status: true, cookie: true, xfbml: true, oauth : true});
    FB.getLoginStatus(function(response) {
   if (response.status.toString().indexOf("connected")>-1) {
     initAll(); //User is connected and granted perms Good to go!
   } else { 

//top.location changes the browsers url and NOT the iframe's url

//This url is specially formed to ask perms for your app. You change the permissions and your appID

//redirect_uri = Change this to your application canvas page

          top.location=window.location="http://www.facebook.com/dialog/oauth/?scope=read_stream,publish_stream,friends_photos,friends_activities&client_id="yourAPPID(nobrackets)"&redirect_uri=http://apps.facebook.com/filtered_feed/&response_type=code";}});};

Answer 2

FB.init({
   appId: 'YOUR APP ID', 
   status: true, 
   cookie: true,
   xfbml: true,
   oauth : true
});
FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    /*var uid = response.authResponse.userID; //FACEBOOK_ID
    var accessToken = response.authResponse.accessToken;*/ //ACCESS TOKEN
    FB.Canvas.setAutoResize();
    if (response.authResponse) {
        // logged in and connected user, someone you know. 
        //  YOUR SUCCESS CODE HERE
    }
  }else {
      attemptLogin();
  }
 });

Function to open popup for login into facebook and for authorization.

function attemptLogin(){
   FB.login(function(response) {
      if (response.authResponse) {
          login();
        } else {
          //if user didn't logged in or didn't authorize your application
      }
  }, {scope: 'offline_access,publish_stream,manage_pages'}); //YOUR PERMISSION
}