Login with Google Account Using PHP

In this tutorial, we will learn how to implement google API to make login functionality with a google account using PHP. We will use the Google OAuth client library to make this functionality.

As you know, nowadays all users have a google account and they can use it login with that on any website which has login with google account functionality. And they don’t need to registration, they can directly login using their google account. You can see on the internet mostly all websites have login with google account functionality.

So Google provides us OAuth client library to make a login system on your website. This library allows users to sign in with their Google account without signing up.

By using this login feature, you can increase the more subscribers on your website. Because all users can easily login to your website without going through the sign-up process.

So let’s get started with step by step guide to make the login functionality with google account using PHP google OAuth client library.

Login with Google Account Using PHP

To make the login functionality with a google account, you need a google account. You will create a new project in your google account to get the OAuth client ID and client secret keys, and we will use these keys in our code for authentication.

First, we will create a project in the google developer console and get the google API credentials.

See Also: How to Generate Google Maps JavaScript API Key?

Get Google OAuth Client ID and Client Secret

Follow the below steps to create a new google project application in your developer console account and then get the OAuth client ID and client secret.

• Login to Google Developer Console

  Go to the google developer console and login with your google account.

• Select Project Option from Header

  Click on the “Select a Project” option at the top header see the following image as reference.
  

• Create a New Project

  Now you will see a popup box, so click on the “New Project” button.
  

• Enter Project Name and Location

  It will redirect you to a new page. Enter here your Project name and select an Organization and then click on the “Create” button.
  

• Configure Consent Screen

  Now navigate to the “Credentials” menu from the left side and click on the “Configure Consent Screen” button.
  

  Now select the “External” User Type option then click on the “Create” button.
  

• Google App Registration

  When you clicked on the Create button, it will redirect you to the app registration page. Here you need to fill the all required fields like app name, email, privacy policy link, redirect URI, etc. You can add the scopes permission, test users and summary of the app. After filled the all fields “Save” the app.
  

• Generate OAuth Client ID and Client Secret

  Now again click on the “Credentials” option from the left side menu and then click on the “+ Create Credentials” button. You will see other options, so select the “OAuth Client ID” option.
  

• Select Application Type and Add OAuth Client Name & Redirect URI

  Here you need to select the Application type as “Web Application” and fill the OAuth 2.0 client name. Also add the authorized redirect URI of your website, where you want to redirect after login.
  

• Download the Client ID and Client Secret Key

  After filled the above information and clicked on the “Create” button, you will get the Client ID and Client Secret key. You can notedown somewhere or download the JSON file.
  

Now you have successfully created a google app and get the google OAuth client ID and client secret. 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 google account. So let’s create the structure of the google authentication application.

Basically, we need the following file structure to get started.

• google-api/: it is the google oauth client library
• db_connection.php: for database connection and store the values
• login.php: to load the login button and initialize the auth URL
• logout.php: to destory the current session of application
• dashboard.php: where redirect after successfully login
• assets/: to load the assets (CSS and images)

So let’s first create the main folder as “google-login” and then create all the above files and folders inside the main folder.

Let’s get start with google-api/ folder. In this folder you have to add the google oauth client library. You can download this library from github link or using the following composer command.

composer require google/apiclient:^2.12.1

After downloading the google client library, you are ready to use it and make a google authentication application.

First, make a new database “google_login” and make a new table called users. You can run the following SQL code to make the structure of “users” table.

users.sql

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `google_id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `profile_image` text COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Now create the “db_connection.php” file to make the connection with database. Fill 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 the “login.php” file. In this file, we will include the db_connection.php file and google client library with autoload.php package.

Then we will initialize the new google client object as new Google_Client() and set the Client ID and Client Secret key in this object.

Also, set the scopes and redirect URI to confirm with the google app. Then make the condition to check the login response code, if the code is set then get the user information and store it in the database (if users already do not exist) 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 'google-api/vendor/autoload.php';

    $client = new Google_Client();

    // Client ID
    $client->setClientId('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
    // Client Secrect
    $client->setClientSecret('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
    // Redirect URL
    $client->setRedirectUri('http://localhost/google-login/login.php');

    $client->addScope("email");
    $client->addScope("profile");

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login with Google 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'])) {

                $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);

                if(!isset($token["error"])){

                    $client->setAccessToken($token['access_token']);

                    // getting profile information
                    $google_oauth = new Google_Service_Oauth2($client);
                    $user_info = $google_oauth->userinfo->get();
                
                    // escape string and storing data into database
                    $id = mysqli_real_escape_string($db_connection, $user_info->id);
                    $full_name = mysqli_real_escape_string($db_connection, trim($user_info->name));
                    $email = mysqli_real_escape_string($db_connection, $user_info->email);
                    $profile_pic = mysqli_real_escape_string($db_connection, $user_info->picture);

                    // checking user already exists or not
                    $get_user = mysqli_query($db_connection, "SELECT `google_id` FROM `users` WHERE `google_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`(`google_id`,`name`,`email`,`profile_image`) VALUES('$id','$full_name','$email','$profile_pic')");

                        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 {

            ?>

            <div class="login_img">
                <a class="login-btn" href="<?php echo $client->createAuthUrl(); ?>"><img decoding="async" src="assets/images/google.png" alt="Sign in with Google"></a>
            </div>

            <?php 

            }

        ?>  

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

Now create the “dashboard.php” file. Users will redirect when they are able to successfully log in with google. In this file, we will add the first db_connection.php file to get the user details.

Here we will check the session login id that we initialized in the login.php file on the successful login. If a session id is found then it will get the user’s details based on that session login id.

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 `google_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['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['name']; ?>">
            </div>
            <div class="user-info">
                <p class="user-name"><?php echo $user['name']; ?></p>
                <p class="user-email"><?php echo $user['email']; ?></p>
                <a class="btn-logout" href="logout.php">Logout</a>
            </div>
        </div>
    </div>
</body>
</html>

So the above all files, hopefully, will work for you perfectly fine and you are able to log in with a google account using the PHP client library of google.

Now to log out of the session, you need to create the “logout.php” file. In this file you have to destory the session and all $_SESSION variables and then redirect to any page using the header("Location: page_name") function.

logout.php

<?php

    session_start();

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

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

?>

Now you have all done with the google login application and hope it is working for you. Now its time to design it little bit. You can design the layout or process according to your requirements.

For this tutorial, I am having a assets/ folder that will have further two more folders as “CSS” and “images” and in these folders will create “style.css” file and a login button image respectively.

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: navajowhite;
	background: #d52b2b;
	padding: 10px 25px;
	display: inline-block;
	color: #fff;
	font-weight: bold;
}

So finally, after adding the above CSS, you will see the login page and dashboard page like the following images.

That’s it!!!

Conclusion

So in this tutorial, you learned about how to make a login system with a google account using PHP. First, you see, how to generate the google OAuth client ID and client secret keys, because these keys have a very important role to implement the google client API with PHP to make login functionality.

After getting the google OAuth client keys, we have gone through a step-by-step guide to making each file that is required for the functionality.

So we created a db_connection.php file to make a database connection and store the user details in the table. Then we have created login.php and dashboard.php files to initialize the google client library and after successfully login makes redirection on the dashboard. And then created a logout.php file for logout the session and some CSS for styling the application.

So you see, it is very simple to make a google login authentication application with google client library and using PHP.

But if you face any trouble then please let me know in the comment section, I’ll respond to you as soon as possible and I’ll help you with that.

See Also: Login with Facebook Using PHP