Add Facebook Login feature on Website

0 226

The type of sites that almost every Internet user has signed up for are Social Networks, and the most popular of these Social Networks is Facebook. People are always logged-in to their favorite Social Network. The best part about these Social Networking sites is that they facilitate a feature that allow other programs or sites to communicate with their Servers to Retrieve information about you through their API. Using this feature opens up many possibilities one of which is Authentication – The Act of confirming one’s Identity. You can easily Login one of your users by just looking at who your user is logged-in as on Facebook. Facebook Login is common all around the web.

This is a little bit of hassle for the developer but it enhances User Experience by simplifying the Login procedure as it doesn’t require your users to remember Login details.

Are you Ready?

To continue this tutorial you must know of HTML, PHP, MySQL and a little bit of CSS just to make things look nice. (Javascript based features are not included for the sake of simplicity)

You must understand what Sessions are and you must also understand how to use MySQL with PHP. We are going to use the MySQLi PHP Extension for this tutorial.

Setup Facebook Application

We must let Facebook know that our website will be communicating with their servers. To do that we have to setup a Facebook Application…

  1. Login to your Facebook account
  2. Go to this address: https://developers.facebook.com/apps
  3. Click this button on the top right corner of the page:
  4. Fill in the “App Name” Field with your site’s name

5.Fill in the other Information…

  • Make sure you add your website domain with both www. and without…
  • Don’t forget the slash(/) at the end of the site URL..
  • Remember to disable Sandbox Mode…

6. Copy down these two pieces of information somewhere else, we will need it later and be sure to show it to Absolutely No One especially the “App Secret“. Anyone else knowing these may pose a Security Threat.

10.Now Save Changes…

CONGRATULATIONS! You have finished Setting Up your Facebook app!

A Few things to note

  • Facebook will only accept Logins from the URLs provided.
  • You may(for testing purposes) change the Site URL to http://localhost/fb_login/
    and the App Domains to justlocalhost
  • If you don’t want to change the settings then all testing must be done on the server that is running at the provided Domain & URL

 

Instructions

  1. Copy and paste the files inside the Zip folder to a test directory on your server
  2. Make a database in your MySQL server named “fb_login
  3. Execute this piece of SQL inside your fb_login Database. This creates a table named “users” and fills it with example data…

4. Execute this piece of SQL, but this time replace the fields with your

  • Any Username you choose
  • Name
  • Email address that you used on Facebook
  • Any password of your own choice

5. Go back to your test Directory and open the file named “config.php” inside your favorite code Editor

6. Edit this line according to your MySQL Server settings.

For Example:

7. Save the file.

