Facebook logout button and redirect after logout - facebook

I use this code
<fb:login-button autologoutlink="true" perms="user_likes" size="large"></fb:login-button>
to create a login/logout fb button.
Everything works, after the login, the login button become a logout button. But If the user click on the logout button, the current page is not refreshed and so all the things that should appear only when the user is authenticated are still there until a manual page refresh is done.
This doesn't happen if I get the logout url (Javascript SDK)
$logoutUrl = $facebook->getLogoutUrl();
and then implement a logout button myself; in that case a proper "next" parameter (with the url of the current page) is passed and the current page is reloaded.
I still would like to use the first solution, is it possible to make it use the "next" parameter?

Do the redirect yourself - add this to JavaScript, somewhere after FB.init():
<script>
FB.Event.subscribe("auth.logout", function() {window.location = '/logout'});
</script>
This function will fire when logout through the FB button happens.

For integrated authentication (Facebook + Asp.Net MVC), I just use Javascript and FormsAuthentication.SignOut();
function LogoutFacebook() {
FB.logout(function (response) {
window.location = "/facebook/logout/";
}); }

Above answer by Piskvor did it for me. Its crazy how many hours I've spend trying to figure this out.
Main problem with plugins such as this Facebook for CakePHP is that they don't come with updates. APIs, especially popular ones like Facebook, change all the time because they are being imporved. If the guy who wrote it initially as a hobby moves on with his life and stops updating the SDK people who are less knowladgable on how to alter these things become stuck.
WORKING CODE:
Nevertheless, thanks for a great solution Piskvor, here is my piece of code for
apps/plugins/facebook/views/helpers/facebook.php
$init .= $this->Html->scriptBlock(
<<<JS
window.fbAsyncInit = function() {
FB.init({
appId : '{$appId}',
session : {$session}, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe("auth.logout", function() {
window.location = '/users/logout'
});
{$callback}
};
The key piece of code here is:
FB.Event.subscribe("auth.logout", function() {
window.location = '/users/logout'
});
{$callback}

Related

FacebookJavaScriptLoginHelper fails to authenticate user on first page refresh

I'm creating a Facebook app for mobile devices. Such application is displayed within a mobile browser, unlike Facebook canvas pages which are held in an iframe.
I'm using a mix of JS and PHP SDK to authorize and authenticate a user. The user needs to be already logged into Facebook to use my app. If not, they need to log in with Facebook login button. As a bridge between JS and PHP SDKs I'm using FacebookJavaScriptLoginHelper.
Part of my Facebook.php library doing the job:
<?php
// Initialize the SDK
FacebookSession::setDefaultApplication($this->app_id, $this->app_secret);
// Create the login helper
$this->helper = new FacebookJavaScriptLoginHelper();
try {
$this->session = $this->helper->getSession();
} catch(FacebookRequestException $ex) {
// When Facebook returns an error
} catch(Exception $ex) {
// When validation fails or other local issues
}
if ($this->session) {
// User logged in
$this->session = new FacebookSession($this->session->getToken());
}
?>
Facebook JS init:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '{my app id}',
status: true,
xfbml: true,
cookie: true
});
}
FB.getLoginStatus(function(response) {
console.dir(response);
});
</script>
The above code works fine but there's a specific case when it fails. Let's assume I have two tabs open in my browser: in the first tab I have my app open, in the second one - I'm logged into Facebook. Two scenarios can take place:
I log out of Facebook and refresh the tab with my app. The result is correct:
FacebookSession is NULL
response.status from FB.getLoginStatus is 'unknown'. The user is not
logged in.
I go to the second tab, log back into Facebook and refresh the first tab with my app. The result is incorrect, but only on the first refresh:
FacebookSession is still NULL, even if
response.status of FB.getLoginStatus is 'connected'
The reason behind this fail on first refresh seems to be obvious: In the moment of reloading the page PHP SDK is triggered before Facebook cookie is refreshed. However, it's never a problem when the user logs out - in this case, somehow FacebookSession is updated instantly, as expected.
How come it does not work the same when the user logs into Facebook?
Does this help?
Subsequent calls to FB.getLoginStatus will return data from this cached response. This can cause problems where the user has logged into (or out of) Facebook since the last full session lookup, or if the user has removed your application in their account settings.
To get around this, you call FB.getLoginStatus with the second parameter set to true to force a roundtrip to Facebook - effectively refreshing the cache of the response object.
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
Source: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
Section: Roundtrips to Facebook's servers

