Reputation: 7121
I have created a web application and used the Facebook javascript sdk (login button).
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
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