How to bind Facebook onlogin event to customized button? - facebook

Question

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>

Answer 1

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'
});

Answer 2

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.