Can you call FB.login inside a callback from other FB methods (like FB.getLoginStatus) without triggering popup blockers?

Question

I’m trying to set up a pretty basic authentication logic flow with the FB JavaScript SDK to check a user’s logged-in status and permissions before performing an action (and prompting the user to log in with permissions if they are not).

1. The user types a message into a textarea on my site to post to their Facebook feed, and clicks a ‘post to Facebook’ button on my site.
2. In response to the click, I check the user’s logged-in status with FB.getLoginStatus.
3. In the callback to FB.getLoginStatus, if the user is not logged in, prompt them to log in (FB.login).
4. In the callback to FB.login I then need to make sure they have the right permissions, so I make a call to FB.api('/me/permissions') — if they don’t, I again prompt them to log in (FB.login).

The problem I’m running into is that any time I try to call FB.login inside a callback to other FB methods, the browser seems to lose track of the origin of execution (the click) and thus will block the popup. I’m wondering whether I’m missing some way to prompt the user to login after checking their status without the browser mistakenly thinking that it’s not a user-initiated popup?

I’ve currently fallen back to just calling FB.login() first regardless. The undesired side effect of this approach, however, is that if the user is already logged in with permissions and I’m still calling FB.login, the auth popup will open and close immediately before continuing, which looks rather buggy despite being functional.

It seems like checking a user’s login status and permissions before doing something would be a common flow so I feel like I’m missing something. Here’s some example code.

<div onclick="onClickPostBtn()">Post to Facebook</div>

<script>
// Callback to click on Post button.
function onClickPostBtn() {

    // Check if logged in, prompt to do so if not.
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            checkPermissions(response.authResponse.accessToken);
        } else {
            FB.login(function(){}, {scope: 'publish_stream'})
        }
    });
}

// Logged in, check permissions.
function checkPermissions(accessToken) {
    FB.api('/me/permissions',
        {'access_token': accessToken},
        function(response){

            // Logged in and authorized for this site.
            if (response.data && response.data.length) {

                // Parse response object to check for permission here...

                if (hasPermission) {
                    // Logged in with permission, perform some action.
                } else {
                    // Logged in without proper permission, request login with permissions.
                    FB.login(function(){}, {scope: 'publish_stream'})
                }

            // Logged in to FB but not authorized for this site.
            } else {
                FB.login(function(){}, {scope: 'publish_stream'})
            }
        }
    );
}
</script>

Answer 1

The problem I'm running into is that anytime I try to call FB.login inside a callback to other FB methods, the browser seems to lose track of the origin of execution (the click) and thus will block the popup.

He is not actually “losing track” – it’s a whole different execution context, because the FB methods work asynchronously. The click happened in an execution context that is long gone and finished by the time the callback function is executed.

You could check permissions earlier, on page load. It is not very likely that something about the user’s given permissions changes while he’s on your site, I guess – at least for a “normal” user, who does not try to mess with your app to see how it’ll react. (Although there might be uses cases where this can’t be said with certainty.)

If this results in the info that a necessary permission is missing – then call FB.login on the button click asking for this permission. In the FB.login callback, you can check the permissions again, if you want to be sure – if the permission is still not given then, then I’d suggest alerting the user to that fact, maybe telling him again why it’s necessary – and than he’ll have to click the button that starts the whole action again.

If permissions are alright, then you can make your API call to actually make a post. And to be really really sure and on the safe side … in that API call’s callback you can check for success or errors again, and if there’s an error find out if it was due to missing permissions – if so, back to square one, telling the user permission is necessary and have him start the whole thing over again, by clicking the button …