FB.login inside FB.getLoginStatus popup window blocked

Question

I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '{$MY_APP_ID}',
        cookie     : true,  // enable cookies to allow the server to access the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.1', // use version 2.1
        status     : true,   // check FB login status
    });
};

function fblogin() {
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        alert('Logged in.');
      }
      else {
        FB.login();
      }
    }, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>

Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?

It is common for modern browsers to block automatic popups – automatic meaning they were not triggered by any user interaction like a click. The latter is also the recommendation – only call `FB.login` on click. That makes it much less likely the popup will be blocked. Besides, it leaves the _choice_ whether they want to login via FB in the user’s hands – instead of just pushing it onto them. — CBroe, Nov 08 '14 at 12:21
@CBroe Then I think Facebook should mention this restriction in their Javascript SDK tutorial before user start to pick this choice. BTW, I've tried user FB.login only on user click action, but there are some restrictions such as 'the authorization code has been used' error happens when user tried to login twice. — David, Nov 08 '14 at 12:31
Well then don’t _let_ them try to login twice … `FB.getLoginStatus` tells you if they are logged in already at page load time – and if so, don’t display a login link, but “hello {name}” or something instead. And I think Facebook mentions the issue of calls without user interaction somewhere in their best practices … the above code however is just a short example, and it is the nature of _examples_ not to cover every possible issue. — CBroe, Nov 08 '14 at 12:41
the example code in the facebook docs is using FB.login in the async callback of FB.getLoginStatus - but it´s just an example, it should be pretty clear why it gets blocked. — andyrandy, Nov 08 '14 at 14:56

andyrandy · Accepted Answer · 2014-12-11T12:49:44.730

As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.

This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:

<script>
    //call this on user interaction (click)
    function doLogin() {
        FB.login(function(response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {
                    console.log('Good to see you, ' + response.name + '.');
                });
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        }, {scope: 'email,user_friends'});
    }

    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.1'
        });

        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                // the user is logged in and has authenticated your
                // app, and response.authResponse supplies
                // the user's ID, a valid access token, a signed
                // request, and the time the access token 
                // and signed request each expire
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;
            } else if (response.status === 'not_authorized') {
                // the user is logged in to Facebook, 
                // but has not authenticated your app
            } else {
                // the user isn't logged in to Facebook.
            }
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="doLogin()">login</button>

More explanation: http://www.devils-heaven.com/facebook-javascript-sdk-login/

is this still likely to work? seem to be getting the standard Unsupported Browser message at the moment. — Dano007, Jul 08 '15 at 16:24
yes, i am using this every day. not sure what message you are talking about? you need to be a lot more specific. — andyrandy, Jul 08 '15 at 16:26
do you have an example site that I can visit ? I've copied the code above into mine, but still get the Error "Unsupported Browser: Google Chrome for IOS doesn't support this feature. PLease use Safari" I'm using my iphone to test — Dano007, Jul 08 '15 at 19:11
To be clear it works on a desktop Chrome, but not mobile Chrome — Dano007, Jul 08 '15 at 19:12
that error is completely unrelated to this topic, you are definitely doing something else. check out this thread, it´s about that exact error message: http://stackoverflow.com/questions/26916545/any-workaround-to-avoid-unsupported-browser-when-trying-to-use-fb-ui-on-ch — andyrandy, Jul 09 '15 at 07:57

FB.login inside FB.getLoginStatus popup window blocked

1 Answers1

Linked