Alon Shmiel
Alon Shmiel

Reputation: 7121

Facebook javascript sdk: user must be logged in

I have created a web application and used the Facebook javascript sdk (login button).

Facebook Javascript SDK

I am trying to do the next thing:

A user can rate some pictures in my site, and write a comment for some pictures.

I want to verify that he is logged in to facebook before he rates and writes a comment. If he doesn't, show a popup of login.

This is the login button:

<fb:login-button scope="public_profile,email,user_friends"  
                        onlogin="checkLoginState();" style="display:block;">
</fb:login-button>

And this is the js:

window.fbAsyncInit = function () {
    FB.init({
        appId: '<myAppId>',
        cookie: true,  // enable cookies to allow the server to access the session
        xfbml: true,  // parse social plugins on this page
        status: false,
        oauth: true,
        version: 'v2.5' // use graph api version 2.5
    });

    function checkLoginState(callback) {
        FB.getLoginStatus(
            function (response) {
                statusChangeCallback(response, callback);
            }
        );
    }

    function statusChangeCallback(response, callback) {
        console.log('statusChangeCallback: ' + response.status);

        if (response.status === 'connected') {
            // Logged into your app and Facebook.
            if (callback) callback();
            window.accessToken = response.authResponse.accessToken;
            //testAPI();
        } else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' +
              'into this app.';
        } else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' +
              'into Facebook.';
        }
    }    

    FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
    }, true);
 };

// Load the SDK asynchronously
(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'));

I thought to add these events to the fbAsyncInit:

 FB.Event.subscribe('auth.statusChange', function (response) {
        console.log('auth.statusChange: ' + response.status);
        if (response.status === 'connected') {
            //the user is logged and has granted permissions
        } else if (response.status === 'not_authorized') {
            //ask for permissions
        } else {
            //ask the user to login to facebook
        }
    });

    FB.Event.subscribe('auth.login', function (response) {
        console.log('auth.login');
        //window.location.reload();
    });
    FB.Event.subscribe('auth.logout', function (response) {
        console.log('auth.logout');
        //window.location.reload();
    });

But this case doesn't work:

1) my app is open (and the user is not logged in).

2) He opens Facebook site in a different tab and he is logged in to facebook.

3) The events are not fired. (The same issue happens when the user logged out from facebook).

In addition, I tried to use fbsr_ but this cookie is not created when the user makes the steps above.

Any help appreciated!

Upvotes: 0

Views: 400

Answers (1)

andyrandy
andyrandy

Reputation: 73984

It is much easier to use your own login button with FB.login instead. You can just use FB.getLoginStatus on page load to check if a user is logged in.

You can also use FB.getLoginStatus to check if the user is logged in right when he rates/comments. But you should consider re-checking server side, for security reasons.

Here´s an example how the login looks like with FB.login and FB.getLoginStatus: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Upvotes: 1

Related Questions