Login with Facebook Using PHP

If you see nowadays, mostly all websites have a social login feature and login with Facebook is one of them, So today we will build a PHP application that has a login with the Facebook feature.

The social login feature is very helpful for your website because it allows users to enter the website without filling a huge registration form. And of course, no one will be interested to fill all fields of the registration form.

Using the social login feature, the admin of the website can increase more subscribers with the simple and quickest registration form.

So in this tutorial, we will build social login functionality with the Facebook account and its SDK library. It will allow users to sign in to your website using their Facebook account.

Let’s get started to implement the Facebook SDK library with a PHP application.

Table of Contents

1 Login with Facebook Account Using PHP

1.1 Create Facebook App

1.2 Create Folders and Files Structure

2 Conclusion

Login with Facebook Account Using PHP

To make the social login functionality with a Facebook account, you need a Facebook developer account. You will create a new App in your Facebook developer account to get the App ID and App Secret keys, and we will use these keys in our code for authentication.

So let’s first create the Facebook App to get the App ID and App Secret key and then we will create PHP login application functionality.

Create Facebook App

First things you should have a Facebook account, so we can further create a Facebook app and get the App ID and App Secret. Because we need a Facebook App ID and Secert key to use in our PHP application.

So follow the below steps to create the Facebook App and get the App ID.

Login to Facebook Developer Account
Go to Facebook Developer Account and login with your facebook account detail.
Create app button
When logged in to your developer account, you will see the Create button, so click on it.
Select an app type
Select an app type as Consumer because it allows permission to use the Facebook login service. Then click on the Next button.
Fill app details
Now, add the app details like Display name and App Contact Email. Then click on the Create App button.
Add product to app
Your app has been created successfully. Now you have to add the Facebook Login product to your app, so click on the Setup button of the Facebook Login product.
Select the app platform
Now you have to select the Web platform for your app.
Enter website URL and other details
Add the URL of your website where you want to implement the Facebook login functionality. Click on the Save button and then the Continue button by following other options.
Get Facebook App ID and App Secret
Now open the Basic Settings of your app and you will see your Facebook App ID and App Secret key that we need in our application. Also fill the other required fields like privacy policy link, redirect URI, etc. You can also add the permissions to your app from the App Review tab.

Now you have successfully created a Facebook app and get the App ID and App Secret key. If you are facing any issues while creating an app then let me know in the comment section, I’ll help you with that.

Create Folders and Files Structure

Now we will create our PHP application folder and file structure to make the functionality for the login system with a Facebook account. So let’s create the structure of the Facebook authentication application and import the database.

Let’s first, make a new database “facebook_login” and make a new table called users. You can run the following SQL code to make the structure of the “users” table.

We will use this table to store the user’s information like facebook id, first name, last name, gender, picture, etc. You can get more with respect to permissions allows.

users.sql

CREATE TABLE `users` (
    `ID` int(11) NOT NULL AUTO_INCREMENT,
    `facebook_id` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    `first_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    `last_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    `gender` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
    `profile_image` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
    PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Now you have to download the Facebook SDK PHP library. You can download it from the GitHub page or you can use the composer to download by the following command. So run the below command in your root folder.

composer require facebook/graph-sdk

After downloading the library, we will create a db_connection.php file to make the connection with a database. Fill in your own database detail in the file. Also, start the session in this file using the session_start() PHP function.

db_connection.php

<?php

	session_start();

	$db_connection = mysqli_connect("localhost","root","","google_login");

	if(mysqli_connect_errno()){
	    echo "Connection Error".mysqli_connect_error();
	    exit;
	}

?>

Now we will create a login.php file to initialize the Facebook SDK library. In this file, we will include the db_connection.php file to create the database connection.

Then will load the autoload.php file of the Facebook SDK library and set up the Facebook App ID and App Secret key to creating the new object.

Then make the condition to check the login response code, if the code is set then get the user information using the try catch block. If we get the response then we check in a database the same ID exists or not, if not exist then store it in the database and perform further action based on that.

login.php

<?php

    require 'db_connection.php';

    if(isset($_SESSION['login_id'])){
        header('Location: dashboard.php');
        exit;
    }

    require_once 'vendor/autoload.php';

    $facebook = new \Facebook\Facebook([
      'app_id'      => 'XXXXXXXXXXXXXXXXX',
      'app_secret'     => 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
      'default_graph_version'  => 'v2.10'
    ]);

    $callback_url = 'http://localhost/facebook-login/login.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login with Facebook Account Using PHP</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
    <div class="main-content">

        <?php

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

                $facebook_helper = $facebook->getRedirectLoginHelper();

                if(isset($_SESSION['access_token'])) {

                  $access_token = $_SESSION['access_token'];

                } else {

                  $access_token = $facebook_helper->getAccessToken();
                  $_SESSION['access_token'] = $access_token;
                  $facebook->setDefaultAccessToken($_SESSION['access_token']);

                }

                try {
                    $response = $facebook->get('/me?fields=name,first_name,last_name,email,gender,picture', $access_token);
                } catch(\Facebook\Exceptions\FacebookResponseException $e) {
                    echo 'Graph returned an error: ' . $e->getMessage();
                    exit;
                } catch(\Facebook\Exceptions\FacebookSDKException $e) {
                    echo 'Facebook SDK returned an error: ' . $e->getMessage();
                    exit;
                }

                if($response->getGraphUser()){

                    $user_info = $response->getGraphUser();
                
                    // escape string and storing data into database
                    $id = mysqli_real_escape_string($db_connection, $user_info['id']);
                    $first_name = mysqli_real_escape_string($db_connection, trim($user_info['first_name']));
                    $last_name = mysqli_real_escape_string($db_connection, trim($user_info['last_name']));
                    $email = mysqli_real_escape_string($db_connection, $user_info['email']);
                    $profile_pic = mysqli_real_escape_string($db_connection, $user_info['picture']);
                    $gender = mysqli_real_escape_string($db_connection, $user_info['gender']);

                    // checking user already exists or not
                    $get_user = mysqli_query($db_connection, "SELECT `facebook_id` FROM `users` WHERE `facebook_id` = '$id'");
                    if(mysqli_num_rows($get_user) > 0){

                        $_SESSION['login_id'] = $id; 
                        header('Location: dashboard.php');
                        exit;

                    } else{

                        // if user not exists in db then insert the user
                        $insert = mysqli_query($db_connection, "INSERT INTO `users`(`facebook_id`,`first_name`,`last_name`,`email`,`profile_image`,`gender`) VALUES('$id','$first_name','$last_name','$email','$profile_pic','$gender')");

                        if($insert){
                            $_SESSION['login_id'] = $id; 
                            header('Location: dashboard.php');
                            exit;
                        } else {
                            echo "Sign in failed!(Something went wrong!!!).";
                        }

                    }

                } else {
                    header('Location: login.php');
                    exit;
                }
                
            } else {

                $permissions = ['email']; // Optional permissions
                $login_url = $facebook_helper->getLoginUrl($callback_url, $permissions);

            ?>

            <div class="login_img">
                <a class="login-btn" href="<?php echo $login_url; ?>"><img decoding="async" src="assets/images/facebook.png" alt="Sign in with Facebook"></a>
            </div>

            <?php 

            }

        ?>  

    </div>
