How to create Login with Facebook

It is quite simple for people for registering on your site using Login with facebook than to register, verify their Email ID and lot more entering their Details. Also almost all the web users have a Facebook account. So, it is highly recommended to mention Login with Facebook link on your website.

The way of FB-login I will be using is server side login via PHP. It is very secure and widely used. Highly recommended for users receiving huge traffic.

Difficulty : Medium.

Prerequite Knowledge : Basic Knowledge of PHP 5 or higher.

Method used : Server Side. Server side method is secure and does not give away any App id as client side script does. Highly recommended for websites receiving much traffic.


To create login with Facebook link follow these steps :

Step 1 : Create your app and get app ID

• Click here to open Facebook 'Create new app' page. You you are not logged in you need to login before continuing. Also remember if you are a new app creator then you need to sign up as a app developer to continue.


• Click 'Create New App' on the upper right corner of the page. A box will appear with further text boxes.


• In the 'App namespace', type a unique name that will be available on the Facebook. Remember that the namespace must be unique. Most probably enter your domain name. Fill the friendly name and Create. You will get page App id and Unique App key.


• Set the domain and site url in the given box. This image below is just for sample. Click on save changes.




• In settings tab on the left side of the page, click Permissions in User & Friend Permissions. Add what all things you will ask for while someone tries to login to your site. Basically by default it contains name, locale, and his/her gender. We will need here Email ID and DOB too so we will enter those information as 'email' & 'user_dateofbirth'. A complete list of possible permission is here.

 

Step 2 : Create index.php

 

<?php

  $app_id = "YOUR_APP_ID";

  $app_secret = "YOUR_APP_SECRET";

  $my_url = "YOUR_URL";

 

  session_start();

    $code = $_REQUEST["code"]; 

 

  if(empty($code))

  {

   $_SESSION['state'] = md5(uniqid(rand(), TRUE)); // CSRF protection

   $dialog_url = "https://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state=" . $_SESSION['state'] . "&scope=user_birthday,read_stream";

  echo("<script> top.location.href='" . $dialog_url . "'</script>");

  }

 ?>

Replace app key and id from your newly created key and id. Replace my_url with your website url that faceook will redirect to after authentication. Remember it must be http://anywebsite.com/verify.php since we will use verify.php to get users information. Furthermore in the scope query on line number 13, add more permission that you want seperated by commas. If you don't add anything only the public information will be extracted. Remember that you must have added the same permission for your app in step 1. The more the detail you ask for the lesser the chance your app will be approved by the user. Here for example I have added to extract User's Birthday.

Explanation : This page create a request to Facebook as an app. Facebook thus establishes three kind of user. One who hasn't login, one who has login but didn't approve your app and one who has logged in approved your app to share information. In the code on line 2 you will see. Replace email, dob with other things you require. A full list is here. Remember the more the you ask for the lesser the chance to get approved. Also whatever you ask for must be listed in your App permissions.

 

 Step 3 : Create verify.php

 

<?php

  $app_id = "YOUR_APP_ID";

  $app_secret = "YOUR_APP_SECRET";

  $my_url = "YOUR_URL";

  session_start();

    if(isset($_GET['error_access'])){

    echo "Denied";

    }

 

   else if($_SESSION['state'] && ($_SESSION['state'] === $_REQUEST['state']))

  {

  $code = $_REQUEST["code"]; 


  $token_url = "https://graph.facebook.com/oauth/access_token?" . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&client_secret=" . $app_secret . "&code=" . $code; 

 $response = file_get_contents($token_url);

  $params = null; parse_str($response, $params);

  $_SESSION['access_token'] = $params['access_token'];

  $graph_url = "https://graph.facebook.com/me?access_token=" . $params['access_token']; $user = json_decode(file_get_contents($graph_url));

  $username=$user->name;

   $email=$user->email;

  $id=$user->id;

  $first_name=$user->first_name;

  $last_name=$user->last_name;

  $link=$user->link;

  $username=$user->username;

  $gender=$user->gender;

  $locale=$user->locale;

  $birthday=$user->birthday;

  } else { echo("The state does not match. You may be a victim of CSRF."); }

?>

Replace app key and id from your newly created key and id as you did in Step 2.

Explanation : This code handles the response received from Facebook. Here if user denies permission it will echo Denied. And if everything is successful then it will automatically get User's Email ID, DOB and other basic information in form of variable. If you have added something else to request from user, you need to enter it in the form $user->variable where variable is required object.

You can use the received variables to insert in into the database and further start a session to let user choose a Password. Remember that Facebook doesn't give away private information like Password, Phone number etc. 

Step 4 : Create a link to index.php on register page using any of the image

<p>

    <img src="http://www.empowered.org/public/images/fb_login.png">

</p>

Place this HTML code on register page. Remember to change the link to your site.

 

Warnings

1. Don't spam users by extracting their Email ID. It is a violation of Facebook terms. Also you should never ask for sensitive information.

2. Facebook keeps changing its way in which apps can extract information so keep in touch with any updates.