RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


The To-Do List for Securely Adding a Facebook Login Button : Page 2

Get the Facebook login button to work together with your site's existing user and session management while maintaining the site's security level.


Step 2: Knowing When the Facebook Login Button Is Clicked

Having the Facebook login button on your site is nice, but you have to know when it is being used. You need a trigger to inform the rest of your application when a user performs a login or logout transaction on Facebook while on your site. For that, you need to use the SDK (JavaScript SDK in our case) provided by Facebook. As mentioned earlier, the Facebook SDK is available in PHP for server side use and for Android and iPhone mobile systems, or in JavaScript if you want to move the action to the front end. The JavaScript approach is a little more universal since it does not require you to use PHP in your application. The JavaScript approach also has a higher adoption, so that is the approach we will cover in this article.

You need two methods from the JavaScript SDK in order for your application to know when your site's user logged in or out of Facebook. The two methods for logging in and out are listed below respectively:

if (response.status == "connected")
FB.api('/me', function(response)
// Perform appropriate action. This is where you collect user parameters and make an Ajax call. 
// Here is how to get the parameters:

first_name = response.first_name;
last_name = response.last_name;
email = response.email;
location = response.location.name;

// Use the above values as parameters in the Ajax call to log-in or register this user.

// Perform appropriate action

Once these are triggered, a common approach is to make an appropriate Ajax call and perform some security and authentication steps on the server side. Notice in the above code to initially place the Facebook button, you use this line:

<fb:login-button show-faces="false" perms="user_about_me,email,user_location" autologoutlink="true" width="200" max-rows="1">

This is the code used to place the actual Facebook button within your HTML wherever you want the login button to appear. This is also the code to tell Facebook which permissions the user must consent to give your site upon logging in. The permissions or perms field contains a few items. Upon login, the user will be presented with a dialog, asking them if your site can have access to that information.

If you try to get permissions to retrieve too many data points, it might spook some of your users and a portion of them may think twice about letting your site have access to so much of their information. If you want to increase adoption on your site, you should aim to request as few parameters as your application really needs. The code above gives you access to the person's name, email, and address in case you need to geo-encode their location. For most sites that is enough to perform basic authentication. If your site does not need to be location-aware, you can remove the user_location attribute.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date