why do else cases in fbAsyncinit/fb.Event.subscribe not work?

Question

I'm wondering why it seems as though the "else if" case of response.status === 'not authorized' and the "else" case ("unknown", ie user is not logged into facebook) are not being executed. When I am logged into my app, testAPI() is called accordingly in the response.stats === 'connected' . However, when I open up incognito mode in Chrome, the testAPI() functions in the other else cases are not being called. Anyone know why?

window.fbAsyncInit = function() {

FB.init({
    appId      : 'appnumberhere', // App ID
    channelUrl : '//localhost/appname/channel.php', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
});

FB.Event.subscribe('auth.authResponseChange', function(response) {

    if (response.status === 'connected') {
          testAPI(); // works
    } else if (response.status === 'not_authorized') {
           testAPI(); // not called. Nothing in console.
          FB.login();
    } else {
           testAPI(); // not called. Nothing in console.
          FB.login();
           }
    });


}); // end async init function

the testAPI function:

 function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Good to see you, ' + response.name + '.');
    });
  }

As a side note, I am also not seeing a facebook login dialogue pop up if I am not logged in, which is what I think fb.login() is supposed to invoke.

extra side note

Also, strangely, I need to have <script src="//connect.facebook.net/en_US/all.js"></script> below the FB SDK include <script>(function(d){ var js,....</script> and within my channel file for my app to work. Otherwise, some parts do not load. Not sure if this may be related, but it's very strange.

Answer 1

As this question explains, auth.authResponseChange and auth.statuschange don't fire when the user is not logged in. When a user loads the page, the user starts off in the "unknown" state; but once FB.init is called with status:true, Facebook checks the login status and determines that the user is not logged in - which is also called the "unknown" state! Technically, there's no change of state, so the state-change callbacks are not called. (This seems like a major API design flaw, especially since their own sample code doesn't work.)

One solution, which is the accepted answer to that question, is to set the status check in FB.init to false, and instead manually check the status using FB.getLoginStatus() so that we can respond to it ourselves. If the user is not logged in, then subscribe to the login event. If the user is already logged in, that's great.

Here's the code I'm using. login() and logout() are functions I've defined that render parts of the page for the logged-in and not logged-in states. logout() displays a login button, while login() displays user-specific information.

FB.init({
    appId: '...',
    channelUrl: window.location.protocol + '//' + window.location.host + '/channel.html',
    status: false,
    [... other settings ...]
});

FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
        login();
    } else {
        FB.Event.subscribe('auth.login', function(response) {
            window.location.reload();
            login();
        });
        logout();
    }
});

Notice the window.location.reload(); in the case where the user was not logged in originally and then logged themselves in. This is to avoid a similar Blocked a frame... error to what you were experiencing, in my case an http:// vs https:// mismatch. See if you need it in your case. If you're still experiencing a Blocked a frame... error, it may be due to the way you've configured your app settings in Facebook. Try putting http://localhost:8080/ as the site URL under "Website with Facebook Login", and access that site to view your app.