prevent facebook js sdk from calling login callback - javascript

I have a Facebook login button:
<fb:login-button scope="email,user_birthday">Login with Facebook</fb:login-button>
and this JS:
window.fbAsyncInit = function() {
FB.init({
appId: 'APP_ID_HERE',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
My issue is that any page that contains this code always reloads once. It's because the login callback above is called (if the user is logged in to a Facebook account) even if the user has not yet clicked on the Login button above. Is this normal behavior? If not, how do I prevent the login callback from being called?

This event fires each time the SDK detects that the state changes from unknown/not_connected to connected.
It sounds like you want to actually provide a callback handler on the login button via onlogin

One solution: You could use the PHP sdk to check for the user status, and only if the user is NOT logged in, create the JavaScript part where you subscribe to auth.login.

Related

publish_actions in scope not triggering second dialog

I have the following javascript code to login to my website using facebook
FB.login(function(response) {
if (response.authResponse) {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
//proceed to login
} else {
//login failed
}
}, {scope: 'publish_actions, email, user_birthday',
appId : 'myAppId',
cookie : true});
The first dialog shows up fine requesting their email and birthday. However, the second (optional) dialog does not show up requesting to post to their profile. I have seen this on many sites, but it does not show up on mine.
Is there any other steps I need to take to show this? I have tried publish_stream as well.
EDIT: Still no answer. I am testing with a Facebook account that was previously connected, but I removed the app from my Facebook profile and connected again. That should ensure that the second dialog comes up, but it doesn't.
I once read in the facebook documentation you must request this permission in the init function.
try
window.fbAsyncInit = function () {
FB.init({
appId: 'Id_App',
status: true,
xfbml: true
}), { scope: 'publish_actions' };
};

calling FB.login() in FB.logout() callback function

I have to check the FB user is the user who logged in my app,
my idea is that call login() in logout() callback function using javascript
FB.getLoginStatus(function(response){
if(response.authResponse){
FB.logout(function(r1){
FB.login(function(r2){
...
...
...
},{scope:"..., ..., ..."});
});
}
});
It can logout successfully. But after I log in, the log in dialog doesn't close.
I've try to set auth_type to re-authenticate, but reauth dialog cannot logout if the FB user isn't correctly.
I'm using URL to logout in some cases. but not suitable for all.
Anyone has idea for login function in the logout callback function?

Facebook js sdk can't retrieve name of logged user

I am using the facebook JS SDK. I am currently logged in facebook and my code is the folowing :
$(document).ready(function() {
FB.init({
appId: "myappID",
xfbml: true
});
FB.api('/me', function(response) {
alert(response.name);
});
});
The alert I'm getting says "undefined". Why ? Is there a way to get the Facebook unique app-id ?
Thank you very much
The alert I'm getting says "undefined". Why ?
Most likely because your user account hasen’t connected to your app yet.
Call FB.login first, and put the API call into the callback handler.
Because you haven't authorized your app yet.
Use FB.login to login to your app first.
I found weird that you are initializing the FB JS SDK inside a jQuery's $(document).ready.
Are you doing sync-loading? If you are following the Facebook's instructions you are actually doing a async-loading, which is better, because does not block the page loading. In a async-load, the <script> tag that contains all.js (the Facebook's JS SDK) is attached to document DOM after the $(document).ready event triggers.
So, you are trying to access a js-object (FB) that is not defined yet. It is better to assign your code to the window.fbAsyncInit, as instructed in Facebook's documentation:
window.fbAsyncInit = function() {
FB.init({
appId: 'AppID',
cookie: true, // I think you'll need this cookie to make the API call
xfbml: true
});
// Additional initialization code here
FB.api('/me', function(response) {
alert(response.name);
});
};
Good luck!

FB.INIT not forcing login even with status:true js sdk

My app allows users to send requests using Facebook Requests Dialogue.
I run the init as follow:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '193078857407882',
status: true,
cookie: true,
xfbml: false,
});
</script>
From what I understand in the documentation the 'status: true' is supposed to check if the user is logged in to facebook.
However in my app when the user is not logged in it just shows the following error message:
An error occurred with hbg. Please try again later.
How can I force the application to check if the user is logged in and if not to log in?
Rails 3.0.7, Ruby 1.9.2, Js SDK
According to the Facebook docs for FB.getLoginStatus, if you want to receive the response from passing status: true to FB.init, then you need to subscribe to the auth.statusChange event:
While you can call FB.getLoginStatus any time (for example, when the
user tries to take a social action), most social apps need to know the
user's status as soon as possible after the page loads. In this case,
rather than calling FB.getLoginStatus explicitly, its possible to
check the user's status by setting the status: true parameter with you
call FB.init.
To receive the response of this call, you must subscribe to the
auth.statusChange event. The response object passed by this event is
identical to that which would be returned by calling FB.getLoginStatus
explicitly.
So in your code you would do something like
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});
Except you would subscribe to auth.statusChange instead. Note, however, that according to the FB.Event.subscribe docs:
auth.statusChange() does not have a 'status' field.
You can check login status by calling FB.getLoginStatus
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user
} else {
FB.login(function(res) {
if (res.authResponse) {
// user logged in
} else {
// user cancelled login
}
});
}
});

