Question

I am using fb connect using js. This is my code:

<script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'xxxxxxxxxxxxxxxx',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true
      });

      FB.Event.subscribe('auth.login', function(response) {
        obj=response.authResponse;
        token=obj.accessToken;
        setCookie("access_token_fb", token, '2');

        window.location.reload();
      },true);
    };
    (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/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>

for login I am using:

 <div class="fb-login-button" scope="email,user_checkins"  >Login with Facebook</div>

‘auth.login’ in subscribe function has a response handler it is only being called when user click on fb button and not already logged into FB, enter his/her email address and password in fb window . While if a user is already logged in facebook then fb dialog open and close. It doesnot then pass control to response hander. I read somewhere that force=”true” enable it to detect status change and call call back function. But I don’t know where to add force ture. I think it should be in login div. Is it true or is there some other approach?

thanks for you time.

Answer 1

Method 1:

Though I believe that DMCS has given a correct solution to the problem, here is another way to approach. Use FB.login method with a custom login link.

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId: 'YOUR-APP-ID',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
};

function facebookLogin() {
    FB.login(function(response) {
        if (response.authResponse) {
            console.log('Authenticated!');
            // location.reload(); //or do whatever you want
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    },
    {
        scope: 'email,user_checkins'
    });
}

(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/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>

Body markup:

<div id='fb-root></div><!-- required for SDK initialization -->
<a id='fb-login' href='#' onclick='facebookLogin()'>Login with Facebook</a>

When you click on the button, it will run the callback function inside FB.login.

Method 2:

Alternatively, using FB login button plugin, you can subscribe to auth.statusChange and check for the status of the user in response.

FB.Event.subscribe('auth.statusChange', function(response) {
  // check for status in the response
});

Note if you are using fb login button plugin, and the user is already logged in and connected to the app, no login button is shown (read it in the documentation here)