Facebook Login

We use facebook login to allows users can get access to the website quickly without registration. This tutorial will guild you how to facebook login.

First things first, you need facebook developer account and create an facebook app that allows you using facebook api. To create facebook app visit this create facebook app id.

Once you have client id and secret, please read the instructions below.

Note: Facebook login using OAuth 2.0, for more information please read this tutorial.

System requirements

  • PHP 5.4 or higher
  • APACHE 2.4.9 or higher
  • Netbean IDE

Project Structure

 project structure

Implement code

Look at project structure picture above, in this project, we define 4 php file, let's see each file with its function.

Create file projecthelper.php

We wrote one tutorial about projecthelper.php, view more at here, if you were already read it, please add this function in file.

  • public static function get_facebook_config() {
    return $config = array(
    'client_id' => 'your-client-id(app_id)',
    'client_secret' => 'client-secret(app_secret)',
    'redirect_uri' => self::get_base_url('facebook-callback.php'),
    'login' => self::get_base_url('facebook-login.php'),
    'session' => 'facebook_access_token'
    );
    }

Create file facebook-login.php

This file will undertake two main tasks, check access_token in $_SESSION, if existed, send request to get user's profile, the opposite will create $authen_url for the user grant access your applications to connect to their accounts.

- Create $authen_url link

  • $endpoint = 'https://www.facebook.com/v2.8/dialog/oauth?';
    $scope = 'email'; //permission
    $state = '7789'; // random string
    $auth_url = $endpoint .
    'client_id=' . $config['client_id'] .
    '&state=' . $state .
    '&response_type=code' .
    '&redirect_uri=' . $config['redirect_uri'] .
    '&scope=' . $scope;

- Send request to get user's profile and print result on screen

  • $access_token = $_SESSION[$config['session']];
    $endpoint = 'https://graph.facebook.com/v2.8/me';

    $header = array(
    'GET /v2.8/me HTTP/1.1',
    'Host: graph.facebook.com',
    'Authorization: Bearer ' . $access_token['access_token']
    );
    $data = projecthelper::make_request($endpoint, $header, null);
    var_dump($data);

<?php

if (!session_id()) {
session_start();
}
include 'projecthelper.php';
$config = projecthelper::get_facebook_config();

$endpoint = 'https://www.facebook.com/v2.8/dialog/oauth?';
if (isset($_SESSION[$config['session']])) {
$access_token = $_SESSION[$config['session']];
$endpoint = 'https://graph.facebook.com/v2.8/me';

$header = array(
'GET /v2.8/me HTTP/1.1',
'Host: graph.facebook.com',
'Authorization: Bearer ' . $access_token['access_token']
);
$data = projecthelper::make_request($endpoint, $header, null);
var_dump($data);
} else {
$scope = 'email'; //permission
$state = '7789'; // random string
$auth_url = $endpoint .
'client_id=' . $config['client_id'] .
'&state=' . $state .
'&response_type=code' .
'&redirect_uri=' . $config['redirect_uri'] .
'&scope=' . $scope;
echo '<a href="' . $auth_url . '">Login with Facebook</a>';
}

Create file facebook-callback.php

After granted access to your application, user will be redirected to your redirect_uri with authentication code. Then you will make request to get access_token.
(In some cases, your redirect_uri that you provide must match with the one you've described in app's settings, or redirect_uri must begin with https).

+ Check and extract authentication code

  • Send request to get access_token
  • $code = $_GET['code'];
    $endpoint = 'https://graph.facebook.com/v2.8/oauth/access_token';
    $post_fields = 'code=' . $code .
    '&grant_type=authorization_code' .
    '&client_id=' . $config['client_id'] .
    '&client_secret=' . $config['client_secret'] .
    '&redirect_uri=' . $config['redirect_uri'];
    $header = array(
    'POST /v2.8/oauth/access_token HTTP/1.1',
    'Host: graph.facebook.com',
    );
    $data = projecthelper::make_request($endpoint, $header, $post_fields);
  • Get result, if there is no error, save the result get into $_SESSION and navigate user to the login page.
  •  $_SESSION[$config['session']] = $data;
    header('Location: ' . $config['login']);
  • If there are errors, print to the screen
  •  print_r($data);

+ If there are errors, print to the screen

  • print_r($_GET);

<?php

if (!session_id()) {
session_start();
}

include 'projecthelper.php';

$config = projecthelper::get_facebook_config();
if (isset($_GET['code'])) {
$code = $_GET['code'];
$endpoint = 'https://graph.facebook.com/v2.8/oauth/access_token';
$post_fields = 'code=' . $code .
'&grant_type=authorization_code' .
'&client_id=' . $config['client_id'] .
'&client_secret=' . $config['client_secret'] .
'&redirect_uri=' . $config['redirect_uri'];
$header = array(
'POST /v2.8/oauth/access_token HTTP/1.1',
'Host: graph.facebook.com',
);
$data = projecthelper::make_request($endpoint, $header, $post_fields);

if (is_array($data) && isset($data['access_token'])) {
$_SESSION[$config['session']] = $data;
header('Location: ' . $config['login']);
} else {
print_r($data);
}
} else {
print_r($_GET);
}

After implement code, run project and view result or you can view our example here. If you have questions, don't hesitate, tell us