FB.login with PHP API

Question

I've set up a Canvas Page which doe's a FB.login on click of a form submit button. During the following request it tries to access the users data via $facebook->api('/me') (last API version from Github). It works in Firefox and Chrome, but not in Safari and IE, where the API fails with "auth token required". Has anybody already had this problem or got an idea what could cause it?

BR Philipp

edit:

I call FB.login inside the click event of a form submit button:

$('.form-submit', this).click(function() {
  FB.getLoginStatus(function(response) {
    if (response.session) {
      form.submit();
    } else {
      FB.login(function(response) {
        if(response.session && (permissions == '' || response.perms)) {
          form.submit();
        }
        else {
        }
      },{perms:permissions});
    }
  });
  return false;
});

On server side in simply construct the php-api object and try to get user data:

$facebook = new Facebook(array(
  'appId' => $appid,
  'secret' => $appsecret,
  'cookie' => TRUE,
));
if ($facebook) {
  try {
    $me = $api->api('/me');
  }
  catch (Exception $exc) {
    // Failure in Safari and IE due to invalid auth token
  }
}

The signed_request is passed inside a hidden form element.

Answer 1

I had the same problem and I've included a solution below.

I believe the reason this happens is because on a Javascript login attempt your server never receives any access tokens. The Javascript is only passing data between your browser and Facebook.com so your server has no idea what the authentication status is. Your server will only receive the new access tokens when the page is refreshed; this is where facebook hands over the access tokens.

Heres my solution. Upon a successful login via FB.login you will receive the response object and inside it is an access_token. All you need to do is pass this access token to your script in some way. Here is an example:

// Hold the access token
var js_access_token = "";

// Connect to facebook
FB.login(function(response) {
  if (response.session) {
    if (response.perms) {
      // user is logged in and granted some permissions.
      // Save the access token
      js_access_token = response.session.access_token;
      // Do stuff on login
    }
  }
});

You then include the access token along with any requests. I've chosen an ajax example.

// Communication back to server.
$.ajax({
  url: 'myurl.php',
  data: {
    js_access_token: js_access_token // Including the js_access_token
  },
  success: function(data) {
    console.log(data);
 }
});

Within your PHP you then need to have something which looks like this:

$facebook = new Facebook(array(
  'appId' => $appid,
  'secret' => $appsecret,
  'cookie' => TRUE,
));
if ($facebook) {

  // If we get the access token from javascript use it instead
  if (isset($_REQUEST['js_access_token']) && $_REQUEST['js_access_token']) {
    $facebook->setAccessToken($_REQUEST['js_access_token']);
  }

  try {
    $me = $api->api('/me');
  }
  catch (Exception $exc) {
    // Failure in Safari and IE due to invalid auth token
  }
}

Hope this helps

Answer 2

I had a lot of troubles with the JS FB login stuff. I recommend using the simpler redirect login using oauth and the getLoginUrl function from php fb api.

So basically you do it from PHP, you check if you have your session, if not you use getLoginUrl and redirect to that page, your use will be then redirected to your app/site with a valid session (if he accepts).

Does this help ? I really lost HOURS trying to make the FB JS login work on any browser and I couldn't, I've switched since then to the simple redirect login method in all of my apps with complete success.