Facebook Connect disable auto login - facebook

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..... */

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

User permission dialog doesn't pop-up for tab application

I have a strange behavior for an application that I have implemented and that captures the user's info when accessed.
The application, if accessed from outside Facebook URL, pops-up correctly a JavaScript permission dialog.
But when I inserted this application as a tab application into a Facebook page the permission request dialog doesn't pop-up anymore. Moreover, I have also placed in an FB.getLoginStatus() implementation the detection of the user's current login status in Facebook, with a JavaScript alert pop-up window if the user is not logged in. When the application is called from 'outside' the alert is triggered. When the application is on a Facebook page tab it doesn't.
Is this the correct behavior? If so, how can I enable the permission request in a Facebook tab application. I'm using both JS and PHP Facebook SDKs.
Edit 1 (following CBroe comment):
I'm using the following calls in the application's content.php markup (executed on page load):
<!-- Facebook JS SDK initialization -->
<div id="fb-root"></div>
<script>initFacebookJSSDK();</script>
<!-- End of Facebook JS initialization -->
<script>checkAccessPermission();</script>
<?php include_once 'sites/www.mysite.com/custom_code/custom_index.php';?> // I'm doing
custom code under Drupal
The JavaScript functions are implemented in the custom.js file, as following:
function initFacebookJSSDK() {
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxx', // Application's ID
channelUrl : 'www.appsite.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
oauth : true // enable OAuth
});
.........
});
.........
}
function getPerms() {
FB.login(function(response) {
if (!response.authResponse) {
//user refused to grant permissions, redirect to the 'index' page
window.location = "/index";
}
}, {scope:"email"}); // I request the permission to get the email address
}
function checkAccessPermission() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//user has granted permissions to the application
var uid = response.authResponse.userID; // not used
var accessToken = response.authResponse.accessToken; // not used
}
else if (response.status === 'not_authorized')
// user is logged into Facebook but didn't grand permissions to the app
getPerms();
else {
//user has not granted permissions, redirect to the 'index' page
alert('Please connect with your Facebook account');
window.location = "/index";
}
});
}
The PHP script - file 'custom_index.php' contains the following snippets:
$config = array();
$config["appId"] = FB_APP_ID;
$config["secret"] = FB_SECRET_ID;
$config["cookie"] = true;
$facebook = new Facebook($config);
// get user UID
$fb_user_id = $facebook->getUser();
// user's first visit, force the permission request window
if ($fb_user_id == 0) {
$location = $facebook->getLoginUrl(array('scope' => 'email'));
..........
}
// user already gave permission, get the profile and process
if ($fb_user_id != 0) {
$access_token = $facebook->getAccessToken();
$user_profile = $facebook->api('/me', array('access_token'=>$access_token));
..........
}
Again, it works very well when the user visits the site outside Facebook, but the permission request pop-up window doesn't show-up when it runs as Facebook tab application (frame inside Facebook). To note that, concerning my previous posting, now the JavaScript statement:
alert('Please connect with your Facebook account');
is executed in both cases, including when the application is run as tab app inside Facebook (I had just to clear the browser's cache).
Here is the solution.
All the code above is correct and stays in place.
I just added a jQuery function on the link that pulls-up the 'content.php' page, as following (the class '.open-content-page' is on the parent page of 'content.php'):
$(document).ready(function () {
$(".open-content-page").click(function() {
checkAccessPermission();
});
});
})(jQuery);
You’re calling your JS function without any user interaction – have you made sure it’s not just your browser’s popup blocker that keeps the dialog from coming up? (Maybe it distinguishes between popups called from a „simple” page vs popups from pages embedded in iframes on other domains.)
Since you can’t rely on your site’s users having their popup blockers set very liberal, it’s generally a better idea to call facebook dialogs on user interaction, f.e. when the user clicks a link/button. Popups called on user interaction are less likely to get blocked than popups that want to open all by themselves.

Facebook getLoginStatus return function not firing when page refresh

