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?
Related
I have created a custom story to be posted on facebook timeline when user clicks on a share button.
While i was logged into facebook, I could successfully post on timeline using the following code
function postLike() {
FB.api(
'https://graph.facebook.com/me/og_pricepan:compared',
'post',
{ product: objectToLike,
privacy: { 'value': 'SELF'}
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' +
response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
Now, when the user is not logged into facebook, I get the following error:
Error: An active access token must be used to query information about the current user.
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Shouldn't the login window get open by itself asking the user to login into facebook or I need to do something on my end to handle this situation?
No. You need to explicitly login the user by following the Facebook Login Flow to request an access token
Also, do i need to submit my application for review before users can create custom stories from my website to their timeline?
Yes and No. No, because it's not like you will have someone from Facebook Support Team going through your app to make sure your app ticks all the boxes. Yes, because you will need to register your app with Facebook. So, technically all you need to do is register with Facebook as a developer and register your app in order to get an app secret and API key. You can have your app in "Sandbox mode", create test users and test your integration with Facebook before you publish it live. There's few requirements you need to meet before publishing it, such as providing set of logos of a specific size, etc. Here's a blog explaining part of the process, but really, the process is very straight-forward and you should be able to get through easily by yourself.
Now, the error you are getting says it all. There's no user logged in to facebook. The endpoint you are trying to post to, requires a active valid access token, if it doesn't exist then there's no context, no user authenticated and you need to explicitly authenticate the user by invoking the login dialog...
FB.login(function(response) {
if (response.authResponse) {
// The person logged into your app
} else {
// The person cancelled the login dialog
}
});
If you need to know whether a user is logged in or not, you can follow to simple approaches:
1.By invoking the FB.getLoginStatus function
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
}
else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
}
else {
// the user isn't logged in to Facebook.
}
});
2.Or, by subscribing to the auth.authResponseChange event when initializing the framework and setting the status option to true
There's a full-legged tutorial on Facebook Developers Site for Javascript SDK explaining both approaches.
Hope it makes sense
In my app, I have my user connect with FB and grant my app permissions.
When they click the Connect button , the FB popup is displayed and they get the
"Login with facebook" and then they need to grand permissions to publish_stream, manage_pages, email.
the problem i am having with my code, is if they remove one of the permissions (like manage_pages ) checkLoginStatus still lets the user continue.
So how to i verify that the user has granted the requested permissions?
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '<?=FB_APP_ID?>',
status: true,
cookie: true
});
FB.getLoginStatus(checkLoginStatus);
function authUser() {
FB.login(checkLoginStatus, {scope:'publish_stream, manage_pages, email'});
}
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
$('#connbut').hide();
FB.api('/me', function(user) {
if (user) {
$('#fbuser-name').text(user.name);
$('#fbuserpict').attr('src', 'https://graph.facebook.com/' + user.id + '/picture');
$('#fbname').val(user.name);
$('#fbpict').val('https://graph.facebook.com/' + user.id + '/picture');
}
});
} else {
// Display the login button
$('#connbut').show();
}
}
</script>
the problem i am having with my code, is if they remove one of the permissions (like manage_pages ) checkLoginStatus still lets the user continue.
Of course it does, because FB.getLoginStatus says nothing about permissions – it only tells you whether the user is connected to your app or not.
So how to i verify that the user has granted the requested permissions?
You can ask about the permissions the user has currently given your app by requesting /me/permissions (or even just ask for specific permissions using field expansion).
But doing so client-side via JS seems to be cached somehow – asking for permissions, seeing there’s one missing, calling FB.login and asking again will, from my experience, most likely still show the same permissions as before, even if the user has given additional permissions in between. The only way to get reliable information in real time seems to be to do it server-side.
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.
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.
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..... */