FB.Login dialog popup does not callback when closed

Question

FB.Login Popup Dialog http://s17.postimg.org/47zhfnt0d/8_1_2014_6_33_34_PM.jpg

• FB.Login has 3 clickable buttons:
  1. Cancel
  2. Okay
  3. "Close" button on top right(close popup window)

When user click both Cancel & Okay button, call back is triggered with authResponse which allows me to process whether the user authorize the app.

But if user click "Close" to close the popup, I receive authResponse only once. The second time user close FB.Login dialog pop up, callback function is not triggered.

Here's my code:

FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });

function facebook_login(response) {
    console.log('facebook_login');    //update
    console.log(response);            //update
    if (response.status === 'connected') {
        console.log('connected');
    }
    else if (response.status === 'not_authorized') {
        FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
    }
    else {
        // the user isn't logged in to Facebook.
        FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
    }
}

I intend to prompt user 3 times to authorize the app.

### Update ###

I actually records every response my callback function received. See above update, but closing the dialog popup only return response once, with "status = not_authorized". Clicking Cancel will have the same status returned, but login popup will show again.

My Console Log:

_{(source: imghost.us)}

Answer 1

Sorry to say it, but you shouldn't try to re do the auth if the user has cancelled - if you try to call FB.login again in the callback to FB.login then the user's pop up blocker will trigger and the dialog will fail. In Chrome, for example, they will see something like this:

Instead, you should display a message to the user telling them why they need to authenticate and with a button or link below for them to try again if they change their mind.

If you are calling FB.login in the callback, this is an asynchronous event and most browsers prevent popups from appearing in this type of situation. From the Facebook FB.login docs:

Calling FB.login results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window will be blocked by most browsers.

Answer 2

when you click on close button, you will get reponse.status='unknown'. so you will have to check this in your code. Use this code

FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });

function facebook_login(response) {
    if (response.status === 'connected') {
        console.log('connected');
    }
    else if (response.status === 'not_authorized'  || response.status=='unknown') {
        FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
    }
    else {
        // the user isn't logged in to Facebook.
        FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
    }
}

Note You should have to allow popup, because popup blocker of browser will not allow this. So please check this also.

Answer 3

This issue could occur ONLY IF the app is opened by browsing the app URL. If viewing the app in Facebook (eg: Clicking app links on the left sidebar in Facebook home page) the FB.Login popup dialog won't even have a "Close" button.

Furthermore, re-prompt authorization after user click Cancel is not allowed if the app is running in Facebook. User will be redirected to a help page as shown below if the app attempt to ask for authorization again after user clicked Cancel.

Something similar To achieve this

Prompt user to authorize the app only ONCE, then redirect them back to the fan page, or show user a message saying something like "Please authorize the app to continue." with a re-prompt button.

function facebook_login(response) {
    console.log('facebook_login');    //update
    console.log(response);            //update
    if (response.status === 'connected') {
        console.log('connected');
    }
    else {
        var dialog = $('<div>').attr({'class':'login-prompt', 'style':'text-align:center'});
        var dialog_content = 'Please authorize the app to continue.<br/><input type="button" onclick="$(\'.login-prompt\').dialog(\'close\');FB.login(facebook_login, { scope: \'email, publish_actions, user_birthday\' });" value="OK" />'
        
        dialog.html(dialog_content);
        dialog.appendTo('.contentwrapper');
        
        //initialize and show dialog
        $('.login-prompt').dialog({ modal: true }).dialog('open');
    }
}

So user will see something like below after they click Cancel
_{(source: imghost.us)}

Note: This approach of re-prompt authorization also only allowed twice if app is opened in Facebook.