We have a facebook website app for use as a public event kiosk. Many people will be logging into facebook through our site on the same device (set up at a booth, like a ipad or similar).
We need to log the person out of facebook itself after they are done; not simply destroy the graph api session for our site.
Here is the problem:
User walks up to our ipad, which has a browser loaded to our website. He or she clicks "facbook login", and is redirected to facebook to log in.
They log in, grant our app permission, and facebook redirects them back to our site.
After they use our site (post comment, etc...) they click log out on our site.
Next user sits down, clicks "facebook login", and is redirected to facebook. Upon reaching facebook.com, the browser is still logged in for the previous user, granting this user access to the first user's facebook (just a small problem =)
My hope is that I can send the user to facebook, to a page with nothing but a logout button, and have facebook redirect the browser back to my site, ready for the next user. This is how the login works, and I need a logout equivalent.
Edit:
Thank you very much for the answer. We spent like 3 days trying to figure this out; I hope you will forgive us if we post generic code that anyone can plug in. Placing this on an HTML page, then visiting that page, logs the user out of Facebook and your site.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your APP ID', // App ID
channelUrl : '//WWW.YOURSITE.COM/channel.php or channel.html or whatever yours is', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.logout();
alert('Thanks! You have been logged out of facebook.');
}
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
If you use the Facebook Javascript SDK, you can call FB.logout when they click your logout link as the documentation states:
FB.logout will log the user out of both your site and Facebook.
Related
I have made a Facebook registration form that works with custom fields and functions as I expect, EXCEPT when the user is not logged into facebook when they first visit the form.
In this situation the form does not render on screen and the following error appears:
Unable to load the registration form for this ID. You may have
previously blocked this app on Facebook. Go to your Facebook privacy
settings to unblock this app. (Error: Invalid 'client_id'.)
Now I know already that this has been discussed on the site but the solutions offered elsewhere don't work for me and I really want this to work based in the XFBML solution that facebook supports (a demo is here http://developers.facebook.com/docs/plugins/registration/)
If you logout of facebook you can visit a test of my code, taken directly from the facebook example and hardly modified here: https://www.askanutritionist.com/fb.html
By the way, yes sandbox is disabled in the facebook app settings as thats a common fix others on S.O. have suggested.
Thanks for your time.
Note; I would have commented on other existing questions with this topic but stackoverflow won't let me (yet).
Check that the app whose ID you're using isn't restricted demographically (e.g. by age or country) and that it isn't still in sandbox mode.
If it is restricted or in sandbox mode, users who aren't logged in and who meet the restrictions applied (or for sandbox mode, are admins of the app) can't see the existence of the app or its details until they log in.
Just to confirm; I never actually fixed this properly. Instead I made a work around and was able to do a javascript check via the facebook sdk to see if the user was logged in or not when they first hit the page that has the facebook registration form.
I do an http redirect if they aren't logged in (or aren't authorised) and if they are logged in later in the page I call to init the facebook form.
window.fbAsyncInit = function() {
FB.init({
appId : xxxx, // App ID
channelUrl : 'http:///xxxxx/fbchannel.php',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// all ok!
//var uid = response.authResponse.userID;
//var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
window.location.href="create_account_with_facebook?authorizefirst";
} else {
window.location.href="create_account_with_facebook?loginfirst";
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
All my pages have the facebook login button and load the facebook SDK.
This is my JS code for loading FB:
window.fbAsyncInit = function() {
FB.init({
appId : 129837912837129837128937, //fake id
channelUrl : '//www.example.com/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oath : true
});
// 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/en_US/all.js\";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
Problem reproduction:
1) Use logout link to logout from facebook within my site. Facebook.com also gets logged out. Fine so far. My site now has the user logged out.
2) The user at some point goes to facebook.com and logs in. He uses a cookie to maintain the session.
3) He then goes to my site directly on the link /page.php?5&sdasda&asdad or any other non-home page link and the page loads completely (apart from the FB login button that has some lag of 1-2secs max).
4) When FB login button loads eventually, the FB js detects that the user is already logged in facebook.com (sees the fb cookie obtained in step 2) so attempts to "log" him in by redirecting to the root (www.mydomain.com) and not refreshing the current page.
This is how my login button looks like:
<div class="fb-login-button fb_iframe_widget " scope="status_update,email,user_birthday,read_stream,publish_stream,share_item"></div>
rendered as:
Is this a normal behavior? Am I doing something wrong in the first place? Anything to fix this?
I'm writing a web app that relies on logging in via Facebook. Here's what I want to do:
When the user clicks the "Connect with Facebook" button on the web
app, another tab will open in his browser with the Facebook login
link that lets him authenticate the app.
Once the user authenticates the app, the login tab will close, the
the user will be on the original web app page
The web app will detect that the user has connected with Facebook,
and logs the user in.
Right now, the only solution I can think of is having the web app continuously querying Facebook to see if the user has been logged in, is there a better way of doing this?
Integrate login with the Facebook Javascript SDK. (rather then the PHP sdk) You don't need to reload the page. You can deal with logged in user states in the callbacks.
//load the async FB sdk
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
//Do something when the user is logged in
FB.Event.subscribe('auth.login', function(response) {
//do something with response object
});
</script>
EDIT***
I think I didn't explain enough/correctly, here are the steps when I have the problem with the session:
1.- User logins with jssdk and accepts my app.
2.- Now I use the PHP-SDK to getUser(); and restrict or show some pages.
3.- User DOES NOT log out, but revokes the permissions directly from the profile settings.
4.- User returns to my application (without closing the page/browser of course) and the PHP-SDK still returns getUser() as a valid
connected user!
5.- How my application is supposed to know that the user revoked the permissions if the PHP-SDK says the getUser() is a valid ID?
My users login to my application with the JS-SDK and the following code:
FB.login(function(response) {
// handle the response
}, {scope: 'email,user_likes'});
-- and this is the asynchronous script
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '****************', // App ID
channelUrl : 'localhost', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth:true
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>`
However, when the users remove the application from their privacy settings and try to access my application again, this code still outputs the user ID $user = $facebook->getUser();
I checked the facebook.php from the PHP-SDK and there's a method that is supposed to unset the SESSION but doesn't unset anything.
protected function clearPersistentData($key) {
if (!in_array($key, self::$kSupportedKeys)) {
self::errorLog('Unsupported key passed to clearPersistentData.');
return;
}
$session_var_name = $this->constructSessionVariableName($key);
unset($_SESSION[$session_var_name]);
}
Is this a bug? or Facebook always reads the session even if the user revoked the permissions of the application?
I think the behavior of $facebook->getUser(); should output 0 when the user is not connected to the application, but of course this is not what happens.
Session and permission via Facebook are 2 different things.
A session is application and user specific to your code. You need to control this session.
If someone revokes permissions for your app, then all it does it remove permission in Facebook. Your app isn't notified unless you have setup the correct settings in your Facebook app. And even still you need to clear the session.
So while the session will hold the information it previously obtained, if you try to connect to perform something on Facebook with the permissions you previously had you will get an error.
I am allowing my users to login to my web-app using their Facebook account.
A user is auto-logged in to my website through Facebook if -
They are registered to my site using Facebook
They haven't logged out of my site and ended their session
They are currently signed into Facebook
This is fine, except, there is a pause between the user accessing the homepage and being taken to their dashboard whilst Facebook checks whether they have logged in. Is there a way to show a sort of pre-loader that says "Signing in with Facebook" whilst the transition is made?
I am using the following Facebook javascript -
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function() {
FB.api('/me', function(response) {
window.location='mysite/fb_signin/';
});
});
};
(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>
Thank you.
With the facebook api you are able to check if the user is connected or not before doing to call to FB.api (that is what taking time).
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
This should help
I agree with Marc that you can use the getLoginStatus() to help you determine what they are before you send them to one place or another. However, you said something was slow. So that led me to look at your code, and it appears you're missing the channelUrl in your FB.init() call (see https://developers.facebook.com/docs/reference/javascript/ for more information). without the channelUrl user interaction with the Javascript SDK functions will be sluggish and slow.