</body>
</html>

Now create a new file called dashboard.php. This file is that where users will redirect when they are able to log in successfully.

We will also include the db_connection.php file in this file to get the user’s information from the database that we have stored.

Also check the session login id is set or not, if it’s not set then it will not let you land on the dashboard, it will redirect you to the login page.

dashboard.php

<?php

    require 'db_connection.php';

    if(!isset($_SESSION['login_id'])){
        header('Location: login.php');
        exit;
    }

    $id = $_SESSION['login_id'];

    $get_user = mysqli_query($db_connection, "SELECT * FROM `users` WHERE `facebook_id`='$id'");

    if(mysqli_num_rows($get_user) > 0){
        $user = mysqli_fetch_assoc($get_user);
    } else {
        header('Location: logout.php');
        exit;
    }

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dashboard - <?php echo $user['first_name'].$user['last_name']; ?></title>
</head>
<body>
    <div class="main-content">
        <div class="user-dashboard">
            <div class="user-img">
                <img src="<?php echo $user['profile_image']; ?>" alt="<?php echo $user['first_name'].$user['last_name']; ?>">
            </div>
            <div class="user-info">
                <p class="user-name"><?php echo $user['first_name'].$user['last_name']; ?></p>
                <p class="user-email"><?php echo $user['email']; ?></p>
                <p class="user-gender"><?php echo $user['gender']; ?></p>
                <a class="btn-logout" href="logout.php">Logout</a>
            </div>
        </div>
    </div>
</body>
</html>

So save all the above files and I hope it works for you but if you are facing any issue please let me know in the comment section, I will help you with that.

So now let’s create a logout.php file to destroy the session variable. This file will only destroy the user’s information from the session, not from the database.

First, we will unset all $_SESSION variables and then hit the session_destroy() function to clear the current user session. And then redirect the user to the login page or wherever you want to redirect.

logout.php

<?php

    session_start();

    // unset all of the session variables.
    $_SESSION = array();

    // destroy the session.
    session_destroy();
    header("Location: login.php");
    exit;

?>

All done now. So you have successfully created a PHP application for social login system with a Facebook account and its SDK library.

Now you can design it as want but I’m leaving a small piece of CSS code that will give a little bit of a pretty look to your Facebook login application.

So just create an assets/ folder in your root folder then inside the assets folder create another folder called css/ and here create a new file style.css. Then put the following CSS code in this file.

style.css

body {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.main-content {
	text-align: center;
	height: 100vh;
}
.login_img {
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
}

.user-dashboard {
    width: 400px;
    box-shadow: 0px 1px 15px 3px #e3e3e3;
    padding: 40px;
    transform: translate(-50%, -50%);
    position: relative;
    left: 50%;
    top: 50%;
}
.user-info .user-name {
    font-size: 30px;
    margin-bottom: 0;
}
.user-info .user-email {
    font-size: 18px;
    color: #4687ec;
}
.user-info .btn-logout {
	text-decoration: none;
	background: #d52b2b;
	padding: 10px 25px;
	display: inline-block;
	color: #fff;
	font-weight: bold;
}

That’s it!!!

Conclusion

So in this tutorial, you learned about how to create a Facebook app and get the Facebook App ID and App Secret. Then you learned how to create a social login application using PHP.

So wrapping it. First, you have to create the Facebook app by following the above step-by-step guide and configuring the app settings to allow the permission that you want for your application.

After app settings, you have to make a PHP application folder and file structure and place the all above code in a respective file and save it. You can customize it further according to your requirements. Then run the application to test it.

If you have any questions or suggestions please let me know in the comment section, I’ll respond to you as soon as possible.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

About Aman Mehra

Leave a Comment Cancel reply

Login with Facebook Account Using PHP

Create Facebook App

Login to Facebook Developer Account

Create app button

Select an app type

Fill app details

Add product to app

Select the app platform

Enter website URL and other details

Get Facebook App ID and App Secret

Create Folders and Files Structure

users.sql

db_connection.php

login.php

dashboard.php

logout.php

style.css

Conclusion

Related Posts

How to Check if Element Exists Using jQuery?

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

About Aman Mehra

Leave a Comment Cancel reply