Simple Way to Integrate Facebook Login in PHP

In this article, you will get a simple way to integrate Facebook login in PHP. I have provided here a simple source code to set up a Facebook login system that will be more helpful for you.

I will teach you how to log in using a Facebook account on the website and fetch the user’s data from their Facebook profile to save it into the MySQL database.

Before getting started with this tutorial, I suggest you read all the given steps without skipping any one of them. Because every step has a useful PHP script & a concept that will help you easily to integrate Facebook login system to your website.

facebook login in php

Login with Facebook Using PHP

Most of the users don’t want to create their own multiple accounts, they always want to login to the websites with their Facebook account. So Facebook has provided the login system to solve user’s signup problem,

Facebook login system allows the users to use their Facebook profile credentials to the other websites. If you integrate the Facebook login system into your website, users will not have to create a new account. simply they can log in with their credentials of Facebook account.

Now, I am going to explain the integration of Facebook login in PHP through the following steps.

1. Create Folder Structure

Create your Project folder the same as the following structure.

myproject
      |__css
      |__facebook-login/
      |                |__php-graph-sdk-5.x
      |                |__facebook-api-setting.php
      |                |__facebook-login-setup.php
      |                |__facebook-profile-data.php
      |__dashboard.php
      |__login.php
      |__logout.php

 

2. Get Graph API for PHP

You will have to get the Facebook login API for PHP  to integrate Facebook login. So Facebook has provided API as the Facebook Graph API to use Facebook Login purpose.

Process to get

  • Click on Facebook Graph API to get it.
  • you will be redirected to GitHub then get the ZIP folder and extract it.
  • Rename API folder like php-graph-sdk-5.x
  • Keep it in the facebook-login folder.

3. Get Facebook App ID & App Secret

To integrate Facebook login, you must have the Facebook App ID & App Secret. So, to get the Facebook App ID & App Secret, you will have to create a Facebook app through the following steps.

Also, Open URL  How to create a Facebook App id and Secret key to learn to create a new app account.

  • Create APP Account
    • Open the official URL developers.facebook.com to create the Facebook App
    • Log in with your Facebook account.
    • Click on Get Started option at the top right side of the Facebook navbar
    • Click on the Next button.
    • then click on the Developer rectangle box.
    • Click on Create First App
    • Enter Display Name & Contact Email
    • Click on Create App Id
    • App Dashboard will open
  • Register Website domain to App
  • The following steps are given to register the website category & domain
    • Click on setting
    • Click on Basic
    • Enter website domain & select its category
    • Click on Save Changes
  • Facebook Login to Set Up
    • Click on product+
    • Select Facebook login
    • Select Web option
    • Enter Website URL & save
  • Settings of Facebook Login
    • Enter Redirect URL  into the Valid OAuth Redirect URIs field.
    • Click on Save Changes
    •  Get App Id & App Secret
  • got to setting>basic and get there App Id & App Secret

4. Create MySQL Database & Table

You need to create a database & table to store Facebook profile information of users in the phpMyAdmin as the following capture.

  • Database Name – codingstatus
  • Table Name – fblogin

php facebook login user table

5. Configure Facebook API

To configure Facebook API, you have to go through the following steps –

  • Create class FB_API
  • Write database connection script
  • Assign Facebook App Id, App Secret Key, API path & dashboard path Where the user will redirect after getting logged in.

File Namefacebook-api-setting.php

<?php

// Database Connection
class FB_API{
public $hostname=       'localhost'; // Enter Your Hostname
public $DBusername=     'root';    // Enter your database username
public $DBpassword=     '';        // Enter your database password
public $DBname=         'codingstatus.com'; // Enter your database name
public $usersTableName= 'fblogin'; // Enter your users table name

// Facebook API Key
public $FB_APP_ID= '2232558247037604'; // Enter your fb App ID
public $FB_APP_SECRET='4b5a1e1585968176e0a6aabb5c66b224'; // Enter your fb Secret key
public $FB_REDIRECT_URL= '../dashboard.php'; // Enter page address where it will redirect after login

// Facebook API Path
public $FB_API_path='/php-graph-sdk-5.x/src/Facebook/autoload.php'; /* keep as it is your api folder same
like this*/
}
?>

6. Store Facebook profile data.

To store Facebook profile data, you have to implement the following things –

  • Create a class FB_Users and extend properties & methods from FB_API
  • Define database connection within a constructor method
  • Create a function validUser() with an array type parameter $userData to fetch profile data of the Facebook user from the database

