If you just want to set up a simple Facebook login button for your site, it is extremely straight forward and takes about five minutes. But simply having a Facebook login button isn’t very helpful because the login transaction goes through Facebook’s system and you never get to find out who just logged in and you cannot add them to your user database.

What developers typically need to do is to get the Facebook login button to work together with the site’s existing user and session management while maintaining the site’s security level. So, in order to have the Facebook login button work seamlessly with a site’s own registration system, further steps than just the basic setup are needed. These steps include working with the Facebook SDK to pull user data that your application requires, and integrating the user data with your own user management system.

Facebook provides two main SDKs for enabling a site to get access to user data: PHP or JavaScript. The PHP SDK is a server-side solution, while the JavaScript SDK is a front-end solution. Facebook also offers a couple of mobile SDKs, but they will not be covered in this article.

The PHP SDK is known to be more secure since it is a server-side solution, but the JavaScript SDK is more flexible, better technologically positioned to create a nicer user experience, and does not tie the programmer to any particular server-side language. Due in large part to these benefits, the JavaScript SDK has seen a higher rate of adoption. In this article, we will go over the setup and security concerns for using the JavaScript SDK for user registration and authentication when integrating the Facebook login button into your website.

Step 1: Placing the Facebook Login Button

Placing the Facebook login button on your site is relatively simple. This article will walk you through the setup process, but for reference you should also read through the official page for the Facebook login button setup documentation.

To place the actual button, you need to add a few snippets of code into your HTML. First, just paste the following code into your HTML, preferably in the header so that it is above the code used to place the actual button:

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:

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.

Step 3: Planning Authentication and User Management for the Facebook Login Button

In rare cases, you can get away with using the Facebook login button as your only user registration and authentication option. There are a number of pros and cons to doing that. The pros are that you have less code to write and manage, and many of the security considerations are handed over to Facebook.

The cons are that if the only login option you give your users is via their Facebook accounts, users who do not have a Facebook account will not be able to log into your site. Even if they do have a Facebook account, they may not want to associate their account with your site -- especially if they only recently discovered your site and may not trust it.

Most sites that offer to log in with Facebook tend to have a duel registration process: Facebook and a native registration/authentication process that is done through some authentication library. You will have to plan for your site to allow either multiple accounts for one person or a way to sync up the different registration paths into a single account.

Step 4: Managing User Uniqueness and Security with Email

Since email addresses are all unique, many sites use the user's email address as the unique identifier for logging in. However, there are a few security concerns with using the email as the unique identifier when enabling Facebook login on your site:

• The first time a site visitor logs in with their Facebook account, you should check whether this user's email already exists in your database. If it exists, simply log them in. If you are pulling extra information like the address (which can change often), you can verify whether the address has changed.
• If you do not have the user's email in your database, that does not mean that the user isn't already in your database. Just like a single person can have many accounts on a site using different aliases or email addresses, the user account created from the data pulled from Facebook will be a completely new user if the email address isn't the same. That might really confuse the user who wonders what happened to all their data from the account they might have created.

  One good solution to help your new users understand how the Facebook login button is meant to work is to include an explanation of what just happened in the welcome email. Since many people do not read welcome emails, you should also add notes and alerts throughout your site, explaining the same thing to the user. The combination of email and various help messages on the site will help them understand how the Facebook login button works on your system. Chess.com has a very nice example of how to do this well. On their Facebook registration page they go over all the possible options so that the user chooses each step on their own, and what is happening is very clear.

• It is also important to be aware of the duration of session expiration on your site and Facebook. If you use sessions to manage user logins, one of the sessions (Facebook's or your site's) may expire before the other.

Step 5: Building Trust with Your Users

It is important to point out that the Facebook login button can be quite confusing for end users. The button says "log in," but the first time the user logs in they actually have an account created so that the next time they log in their actions can be associated with previous actions. This works to help the users, but many people can find this usability a bit suspicious if they use the button to just log in and suddenly get an email telling them they made an account.

Use helpful messaging throughout the site so that your users are well-informed about what to expect when using the Facebook login button.

Ste 6: Dealing with Passwords

You can never get the user's password into Facebook so you do not have to worry about encrypting their password and storing it in your database.

By following the steps in this article, you will be able to securely integrate the Facebook login button into your website for user registration and authentication using the JavaScript SDK.