How to make a basic “Login via Facebook” with PHP & JavaScript

You’ve seen how some popular websites let you register or login via Facebook — Pinterest, Vimeo, Lifehacker, and many more.

In this blog post, I’ll show you the very basic setup of the Facebook login button for your website. It is up to you to enhance the functions of your registration system.

Note: There are periodic updates to the Facebook API, sometimes resulting to issues with previously working implementations of the API. So please note that this tutorial was written in the third week August 2015. πŸ™‚

I began writing this tutorial late in August, but because of other projects, was able to publish it when it’s already September.

This Facebook login tutorial’s coverage and limitations

  • This Facebook login tutorial will cover only the basic setup of the “Login via Facebook” button.
  • Extended permissions request and the setup on your server will not be included for now.

Requirements of this tutorial to integrate Facebook login to your website

  • Internet connection
  • JavaScript turned on in your web browser
  • Basic knowledge in HTML, PHP, and JavaScript
  • A Facebook Developer account – find out how to create one here
  • Apache and PHP on local machine (e.g. in XAMPP)

My coding environment for this tutorial

I’ll run the codes in XAMPP on Windows 7.


And now, let’s begin with the Facebook login integration tutorial!

There will be previews of codes from here on, and near the end of the page will be a download link so you could get a copy of my Login via Facebook codes.

I will not explain the codes line by line anymore, but I already placed comments on most lines on the code previews.

Part 1: Prepare a Facebook app

Go to the Facebook Developers site.

facebook-login-tutorial-add-new-app

Under the “My Apps” menu item, choose “Add a New App”.

facebook-login-tutorial-add-new-app-website

Choose “Website”.

facebook-login-tutorial-add-new-app-name

We are about to create a Facebook app ID.

Type a name for your Facebook app. I’m naming mine “My App August 2015” for this tutorial.

facebook-login-tutorial-add-new-app-id-1

Leave the toggle for “Is this a test version of another app?” to know, and choose any category that fits the type of website you’r going to use the Facebook login with. I’m going to choose “Reference” for this tutorial.

Let’s setup our site later locally. I plan to put my codes later in a directory named “fb_login_tut_aug2015” in my XAMPP htdocs folder.

facebook-login-tutorial-add-new-app-site-url

First, you may want to take note of the JavaScript code snippet provided in the “Setup the Facebook SDK for JavaScript” page (see photo above). You’ll need it for the site later. The “app ID” is included in the fbAsyncInit as “appId”.

Enter the URL of our localhost site: http://localhost/fb_login_tut_aug2015. You can use any folder name you want, but remember that I’ll refer to the local directory as “fb_login_tut_aug2015” from here on.

Part 2: Setup the site in localhost

Database table schema

Create the users table using this schema:

Folder structure:

index.php for Login via Facebook

Create a file, index.php, and save it under the directory fb_login_tut_aug2015.

The index will be the page shown to the user when logged in. Picture, name and email address as saved on the user’s Facebook account, if available, are shown on the index page.

Place the following code into that file:

login.php for Login via Facebook

When index.php detects that the user is not logged in, he or she is redirected to the login.php page.

The login page is where the “Login via Facebook” button is placed. The user authorizes the Facebook app here to retrieve user data, before being able to finally log in.

includes.php for Login via Facebook

When at least two of my PHP files call for the same functions or require the same group of files, I think it’s practical to just embed those common codes. I placed my common codes in includes.php:

controllers.php for Login via Facebook

I made controllers.php so I could place functions that will possibly be called from different places. It will be good to place functions that interact with classes/models and views.

check_fb_data() is called through Ajax from the login page, and then it calls the Accounts class to check for data in our “users” table.

Account.class.php for Login via Facebook

I wrote this Account class, separating the database interactions from the rest of the code, with goal of making the functions in the class reusable.

MysqliDb.class.php for Login via Facebook

For my database interactions, I use a premade class called MysqliDb.class.php, written by Jeffery Way, Josh Campbell, and Alexander V. Butenko.

The following is a download link to MysqliDb.class.php from Dropbox.

MysqliDb.class.php (199)
style.css CSS for Login via Facebook

Just simple styling for the display.

loading.gif image for Login via Facebook

Right click on the following GIF image, then choose to "Save image as…"

Right click on this then choose to "Save image as..."

 

login.js JavaScript for Login via Facebook

First off, please remember to set your Facebook App ID as the value of the variable the_app_id at the beginning of login.js. The app won’t work without it.

This JavaScript is the core of our Facebook login system. The user needs to be logged in to Facebook and needs to authorize the app we are making to retrieve user data.

You will see here how we can call a function with a dynamic name. For example, you have two available functions: function A(){} and function B(){}. You can have a condition to determine which of the two functions the script should call, like, if(condition===true){ var func_name = "A"; } else { var func_name = "B"; } When it’s time to call the function, based on the condition check performed, you type this: window[func_name](). Whatever value was assigned to the variable “func_name” is the name of the function that will be run by JavaScript.

Try to analyze this login.js script, and you’ll realize that to decide whether we’ll call the function named init_fb_login or fb_get_user_data, we check if it’s the first time that the Login via Facebook button has been clicked.

Originally, my script always called the window.fbAsyncInit function that contains FB.init regardless of how many times the button’s been clicked. But that setup only let the Facebook login work on the first click.

So I revised my script so that if it’s the first click on the button, we’ll run init_fb_login() because that is where FB.init() is. And from the second click onward, we would always call fb_get_user_data().

Reminder: Set your Facebook App ID as the value of the variable the_app_id at the beginning of login.js. The app won’t work without it.

Download link to my codes for “Login via Facebook”

Feel free to download and use the codes I’m sharing:

Login via Facebook - August 2015 Codes (208)

Troubleshooting

“App Not Setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions.

Add email to make app live (login via facebook tutorial)

In the Facebook Developers site, go to your app then Settings -> Basic, then enter your email address on the field “Contact Email”. Before you make your Facebook app live, you are required to enter an email address.

Make Facebok app live (login via facebook tutorial)

Once you enter an email address in Settings -> Basic, you may now make your Facebook app live. To the right side of the message “Do you want to make this app and all its live features available to the general public?”, click the button that says “NO” to toggle it.

I can’t promise to be able to help with every issue you might encounter, but feel free to post questions in the comments section, and please try to help each other out. πŸ™‚

Catzie

A Filipino who is a mobile & web developer on weekdays, and a baker on weekends. When I have time to spare, I blog, play video games, watch series (usually anime), cook dishes, draw, or spend a little time with pets. When I have the rare luxury of time, I get to travel and record song covers too! Follow on Twitter: @catzie

One comment on “How to make a basic “Login via Facebook” with PHP & JavaScript

 

Leave a Reply

Your email address will not be published. Required fields are marked *