Now open the URL to your test directory(in my case: http://localhost/fb_login/) in your browser. If you have followed all the instructions correctly then you should be greeted by a page that looks like this:

After testing everything, you will notice that the “Login with Facebook” button doesn’t do anything. That button is linked to a file named “login_facebook.php“, this file is left blank intentionally so that you can follow this tutorial and code the Facebook Login system yourself.

A Little overview on what all the other files do:

  • index.php: The Main Page(aka. Homepage).
  • login_normal.php: The script that handles the standard login. It check if you have properly written your Username & Password, then if you have, it tries to match the password you have written with the password stored in the database. If both match then it sets a session variable named $_SESSION[“user”] with the id of the user who logged in.
  • logout.php: unsets the variable $_SESSION[“user”] in turn logging out the user.
  • profile.php: Simply gets information from the database according to the id set inside $_SESSION[“user”] and displays it.
  • config.php: Initializes the MySQL Database Connection and stores the connection handle in a variable named $db

Facebook Login

So open the login_facebook.php file in your Code Editor of choice then start the session, include the database connection file and set the App ID, App Secret and Redirect URI into variables as so:

Example Variable values:

So lets assume the first step is complete, but your user isn’t going anywhere yet. We must redirect the user to the Facebook Login Dialog. So what exactly is this so called Dialog?

This is the so called Dialog

This can be shown to the users by redirecting them to a URL that looks like this:-

Remember Step#6 of Setup Facebook Application? Yes, that is where you will get your “App ID”. The “FACEBOOK LOGIN HANDLING URL” is the URL to the PHP script that will handle the Facebook Login.

An Example URL to invoke the Facebook OAuth Dialog:-

You could be a Object Oriented Guru but as this tutorial was intended for Beginners so we will use the normal, procedural method. So lets write up a Function to redirect our users…

This URL alone is enough for getting your user’s First Name, Last Name and other basic information, but no we need a little more then this. We need the user’s email address in order to authenticate a user into our site. So to let Facebook know we will be needing the email address, we must send a third parameter called “scope“. The Scope parameter contains a comma separated list of special Permissions like in our case: “scope=email“. (For the full list of permission that can be requested click here)

Just as a security measure, a fourth URL parameter named “state” should be sent. This state should be a randomly generated string. The string should also be stored in a session variable temporarily so that when the string will be passed back to your site after a successful authentication in the “state” parameter once again you can match it with the session variable to confirm that the request was not a result of a Cross-Site Request Forgery.

So here is the revised dialog() function that includes the scope parameter and also sends and stores the state parameter and a Random string generator function:-


Calling calling the dialog() function will start redirecting your user to the OAuth Dialog but if we don’t add any logic then your users will be stuck in a Infinite Redirection Loop. To start coding the logic in, you must know what parameters are passed back to your site when one of the two buttons are clicked. Here is a Diagram:-

So to check if your user clicked “Okay” we can check if the “code” parameter is set. To check if the user clicked “Cancel” we can check if the parameter “error” is set, and if neither is set then it must mean the page is being requested for step#1 of the authentication process, that’s when we can call the dialog() function. So in code it should look something like:-

You could do a lot of fancy things when the user clicks the “Cancel” button like: you can Display out the error, error_reason & error_description parameters or you could save it in a session variable and show which button to click on the homepage, but for now we will just redirect the user back to the homepage.

In the code block on the middle(the one you were asked to temporarily ignore), the one which executes when the user clicks “Okay” – the passed back “state” value and the value stored in $_SESSION[“state”] are matched to protect against Cross-Site Request Forgery. Also, three new functions are introduced that we didn’t declare yet. They are: get_access_token(), getData() and authenticate_user().

Function: get_access_token()

Lets start understanding and writing the get_access_token() function. First we need to understand what a Access Token is. Access Tokens are strings which is used as a temporary passcode to be able to communicate with the Facebook servers. It has to be sent as a parameter of every request we send to Facebook’s graph API as such:

Yes! I know, that’s quite a long string! but that is an example of an access token. Each access_token is valid for only about 1 or 2 hours. Every new Access Token is unique and they are binded to a Specific user using a specific Application at a specific time frame.

Note: Every request to the Facebook API requiring an access token must be done over a HTTP Secure(https://) Connection.

To obtain an access_token we have to trade the value of the “code” parameter. This can be done by sending a get request to an end-point and passing the code as a parameter. Example:-

Requesting this URL will return a String that looks like a query string of an URL. Example:-

Lets wrap this all up into a function:

We could have used the PHP cURL Library but to keep it simple, we have not used that.

The parse_str() function converts a query string into variables. Example:

will output:

Function: getData()

So we got our Access Token, what’s next? Now we have to use this Access Token to get information about the user, especially the email address. We can do this by calling the “/me” from the Facebook Graph API. Example:-

The response from Facebook would be something like:-
(This example response was the result of requesting “/me” logged-in as me)

to be more Specific about returning only email and name we can add a “fields” parameter example:-

this is will return(The “id” field is mandatory, so it will be returned anyway):-


The responses from the Graph API are in JSON format, thankfully PHP has built-in JSON parsing functions so we can manipulate them like normal PHP Arrays. Here is the getData() function:-

Function: authenticate_user()

Now that we got our user’s Facebook email address all that’s left to do is to write a function that will match the email address with the database and set the session variable with the corresponding user’s id…

If the email doesn’t match with any in the Database the user is simply redirected back to the homepage.

The full “login_facebook.php” file

GREAT! Test out the Site by going to the test Directory address (eg. http://localhost/fb_login/). Then click on the “Login with Facebook” Button. If you have followed this tutorial smoothly and if the email address that you gave in Step#4 of the Instructions and the email address that you use on Facebook matches then you should see that you have been logged in to your site and the main navigation now has a “My Profile” link.

Conclusion

I hope after reading this tutorial you have gotten the basic principle of how the Facebook Authentication works. If you did, then I bet you can customize this basic code to suit your needs and make almost any type of login system work with Facebook. You may try and implement this code in an Object Oriented Style so that you can reuse the Facebook Login system in as many projects as you want with ease, but for now that’s all..:)

Leave A Reply

Your email address will not be published.