I'm implementing facebook authentication (register + login) at my website. Everything works fine, except for the button showing even if I'm logged in. Thanks in advance
<h1 id="welcome">Welcome to my website</h1>
<div id="fb-root"></div>
<span id="fb-login" class="hidden">
<fb:login-button registration-url="http://lemiart.com/register.php"></fb:login-button>
</span>
<script src="https://connect.facebook.net/en_US/all.js#appId=306738122732711&xfbml=1"></script>
<script type="text/javascript">
FB.init({appId: '306738122732711', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(){
loggedIn();
});
FB.getLoginStatus(function(response){
if (response.session){
// user logged in. Let the auth.login subscription handle this
} else {
loggedOut();
}
});
loggedIn = function() {
FB.api('/me', function(response) {
var welcome = document.getElementById('welcome');
if (welcome) welcome.innerHTML += ' ' + response.id;
document.getElementById('fb-login').className = "hidden";
})
}
loggedOut = function() {
document.getElementById('fb-login').className="";
}
</script>
Your current implementation will always prompt the user to login. What you perhaps need to do is the following:
write a callback function to FB.init, which then checks if the user is logged into your application and then decide if you want to show the fb:login-button.
It would look something like this:
window.fbAsyncInit = function() {
FB.init({
//...
});
FB.getLoginStatus(function(response){
FB.getLoginStatus(function(response){
if (response.session){
// user logged in. Let the auth.login subscription handle this
} else {
loggedOut();
}
});
};
Related
i have two Facebook plugins(like and comment box) on my page.
when i login with on plugin it not logins another plugin automatically until i refresh page.
for example : when i login by clicking on like button,my comment box remains in logout state until i refresh page.
please suggest me something good for that problem
my code is as follow
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My app ID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
//alert('edge.create');
setTimeout(aaa, 500);
});
FB.Canvas.setDoneLoading(function () {
alert("Done loading");
});
FB.Event.subscribe('comment.remove', function (response) {
alert('The status of the session is: ' + response.status);
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
function aaa() {
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: false
}
});
}
</script>
<div class="fb-like" data-send="false" data-href="http://www.facebook.com /AiLiveCaptions" data-width="298" data-show-faces="true">
</div>
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num- posts="8" order_by="reverse_time" data-width="280"></div>
You can use
FB.XFBML.parse();
to render XFBML markup in a document on the fly.
FB Documentation
I am using FB.getLoginStatus() and FB.Login() to log the user into my website using facebook. I first check for the status on page load using FB.getLoginStatus() and save the state in a hidden variable. When the user clicks on my facebook login button, I first check the value in the hidden variable and call FB.Login() only if FB.getLoginStatus() is not connected. If FB.getLoginStatus() returns 'Connected', then I just log the user into my website without FB.Login().
My scenario with issue
*user logs into my accont using facebook
*user logs out of my website
*my website is open in the logged out state
*in another tab, the current facebook user logs out of facebook and a new user logs into facebook
*user comes back to my website and clicks on facebook login button without refreshing the page
*the old facebook user (not the one currently logged into facebook) is logged into my account
How can I identify the most current user in facebook when user clicks the facebook login button?
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// initialize the library with your Facebook API key
var AppID = '<%=AppID%>';
window.fbAsyncInit = function() {
FB.init({
appId: AppID,
status: true,
cookie: true,
xfbml: true,
channelUrl: 'http://<%=Request.ServerVariables("HTTP_HOST")%>/channel.html'
});
FB.Event.subscribe('auth.login', function(response) {
//alert('logged in');
});
FB.Event.subscribe('auth.logout', function(response) {
//alert('logged out');
});
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
var uid = response.authResponse.userID;
document.getElementById('hdnFBConnected').value = uid;
}
else if (response.status === "not_authorized") {
//alert("Not authorized");
document.getElementById('hdnFBConnected').value = '';
}
else {
//alert("user not logged in to facebook");
document.getElementById('hdnFBConnected').value = '';
}
});
};
</script>
<img src="<%=global_language & "/images/FacebookSmall.gif"%>" />
<script type="text/javascript" language="javascript">
function WindowOpen() {
if (document.getElementById('hdnFBConnected').value != '') //user is connected
{
FB.api('/me', { fields: 'first_name, last_name, locale, email' }, function(result) {
var uid = document.getElementById('hdnFBConnected').value;
//log the user into my site
})
}
else { //user is not connected, so calling FB.Login()
FB.login(function(response) {
if (response.authResponse) {
var access_token = response.authResponse.accessToken;
FB.api('/me', { fields: 'first_name, last_name, locale, email' }, function(result) {
var uid = response.authResponse.userID;
var globalLang = '<%=global_language%>';
//log the user into my site })
}
else {
//alert('User cancelled login or did not fully authorize.');
}
}, { scope: 'email' }
);
}
}
</script>
</body>
What you're describing is normal behavior. The JS SDK is sending the old user's signed_request object which allows the new user to access her account. Since this concerns you, include a logout button on your app's page and let the user know that it's important she clicks that button when she's done using your app. The logout button should call FB.logout like so:
FB.logout(function(response) {
// user is now logged out
});
For extra security, you can create an activity timer that prompts the user to click a button after X minutes of inactivity. If the user doesn't click within, say 1 minute, she is logged out automatically. This is how most banking sites deal with session security.
For a few days i was trying to use a custom button to invoke login
$(".join").live("click", login);
function login(){
FB.login(function(response) {
if (response) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
async: 'false',
type: 'GET',
url: 'www. address.com',
data:
"uid=" + response.id +
"&name=" + response.name,
success: function(){
console.log('Ajax successful.');
console.log("<?php echo $this->session->userdata('fb_uid'); ?>");
window.location = "www. address.com";
},
error: function(){console.log('Ajax failed.');}
});
}
$(".join,.log,.biggie-btn").live("click", login);
However it was always buggy, the login window would not close (oddly, most of the times) and after I closed it, I would not get the user FB.API details, and I had to refresh the page to get them.
As soon as I switched to the bugs were gone (having exactly the same functionality), however I can't control now the style of the login button.
Is there a solution, to have a fully functional custom login button?
You can use the Facebook javascript SDK and easily build your own login button. Just have the button class FB.login and pass it a callback function and optionally any extended permissions you need. Upon success, this will set a cookie that has an access_token that you can use from server code if needed. Otherwise, you can just call javascript sdk functions.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Custom Login Button
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me',
function(response) {
alert('User: ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:'user_about_me'});
}
</script>
</body>
</html>
I'm using the new JS SDK API. (Graph API)
However, if I include the FeatureLoader.js for old FBCOnnect, then it will overwrite the graph API functions..
so, is there anyway in new JS SDK that I can do requireFeatures(['Connect'] ...) as in
FB.Bootstrap.requireFeatures(["Connect"], function()
{
}
No. None of that stuff is needed or supported in the new SDK. All you need to do is initialize the Javascript SDK and call the login method to login.
An example of how to do login:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
$('#loginbutton').click(function() {
FB.login(function(response) {
if (response.session) {
// user successfully logged in
} else {
// user cancelled login
}
});
});
</script>
I'm trying to use the new Facebook Graph API on my website. This is what I have:
Somewhere on the page:
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
Right after the tag:
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '<%= ConfigurationManager.AppSettings["FBAppId"] %>', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(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);
} ());
</script>
but when I click on the generated login button, nothing happens.
In addition, I'm getting
FB.getLoginStatus() called before calling FB.init().
in Firebug console.
Any ideas?
I can't believe it, I was referencing a non existing key in the Web.config hence FB.init was failing silently.
It works as expected now.
To be clearer I wasn't passing the appId to FB.init, once I did, it worked.
Had the same issue, here is the solution that worked for me. Just put the following in your head section or in other words, add the app_id to the source of the facebook js.
<script src="//connect.facebook.net/en_US/all.js&appId=xxxxxxxxxxxxxxx" type="text/javascript"></script>
In my case, the problem went away after I disabled the XFBML functionality (i.e. setting the xfbml key to false, removing the fb: namespace and the #xfbml=1 fragment in <script src="…">). Good that I didn’t need it anyway.
YMMV, there are several other valid reasons why this error message can appear.