TL;DR Facebook javascript SDK cannot determine the accurate login status of a user who has directly logged out from facebook.com underneath it.
I'm developing a Facebook app using the javascript SDK for authentication. I've noticed that, when the user logs out of Facebook directly (on facebook.com), then the SDK cannot make sense of the user's login state on the app page. I've boiled it down the the following simple test case.
Log in to facebook.com in one tab. In another tab, render the app page below (replacing MY_APP_ID as appropriate). If you are logged into facebook as a user that has never given permissions to this app, click "Login" and grant them. Either way, you should see some events fire indicating you are logged in.
Now, back on the facebook.com tab, log out of facebook. Go to the app tab and click all the buttons (except "Login") and look at the browser console output.
When
FB.logoutis called, nothing happens. The callback is never called. In Chrome, the following error is given: "Unsafe JavaScript attempt to access frame with URL http://my_app.com from frame with URL http://www.facebook.com/. Domains, protocols and ports must match."When
FB.getLoginStatusis called, the response says "connected" and has an authResponse object. This is not helpful, though, because it's now incorrect. If, instead, true is passed in for the "force" parameter, then nothing happens (the callback is never called).When
FB.getAuthResponseis called, nothing happens (the callback is never called).None of the relevant events are fired during any of this (after logging out of facebook that is).
The issue then is that there seems to be no possible way to legitimately determine the user's login status from the SDK in such a case. Or I'm doing something stupid, though I've boiled it down to the bare minimum.
My end goal here is that I want to be able to do something in this case if the user clicks my logout button after already logging out of facebook. But the SDK gives no viable means of achieving this.
Any ideas or thoughts? Has anyone else experienced this and found a workaround? Thanks!
Simple app page:
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
</head>
<body>
<script>
window.fbAsyncInit = function() {
function subFBEvent(name) {
FB.Event.subscribe(name, function(r) {
console.log(name);
console.log(r);
});
}
subFBEvent('auth.login');
subFBEvent('auth.logout');
subFBEvent('auth.authResponseChange');
subFBEvent('auth.statusChange');
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // use OAuth 2.0
});
};
(function() {
var s = document.createElement('div');
s.setAttribute('id','fb-root');
document.documentElement.getElementsByTagName("body")[0].appendChild(s);
var e = document.createElement('script');
e.src = 'http://connect.facebook.net/en_US/all.js';
e.async = true;
s.appendChild(e);
}());
</script>
<button onclick="FB.logout(function(r) { console.log('FB.logout'); console.log(r); });">Logout</button>
<button onclick="FB.getLoginStatus(function(r) { console.log('FB.getLoginStatus'); console.log(r); });">LoginStatus</button>
<button onclick="FB.getAuthResponse(function(r) { console.log('FB.getAuthResponse'); console.log(r); });">AuthResponse</button>
<fb:login-button>Login</fb:login-button>
</body>