I'm using Facebook Javascript SDK. For my app, I can have a user either login using Facebook, Twitter, or an account (email/password). I can get Facebook authentication to work. After successful Facebook authentication, I create a user session and the user proceeds to use the app. I have a logout button in the app that destroys the session and sends user back to the login page.
When the user lands back on login page, they are still connected to Facebook. I've tried calling FB.logout but the return function for getLoginStatus never fires. What am I doing wrong?
Here's my code:
window.fbAsyncInit = function()
{
FB.init({appId: 99999999, status: true, cookie: true, xfbml: true, oauth: true});
//LOGOUT FB USER
FB.getLoginStatus(function(response)
{
alert("status: " + response.status);
if (response.authResponse)
{
FB.logout();
alert('logged out');
}
}, true);
//SUBSCRIBE TO LOGIN EVENT
FB.Event.subscribe('auth.login', function(response)
{
if(response.authResponse)
{
FB.api('/me', function(response)
{
//at this point user has been authenticated so they can continue with app...
});
}
else
{
alert("Ooops, the Facebook authentication has failed. Please try again.");
}
});
};
(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.getElementById('fb-root').appendChild(js);
}(document));
What are the best practices around incorporating Facebook authentication into your app? How do you manage logging user out of your app without logging them out of facebook altogether?
Thanks for your time.
Sorry, I misunderstood your question.
The FB SDKs only supports logging out from FB, and then you can use the callback for logging the user out from your own site.
In this case you want to logout the user from your own site but not FB - then you should not use the SDK for logout, as this is used to logout the user from FB.
Instead you will have to make some kind of "reverted" login system.
If the user logs in with FB then set a session/cookie "mySiteLogin".
When checking for authorization, check both the FB-login AND "mySiteLogin".
When the user clicks logout unset/delete "mySiteLogin".
This is just a solution of the top of my head. But I too was not able to find any out-of-the-box solution.
There's three things that are all trying to do something with login
status: true
FB.getLoginStatus(function(response)
FB.Event.subscribe('auth.login'
When status is set to true, the SDK will call facebook to see if the current user is authenticated. Then you also have a check again of getLoginStatus and then while that is running async, you subscribe to the auth.login.
auth.login will be called even from the status: true call and possibly again from the getLoginStatus call.
Instead of doing alerts which interrupt the flow, do console.logs so you can see what's being called when.
As for this question: "I do not want to log them out of facebook from my app. Is this even possible?"
Yes, you can log the user out of your app by sending an HTTP DELETE to me/permissions with that user's valid access token. This will force them to reauth your app the next time. It's about the only effective way I know of to get them "out of my app" but not log them out of their facebook session.

Facebook Connect for the website - database connection and logic

I am trying to let the users login to my website using their Facebook account. I have tried reading some information related to the process from Facebook developers (http://developers.facebook.com/docs/) page - while the process and the logic sort of make sense, I am still lost regarding the big picture.
How does 'Facebook connect' link to my existing database of users and their attributes. Say there is a user called John Walker, who is a registered user (login: jwalker pass:1234 account balance:$10). When he will come to the website, and try to login using Facebook login, how would it know where to direct him? In other words, how will Facebook know that it is the right John Walker, and he should be sent to his user page?
I am sorry if this question is trivial, but I just can't think it though myself. Thanks for your help in advance!
Zachary
Well Zachary, you have a little bit misconception regarding to facebook connect. When a user clicks on facebook connect button placed on your site, facebook doesn't go to your database to authenticate the user. He authenticates the user in his database that whether the current user is having a facebook account or not... If he/she is having account then facebook issues an access token to you for that particular user by loging him to facebook. Then its now your responsibility to login that user in your system and putting his information to your database. Let me explain more and see the following code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: "Your APP ID",
status: true,
cookie: true,
xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
// This is the place where you get control when user is login to facebook
// At this point you can redirect the user to a page where you can put the facebook returned information to database and login him into your system
} else {
}
});
FB.Event.subscribe("auth.login", function(response) {
window.location.reload();
});
FB.Event.subscribe("auth.logout", function(response) {
self.location.href="http://www.iranibash.com/logout.php";
});
};
(function() {
var e = document.createElement("script");
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
Now you can use the information about user that facebook returns you after successfull login. You can have that information in a $cookie. I think you can understand from this information?

Facebook logout button and redirect after logout

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}