File Name – facebook-profile-data.php

<?php

class FB_Users extends FB_API {
    
    
    function __construct(){
        if(!isset($this->db)){
            // Connect to the database
            $conn = new mysqli($this->hostname, $this->DBusername, $this->DBpassword, $this->DBname);
            if($conn->connect_error){
                die("Database is not connected: " . $conn->connect_error);
            }else{
                $this->db = $conn;
            }
        }
    }
    
    function validUser($userData = array()){
        if(!empty($userData)){
            // Check whether user data already exists in database
            $getQuery = "SELECT * FROM ".$this->usersTableName." WHERE oauth_provider = '".$userData['oauth_provider']."' AND oauth_uid = '".$userData['oauth_uid']."'";
            $getResult = $this->db->query($getQuery);
            if($getResult->num_rows > 0){
                // Update user data if already exists
                $SQLquery = "UPDATE ".$this->usersTableName." SET first_name = '".$userData['first_name']."', last_name = '".$userData['last_name']."', email = '".$userData['email']."', gender = '".$userData['gender']."', picture = '".$userData['picture']."', link = '".$userData['link']."', modified = NOW() WHERE oauth_provider = '".$userData['oauth_provider']."' AND oauth_uid = '".$userData['oauth_uid']."'";
                $update = $this->db->query($SQLquery);
            }else{
                // Insert user data
                $SQLquery = "INSERT INTO ".$this->usersTableName." SET oauth_provider = '".$userData['oauth_provider']."', oauth_uid = '".$userData['oauth_uid']."', first_name = '".$userData['first_name']."', last_name = '".$userData['last_name']."', email = '".$userData['email']."', gender = '".$userData['gender']."', picture = '".$userData['picture']."', link = '".$userData['link']."', created = NOW(), modified = NOW()";
                $insert = $this->db->query($SQLquery);
            }
            
            // Get user data from the database
            $result = $this->db->query($getQuery);
            $userData = $result->fetch_assoc();
        }
        
        // Return user data
        return $userData;
    }
}
?>

 

7. Setup Facebook login

To setup Facebook login, you will have to write code according to the following steps –

  • First of all, include facebook-api-setting.php and after that include facebook-profile-data.php
  • Define all the code of the Facebook library. Don’t worry, you will get it in the following file

File Name- facebook-login-setup.php

<?php

require_once 'facebook-login/facebook-api-setting.php';
require_once 'facebook-login/facebook-profile-data.php';
 // Initialize database connection
    $user = new FB_Users();
if(!session_id()){
    session_start();
}
require_once __DIR__ .$user->FB_API_path;
// Facebook API Liberary
use Facebook\Facebook;
use Facebook\Exceptions\FacebookResponseException;
use Facebook\Exceptions\FacebookSDKException;
// Facebook API
$fb = new Facebook(array(
    'app_id' => $user->FB_APP_ID,
    'app_secret' => $user->FB_APP_SECRET,
    'default_graph_version' => 'v3.2',
));
//redirect login helper
$helper = $fb->getRedirectLoginHelper();
// accessing token
try {
    if(isset($_SESSION['facebook_access_token'])){
        $accessToken = $_SESSION['facebook_access_token'];
    }else{
          $accessToken = $helper->getAccessToken();
    }
} catch(FacebookResponseException $e) {
     echo 'Graph returned an error: ' . $e->getMessage();
      exit;
} catch(FacebookSDKException $e) {
    echo 'Facebook SDK returned an error: ' . $e->getMessage();
      exit;
}
if(isset($accessToken)){
    if(isset($_SESSION['facebook_access_token'])){
        $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
    }else{
        // short-lived access token in session
        $_SESSION['facebook_access_token'] = (string) $accessToken;
        
          // OAuth 2.0 client handler
        $oAuth2Client = $fb->getOAuth2Client();
        
        // short-lived access token for a long-lived one
        $longLivedAccessToken = $oAuth2Client->getLongLivedAccessToken($_SESSION['facebook_access_token']);
        $_SESSION['facebook_access_token'] = (string) $longLivedAccessToken;
        
        //default access token
        $fb->setDefaultAccessToken($_SESSION['facebook_access_token']);
    }
    
    // Redirect the user back
    if(isset($_GET['code'])){
        header('Location: ./');
    }
    
    // profile info from Facebook
    try {
        $graphResponse = $fb->get('/me?fields=name,first_name,last_name,email,link,gender,picture');
        $fbUser = $graphResponse->getGraphUser();
    } catch(FacebookResponseException $e) {
        echo 'Graph returned an error: ' . $e->getMessage();
        session_destroy();
        // user back to app login page
        header("Location: ./");
        exit;
    } catch(FacebookSDKException $e) {
        echo 'Facebook SDK returned an error: ' . $e->getMessage();
        exit;
    }
    
   
    
    // Getting user's profile data
    $fbUserData = array();
    $fbUserData['oauth_uid']  = !empty($fbUser['id'])?$fbUser['id']:'';
    $fbUserData['first_name'] = !empty($fbUser['first_name'])?$fbUser['first_name']:'';
    $fbUserData['last_name']  = !empty($fbUser['last_name'])?$fbUser['last_name']:'';
    $fbUserData['email']      = !empty($fbUser['email'])?$fbUser['email']:'';
    $fbUserData['gender']     = !empty($fbUser['gender'])?$fbUser['gender']:'';
    
    
    // Insert or update user data to the database
    $fbUserData['oauth_provider'] = 'facebook';
    $userData = $user->validUser($fbUserData);
    
    // Storing user data in the session
    $_SESSION['userData'] = $userData;
    
    // Get logout url
    $logoutURL = $helper->getLogoutUrl($accessToken, FB_REDIRECT_URL.'logout.php');
    
    // Render Facebook profile data
    if(empty($userData)){
        echo  '<script>alert("Error, please try again");</script>';
       
    }else{
        
    }
}else{
    // Get login url
    $permissions = ['email']; // Optional permissions
    $loginURL = $helper->getLoginUrl($user->FB_REDIRECT_URL, $permissions);
    
    // Render Facebook login button
    $fbLoginButton = '<a href="'.htmlspecialchars($loginURL).'" class="fb-login">Login with Facebook</a>';
}
?>

 