FB.Login not working in Opera Mobile

I have a mobile web site using Facebook Connect to authenticate user. I encountered a problem login with Opera Mobile. I have below javascript to detect login status, but only in Opera Mobile the callback is not firing. Is anyone encountered this problem?
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxx',
channelUrl: 'http://xxxx/channel.html',
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
function handleStatusChange(response) { // --> NOT FIRE
if (response.authResponse) {
//Login, show Logout button
}
else {
//Show Login button
}
}
Please make sure you put the JS tags and other required HTML in a logical order (if you use an fb-root element put the scripts after it, try putting them inside BODY if they are currently in HEAD). I've seen FB login fail because the tags were in the wrong order, and because some browsers do "speculative parsing" this cause of random cross-browser malfunction may not be immediately obvious. (Besides, you create a race condition that might break in any browser if the network has a hiccup and the timing of loading stuff is unexpected..)
If you still have problems it would be useful to get a link or a demo to look at. We've tested a random page that uses FB Connect and worked fine. Apart from tag order issues I can't guess what might go wrong for you here.
Opera Mobile has new release today (12.10.ADR-1210081231). It solved the Facebook login issue, but there is a minor issue. The Facebook windows will not close automatically after user login.

Facebook application: FB events work only for first time

I'm using the following code to subscribe to fb login and logout events.
FB.Event.subscribe('auth.logout', function(response) {
RefreshPageOnFBStatusChange(response);
});
FB.Event.subscribe('auth.login', function(response) {
RefreshPageOnFBStatusChange(response);
});
function RefreshPageOnFBStatusChange(response)
{
alert(response.status);
}
I want to redirect users to different pages when they are logged in or logged out. The function I'm using here gets called only during the actual page load, and never after that. I have a fb-like, fb-share and live stream plugin on a page. When I login and logout of live stream, nothing happens. Help!
Please modify your question and provide all FB-related code.
This may answer you question:
Facebook FB.Event.subscribe event does not fire:(
For User Status you can use if(FB._userStatus == "connected"){} to check user is login or not And for Logout & login you can use following simple code
FB.logout(function(response) { window.location = redriect_uri;
});
It seems like these events don't fire when you use the live chat plugin because it has its own way of handling the login and logout. What I had to do to solve this problem was to set a timeout of 5 seconds and call a javascript function that did a FB.GetLoginStatus, and based on what it was I would refresh the page. Not the best way of doing it, but I was left with no choice.

Facebook Connect disable auto login

I integrated the graph api facebook connect but if we are login to facebook, we will automatically login to the site with facebook connect as well. Is there any way we let the user clicks on fb "Login" only then the user is connected to the site with their fb account?
Now the user is automatically login to the site without the option to choose whether they would want to use their facebook account. If they want to logout from the site, they need to logout from facebook completely only then they can logout from the site with facebook connect as well.
Anyone can help me or give some tips how to go about?
Thank you!
I had this same problem on a recent website, and found a way to overcome it. My solution allowed a user to already be logged into facebook on their computer, yet not have it auto login on my website, then they can login with Facebook Login button and finally when they logout it won't log them out of Facebook on their computer, just on my website (much like Digg does with facebook).
To do it I was using https://github.com/facebook/php-sdk/ to check within PHP if there was an active facebook session with the user and the website (which would cause the auto login). If there was, I would not echo the auto login code:
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function() {
window.location = "process-login.php";
});
but instead just render my own facebook login button that would link to "process-login.php".
process-login.php would set the custom $_SESSION variable that told my website someone was logged (whether via my own system, or via facebook), and then reload the referring page (using $_SERVER['HTTP_REFERER']) which would now display the user as logged in via Facebook since my own $_SESSION variable was now set. To log them out (without logging them out of Facebook entirely, just my website), I would just load a logout script that removed the $_SESSION variable.
The example.php (in the php-sdk on github) was very helpful at finding my solution, though I had to customise it significantly to make it work with my existing system. It at least helped me see how to access the facebook session variable in PHP (stored in $me in the example).
Hope this helps you if its still a problem, or that it helps someone else in this situation.
EDIT:
Turns out I still had some issues with auto login on the rare occasion. To fix it I removed the event.subscribe('auth.login') and make a facebook button that called the following function to check login status before subscribing to the auth.login even. Here is the function:
function check_login_session(){
FB.getLoginStatus(function(r){
if(r.session){
window.location = '/process-login.php';
}
else{
FB.Event.subscribe('auth.login', function(response) {
window.location = '/process-login.php';
});
FB.login();
}
});
}`
I had the same problem, I guess that you are using the scripts provided by facebook. In that case you have a function associated with the window.fbAsyncInit event. This happens everytime that the page is loaded.
At the end of this method you have the code:
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
The function statusChangeCallback verifies your user's facebook status (connected, authorized, or unknown). Here, if the user is "connected" you log him into your site. Well that's the problem, you are always trying to log the user in with facebook.
This must only happen on click, so you should erase those lines
hello dear I think you have made your question so confused. Your question is not stating what actually do you want. As for as I have understood I think you want to connect the user to you site through facebook connect and you want when user clicks on facebook logout, it automatically logouts from your site.
if my understanding about your question is right then simply let the user to login through facebook and do logins in your system in FB.Event.Subscribe event.
Use the following code for login button
<fb:login-button perms='email' autologoutlink='true'>
When user will allow your his facebook account to connect with your site
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
FB.init({appId: "Your APP ID",
status: true,
cookie: true,
xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
// Send here parameters that logins to your system through your website login system
} else {
}
});
FB.Event.subscribe("auth.login", function(response) {
window.location.reload();
});
FB.Event.subscribe("auth.logout", function(response) {
window.location.reload();
//Send the Parameters that logouts user from your website through your website logout system;
});
};
(function() {
var e = document.createElement("script");
e.type = "text/javascript";
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
and put the above whole code right after your <body> tag
If You have:
FB.Event.subscribe('auth.login', function() {
fbLogin(this);
});
Try to comment it /* fb.Event..... */

Facebook Application Tab URL

I have a facebook application that can be added to fan pages as a tab. The application requires that users are authenticated in order to use it. This can be accomplished by using requirelogin=1 in a link which is visible only to users who have NOT added the application. This part works fine.
However, after the user has given my application permission from the dhtml pop up that requirelogin opens, I want the tab to reload. In order to do that, I need the full URL to be included in the link as follows:
<a href="http://www.facebook.com/pages/PAGE_NAME/PAGE_ID?v=app_APP_ID" requirelogin=1>Authorize</a>
I cannot figure out how to get the full url or, at least, the PAGE_NAME to build this url dynamically. Seems like the app should be able to know where it is without any special permissions.
When your Tab is loaded, the API passes you a Signed Request that contains, amongst other things, a page array contain id, liked & admin. You can use that to dynamically pull the page id that's currently calling your code.
If you have the PAGE ID and APP ID, this is what you do:
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
For example:
http://www.facebook.com/profile.php?id=282955631557#v=app_278523304881
In the new scheme, the # no long works. One needs to use
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
To carry parameters to the app, it has to be in a parameter called 'app_data'
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID&app_data="..."
To carry multiple parameters, the best strategy is to encode app_data in Json.
All of the above answers will not work (redirect you only to page stream) or are deprecated now. The best solution thou is using JS:
// called when like button, box, etc is rendered
FB.Event.subscribe("xfbml.render", function() {
// assigns click to that thing
FB.Event.subscribe("edge.create", function(response) {
window.location.reload(); // reload frame only
});
});
You'll also have to load and init facebook JS SDK. If you don't know how to do it, use this:
<script>
document.onload = function(){
(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/pl_PL/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
window.fbAsyncInit = function(){
FB.init({
appId : <PASTE_YOUR_APP_ID_HERE>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe("xfbml.render", function() {
FB.Event.subscribe("edge.create", function(response) {
window.location.reload();
});
});
}
}
</script>