In the last post, I introduced you to a PHP OAuth Class named OAuth API. In this post I’m going to tell you how to implement Login With Facebook feature in PHP using the class I introduced. It’s very simple. I will tell the ways of implementing step by step. This tutorial includes placing a Login with Facebook button on web site to authorization and finishes when we get user details. You should read the previous post before starting this tutorial.

Appearance

Place the below HTML code on the place where you want to show the button :

Login With Facebook

You should need a Facebook small logo for making the button attractive. I have included the image below :

Here is the CSS code that will decorate the button. I have provided the image URL as https://lab.subinsb.com/projects/blog/uploads/2013/12/fb_icon.png

#login_with_facebook{

display: inline-block;

height: 43px;

margin: 0px;

padding: 0px 20px 0px 52px;

font-family: ‘Ubuntu’, sans-serif;

font-size: 18px;

font-weight: 400;

color: #fff;

line-height: 41px;

background: #3b579d url(https://lab.subinsb.com/projects/blog/uploads/2013/12/fb_icon.png) no-repeat 14px 8px scroll;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

text-decoration: none;

cursor:pointer;

}

The finished button will look something like below :

Server Side

login_with_facebook.php

This is the file that handles the authorization. You need the oauth_client.php which we mentioned in the previous post. You need a **client id **and client secret which you get when you create an app @ https://developers.facebook.com/apps (Tutorial here).

Here is the complete code :

require(‘http.php’);

require(‘oauth_client.php’);

$client = new oauth_client_class;

$client->server = ‘Facebook’;

$client->debug = false;

$client->debug_http = true;

$client->redirect_uri = ‘http://’.$_SERVER[‘HTTP_HOST’].dirname(strtok($_SERVER[‘REQUEST_URI’],’?’)).’/login_with_facebook.php’;

$client->client_id = “;/*Client ID*/

$client->client_secret = “;/*Client Secret*/

$client->scope = ’email,user_about_me,user_birthday’;

$application_line = \__LINE__;

if(strlen($client->client_id) == 0 || strlen($client->client_secret) == 0){

 die(‘Please go to Facebook Apps page https://developers.facebook.com/apps , ‘.

  ‘create an application, and in the line ‘.$application_line.

  ‘ set the client_id to App ID/API Key and client_secret with App Secret’);

}

if(($success = $client->Initialize())){

 if(($success = $client->Process())){

  if(strlen($client->authorization_error)){

   $client->error = $client->authorization_error;

   $success = false;

  }elseif(strlen($client->access_token)){

   $success = $client->CallAPI(‘https://graph.facebook.com/me’, ‘GET’, array(), array(‘FailOnAccessError’=>true), $user);

   if($success){

    $email=$user->email;

    $name=$user->name;

    $gender=$user->gender;

    $birthday=date(‘d/m/Y’, strtotime($user->birthday));

    $image=get_headers(“https://graph.facebook.com/me/picture?width=200&height=200&access_token=”.$client->access_token,1);

    $image=$i[‘Location’];

   }

  }

 }

 $success = $client->Finalize($success);

}

if($client->exit){

 die(“Something Happened”,"<a href=’”.$client->redirect_uri.”‘>Try Again");

}

if(!$success){

?>

 

 

  

   

  

  

   

OAuth client error

   

Error: error); ?>

  

 

Don’t forget to replace client_id & client_secret values.

How It Works

1. When a user clicks Login With Facebook button, the user will be redirected to the login_with_facebook.php page.
2. The PHP file will redirect the user to Facebook‘s authorization page with all the app details needed by Facebook.
3. When the user authorizes the app, he/she will be redirected back to login_with_facebook.php page with a **GET **parameter named code.
4. OAuth API library will request an access token to Facebook with the given code.
5. When it receives the access token, It sends a request to https://graph.facebook.com/me with the access_token and the URL will return the details of the user.
6. It also sends a request to **https://graph.facebook.com/me/picture **with the access token and the image size needed (200 x 200).

Variables

$email – The E-Mail of the user

$name – The Name of the user

$gender – The Gender of the user

$birthday – The Birthday of the user

$image – The Image URL of the user

Isn’t this tutorial simple ?

If you encountered any problems or have a suggestion, please say it on the comments. I will be happy to respond.