8. Create Facebook Login Page

Write a basic HTML code and print $fbLoginButton to display the Facebook login button on the page

File Name- login.php

<?php

include('facebook-login/facebook-login-setup.php');
?>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Simple Way to Integarate Facebook Login in PHP</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

    <div class="fb-box">
    
<?php
 echo $fbLoginButton; 
?>

    </div>
</div>
</div>

 

You can use the following CSS code to design your login page otherwise write your own custom CSS code.

File Name- style.css

    .login-box {
    width: 20%;
    padding: 10px;
    background: #dcdada;
    
}
    .custom-login input{
       display: block;
       margin: 10px;
       padding: 5px;
       font-size: 20px;
       width: 88%;
       border: 1px solid #b1a2a2;
    }

    .custom-login input[type='submit']{
        width: 93%;
        background: #f97402;
       color: white;
    font-size: 20px;
    border: 0px;
    }
    .fb-login{
       background: #4267b2;
    color: white;
    text-decoration: none;
    padding: 7px;
    width: 87%;
    display: block;
    text-align: center;
    margin: 10px;
    }

 

9. Create a Dashboard Page

You should create a dashboard page  to redirect after logging in through the Facebook

File Name- dashboard.php

<?php

if(!session_id()){
    session_start();
}
$userFbData=$_SESSION['userData']

$first_name=$userFbData['first_name'];
$last_name=$userFbData['last_name'];
$gender=$userFbData['gender']
$email=$userFbData['email']
?> <?php

include('facebook-login/facebook-login-setup.php');
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Simple Way to Integarate Facebook Login in PHP</title>
</head>
<body>
<div class="container">
    
   <h1>Welcome to dashboard</h1>
</div>
</body>
</html>

 

10. Create Logout

To create logout, you have to write the following line of code

  • First of all, start the login session
  • After that, destroy the created login session
  • At last, redirect to login page

File Name – logout.php

<?php

session_start();
session_destroy();
header("Location:login.php");
?>

Important Notes –

To use my above code in your project by going through the following points.

Create a facebook-login folder the same as the above structure.

Keep all the above codes as it is given above with the same file name.

keep remembering that all the PHP Facebook login codes file must be inside the facebook-login folder.

just include the facebook-login-setup.php file  in the custom login page of your project  as following

Print $fbLoginButton to create the Facebook login button on your custom login page.

My Suggestion

Dear Developers, I hope that you can easily integrate the Facebook login system on your websites by reading the above explanation.

If you have any queries related to web coding, you can ask me through the below comment box. So, Continue to visit my website, I will share more articles related to web coding to make easy your coding process.

1 thought on “Simple Way to Integrate Facebook Login in PHP”

Comments are closed.