a simple problem is that i want when user logged in to Facebook so user automatically
logged in to my sites.i have FBconnect implemented in my site .no refresh the page..
FB.getLoginStatus(function(response) {
if (response.session) {
//what to do here???
//i dont want to use setTimeout() in this function to check it again & again
}
});
any idea how to do this???
It seems like you need...
FB.Event.subscribe('auth.login', function(response) {
// do something with response
});
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Related
I know how to use custom button as Facebook login.
Now I'd like to bind onlogin event to customized button, but I don't know how to do.
Original code
<fb:login-button scope="public_profile,email" onlogin="afterLogin();">
</fb:login-button>
<script>
/* Assume that Facebook SDK loaded asyncronously and initilized */
function afterLogin() {
// Do stuff
}
</script>
My code
<button id="cusomized-button" onclick="fbLogin();" onlogin="afterLogin();">
Customized button
</button>
<script>
/* Assume that Facebook SDK loaded asynchronously and initialized */
// Show facebook login modal
function fbLogin() {
FB.login(function() {}, {
scope: 'email,public_profile'
});
};
function afterLogin() {
// Do stuff
}
</script>
Assuming you use version 2.4 of the Graph API, you are able to subscribe to an event called auth.login which is fired whenever the login status changes.
So, if you want to react to when the user logs in, you can do this and your function named afterLogin would be called once the user logs in to your app:
FB.Event.subscribe('auth.login', afterLogin);
Do note that Facebook recommends everyone to listen to auth.statusChange instead, otherwise your application will not know if the user has logged out or deauthorized the application, which would invalidate the token.
Here's an example using auth.statusChange, the response argument passed to the function contains a response object which is detailed here:
FB.Event.subscribe('auth.statusChange', function(response) {
if(response.status === 'connected') {
// `connected` means that the user is logged in and that your app is authorized to do requests on the behalf of the user
afterLogin();
} else if(response.status === 'not_authorized') {
// The user is logged in on Facebook, but has not authorized your app
} else {
// The user is not logged in on Facebook
}
});
As an alternative, the first argument to FB.login is a function which is called after the user returns from Facebook, so you could do something like this:
FB.login(function(response) {
if (response.authResponse) {
afterLogin();
} else {
// The user cancelled the login or did not authorize your app
}
}, {
scope: 'email,public_profile'
});
Here's an alternative using onlogin() in the way you originally wanted.
There's a subtle reason why you may need this:
You are using Facebook login just as a way to login to your own website
User is already connected (has previously connected to your FB)
User is NOT logged into your website.
You don't want to magically log someone in just because they're 'connected' It's not a good user experience.
So you show them the 'Login' button and once clicked you log the user in locally (provided you've established a linkage before).
In that case you do the following in the button code.
onlogin="window.fbOnLogin()"
Then depending upon your environment, somewhere in your code you would need to create a function on window. I'm using an Angular service and doing the following. This is typescript, so omit the <any> part if you're using pure JS.
constructor()
{
// Pure JS
// window.fbOnLogin = this.onLogin;
// Typescript (use lambda to keep 'this')
(<any>window).fbOnLogin = () => this.onLogin();
}
onLogin() {
call_my_server_to_login(token);
alert('Thanks for logging in with Facebook');
}
Now you can display the button to the user (and you secretly already know they're a user because the auto.authResponseChange event (or FB.getLoginStatus()) has told you they are "connected".
Note: None of the events, including auth.login will actually get triggered if you just click the button.
Once they click it FB returns immediately (becuase you're already logged in and connected) and calls your function. You then login the user your own website (you have to do a server side lookup to make sure they already logged in before). If you don't know who the user is then you have to do one of those 'associate your username' pages.
I want to know if there is way to check if user logged out from facebook? Or I need every time to do like:
$fb = OAuth::consumer( 'Facebook' );
Yes, you can. Suscribe to the authResponseChange event. Then you can know when the user login/logout.
Here is a javascript example:
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === 'connected') {
//User login
}
else
//User logout
});
}
This example is in Javascript but i'm sure you can do the same in PHP. Just check the Facebook API documentation.
Is it possible to use the the facebook login plugin with a custom UI button on my side? I dont want to use the standard FB plugin that comes with the plugin.
I want to be able to click a custom button and have it do the same action, launch pop/modal to sync.
Any help would be great.
Sure you can! But you'll have to do some JavaScript coding for it. If you use the Facebook JavaScript SDK you'll be able to log your users into your website using any element that you can trigger a JavaScript function with.
Check out the FB.login() function :
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
This function will initiate a login popup for users that have not yet logged in and request their email addresses.
It's more work than just pasting the plugin, but if you want to customize the login features then this is the way you will accomplish it.
If a user has liked a page, I would like to remove the live button. How do you do this?
If you want to test for whether a user likes a particular page or not in a programmatic way, it can be done like this:
Note that it will require you to ask for the "user_likes" permission from the user in your O-Auth connect dialog.
This code snippet will test for whether someone currently likes something or not:
FB.api('/me/likes/MY_PAGE_ID', {limit: 1}, function(r) {
if (r.data.length == 1) {
//do stuff when the user is a liker
} else {
//do stuff when the user is not currently a liker
}
});
If you want to catch the event when the user clicks the like button, then you can use FB.Event.subscribe:
FB.Event.subscribe('edge.create',
function(response) {
//Do stuff when the user just clicked a "like" button
}
);
You should use xfbml version of Like-box. Subscribe to event: edge.create http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
When a user click like in like-box, that function callback send URL of your Facebook page. Next, you can add javascript to hide like-box and set cookie of user-liked
I am using FB's Javascript SDK using the login-button:
<fb:login-button onlogin="onFBLogin();">
How can I detect within onFBLogin() if the user did log in successfully ? Currently it is called everytime, no matter what the user chooses.
Thanks,
Meir
I think the first parameter passed into onFBLogin() is going to be either a response or a session object. So check to see what the value of response or response.session is.
Also, have you played around with FBJS's login event handling?
If using FB.login:
FB.login(function(response) {
if (response.session) {
// user successfully logged in
} else {
// user cancelled login
}
});
But since you're using an fb:login button, you can try to subscribe to the login event:
FB.Event.subscribe('auth.login', function(response) {
// do something with response.session
});
I haven't tried this myself via fb:login button, but hopefully this will get you on the right track.