Confused by nature of JS SDK Facebook Events

I'm having a bit of trouble designing the user login/logout mechanism of my website that works with facebook.
The behavior of certain facebook events seems counter-intuitive:
'auth.login' fires on every page load when the user is logged in.
FB.getLoginStatus() fires on every page load, as I would expect
'auth.logout' fires only when the user actually logs out, and unlike 'auth.login,' auth.logout does not fire on every page load when the user is not logged in.
I want to build a system that detects whether or not the users session thinks that user is logged into facebook. If the user's session is set to believe they're logged into facebook, but they're actually not then perform an ajax call to the server and update the session. If the session and the facebook js sdk are in agreement over whether the user is logged in or not, do nothing. And if the user's session is unaware that user is logged into facebook but the js sdk says they are, update the server with an ajax call.
I want to create an application that syncs with the users current facebook login status. And I would like that application to login/logout (by executing an ajax call to my server to update their session) whenever they're facebook status changes. This is difficult since I can't seemto reliably detect when a user logs in or out of facebook.
One particular problem I have is when the user loads the page and they're logged into facebook, BOTH the auth.login event and the FB.getLoginStatus() events fire.
My ultimate question is, what combination of facebook-events or general strategy do i have to use to create such an application. A good example of what I'm going for is hulu.com's implementation of facebook login into their website. Thanks for reading this!
<script>
window.fbAsyncInit = function() {
FB.init({appId: '<?=$facebook_app_id?>',
status: true,
cookie: false,
xfbml: true});
FB.getLoginStatus(function(response) {
console.log('getLoginStatus');
console.log(response);
if(response.session){
if(window.module.Globals.prototype.oauth_uid != response.session.uid){
//authenticated user unknown to server, update server and set session
window.module.VCAuth.prototype.session_login();
}
}else{
if(window.module.Globals.prototype.oauth_uid){
//unauthenticated user with authenticated session, update server and unset session
window.module.VCAuth.prototype.session_logout();
}
}
});
FB.Event.subscribe('auth.login', function(response){
console.log('auth.login');
console.log(response);
});
FB.Event.subscribe('auth.logout', function(response){
console.log('auth.logout');
console.log('response');
});
};
(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);
}());
</script>
I would recommend using the same callback for all methods. This way you get one authentication code path to worry about. Like this: (which is not that far off from the code you provided)
function authCallback(response) {
if(response && response.session){
if(window.module.Globals.prototype.oauth_uid != response.session.uid){
//authenticated user with invalid session
window.module.VCAuth.prototype.session_login();
}
}else{
if(window.module.Globals.prototype.oauth_uid){
//unauthenticated user with authenticated session
window.module.VCAuth.prototype.session_logout();
}
}
}
FB.getLoginStatus( authCallback );
FB.Event.subscribe('auth.login', authCallback);
FB.Event.subscribe('auth.logout', authCallback);
You said one main problem was:
BOTH the auth.login event and the FB.getLoginStatus() events fire.
Just make sure that session_logout() and session_login() set/unset the oauth_uid before making the async call to the server so that the next time the callback is called the correct state of the VCAuth is set.
Note: auth.logout is not fired every page load because auth.logout implies the user was logged in. It doesn't make sense to fire auth.logout if the user was never logged in right?
Hope this helps.

Categories