Question

Been looking around google and StackOverflow, everybody practically have the same advice to do:

FB.login(function(response) {
    if (response.authResponse) {
        var accessToken = response.authResponse.accessToken;
    }
});

I have a “share” button on the page, and when click I simply want to do a post on the user’s profile and going to use the https://graph.facebook.com/me/feed call to do it. To be able to do that, I need the access_token from facebook, so what I did was:

(after calling FB.init() as well as adding the all.js)

 FB.login(function (response) {
    console.log('response.authResponse: ' + response.authResponse);
     if (response.authResponse) {
                var access_token = FB.getAuthResponse()['accessToken'];
                console.log('Access Token = ' + access_token);
                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: 'user_about_me' });

What I expect to happen is that it will open a login dialog for the user to facebook, once they login, the dialog closes, it goes back to my page and I get the access token.

But what happens is that it spawns a new browser window to facebook with the login dialog, once the user login, the page proceeds to the user’s news feed page and my callback above never gets called. So basically the control is gone and transferred to the new browser window as a normal facebook browsing for the user. When I close that new window though, it execute the “User cancelled login” on my logging.

What am I missing here? All resources simply suggest to call FB.login and that’s what I already doing, but I cant seem to get access token for the user.

Thanks in advance!

EDIT: Full Code and more comments

<script type="text/javascript" language="javascript">
    window.fbAsyncInit = function ()
    {
        FB.init(
        {
            appId: '<%= this.ApplicationId %>', // App ID
            channelURL: '<%= this.ChannelFileUrl %>', // Channel File
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        // Additional initialization code here
    };

    // Load the SDK Asynchronously
    (function (d)
    {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/<%= this.LocaleCode %>/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>

and then in some js file calling this function (the parameters are not being used yet because haven’t really make a post)

function postToFacebook(name, caption, description, link, picture, id) {

var accessToken = "";

console.log('fb event subscribe');
FB.Event.subscribe('auth.login', function () {
    console.log('facebook event auth.login');
});

console.log('fb login');

FB.login(function (response) {
        console.log('response.authResponse: ' + response.authResponse);
        if (response.authResponse) {
            var access_token = FB.getAuthResponse()['accessToken'];
            console.log('Access Token = ' + access_token);
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
}, {});

}

and sequence of what happen is:

1. printed ‘fb event subscribe’
2. printed ‘fb login’
3. Code hits FB.login -> opens a new browser window to facebook, after user login the focus stays in that new window, it never goes in to the callback function in the FB.login
4. If I close the window spawned in step 3 above, then the callback function is called and ‘User cancelled login or did not fully authorize.’ is printed (‘response.authResponse: ‘ gives null)

Step 1 and 2 are expected, Step 3 is the problem, also the window that open has the url https://www.facebook.com/home.php?_rdr

Answer 1

In the documentation for the FB.login method it says clearly:

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.

If you want to stick to a client side flow then the options that are available for that are mentioned in this tutorial: Client-Side Authentication.

tsOverflow edit:
based on the chat discussion with Nitzan Tomer, found out the issue with my work above:

1. the AppId that was used is registered on facebook to a different Site URL, so even when you are testing locally, need to make sure the AppId has the same domain url
2. the channel.html was missing