Build a PHP Google OAuth2 Login and Logout System With Sessions and MySQL Database in Browser

uh hello guys welcome to this video so in this video we will talk about how to build out a complete Google oo login and

log out system in PHP and storing the details in my SQL database once the user

has granted permissions and we'll be displaying the details of the user something like this the display name

email address and the profile picture and a simple log out button so you will

basically see I'm currently logged in inside the application and if I go to the homepage it will automatically redu

me to the profile page because it already detect that I'm currently logged in so it is storing the information in

sessions in PHP so let's suppose if I close this tab right here and reopen the

tab it will automatically detect if I go to the homepage of the application it

will not show the login page it will automatically detect I'm currently logged in that's why it will redirect me

to the profile page and show these details to me so we are actually using exam control panel which is actually we

are locally developing this application Apache control panel we are using uh PHP

my admin which is actually a interface by which you can actually create tables

so if you see uh we have the users table right

here inside which if you see if I show you the code right here in the config

PHP we have this table out there users

and if I go to the users table you will basically see this is actually the structure we are storing the ID which is

a primary key Google ID display name email photo and Tim stamp and there is

one record out there you will see coding seure display name email address geeki goam [email protected] this is a profile

photo link that we are storing it this is a Google ID so all this information we are displaying it on the screen and

uh let's suppose if I click the log out button so what will happen it will redirect me to the login page so now

once again if I log in it will redirect me to the profile page let's suppose if

I log in with a different account like right here let's suppose I go to the

same application but login with a different uh

browser oh sorry let me put the correct spelling or

login so this is actually the interface that you will see once you run this

application login with Google so if you're running it for the very first time then it will show you this uh

account screen choose an account right here here you can actually select your Google account to actually login click

on the button to actually login Grant the permission project want to additionally access click on continue so

when was once it does you will basically see welcome goam Sharma your email address this one this is a profile

picture and if I show you the database the table so there is a single record if

I refresh now there will be a second record which will be added which is you

will see display name Sharma email Sharma you will see this is actually profile photo the link is actually being

inserted this is actually timestamp as well so automatically whenever new user

logs in the database will get a record inserted so this is actually the

application guys we will be building in this tutorial so if you are watching it for the very first time please hit that

like button subscribe the channel as well and basically all the source code is

given in the description of the video if you need the full source code of this project the full source code is given

you can directly purchase it from my website procore.com I have given the link after you purchase you will

actually redirect it to Google Drive where you will actually download the full source code files here this is the

Full Source Code Files full documentation will also be available so let's start building this project so the

very first thing guys I will do right here and you do need this software exam

control panel if you're developing PHP applications so just type

on Google download exam control panel so it's a cross platform software it's

available for Windows Mac and Linux depending upon your operating system in

install it and simply start your Apache server which will run on V 80 and my SQL which will

run on port number 3306 so go to PHP my admin and right

here in the SQL statement we will actually be creating database and table as well so first of

all what I will do uh by default all the PHP applications are

located in the C directory whenever you install exam there will be this exam folder created and the HT docs folder HT

docs you need to go to this folder and now create your directory so if I open

command line here I will make a directory here which is Google login

project I will CD into this directory Google login project open it inside vs

code so I you can see I opened this so simply

I just need to uh require a package which I will

install it using composer composer is a dependency manager for PHP applications

similar to npm and when it comes to nodejs or pip when it comes to python so

composer I have installed if you see I have installed it inside my machine so we can run it this

command composer and require Google SL API client so we will

be using the Google oo login system so for that we are using

the Google API client and you need to require it so on the left hand side guys

it will first of all create the composer. Json file and then it will actually install the modules it will

create the vendor folder in the left site all the modules will be installed so once it's installed you will get a

notification that your in modules have been installed so it will hardly Take 5

to 10 seconds depending upon your internet speed so just wait for it to

finish so in the meantime guys what we can do we can actually create our

database and table so if you go to PHP my admin go to the SQL section and right

here we will actually be creating a database so there is a create command create database we'll be creating a

database called as Google login project this will the database name put a

semicolon and then we will use this database which is Google login

project put a semicolon and then we will create table so create table followed by

the table name which is us users and set of parentheses like this this is

actually syntax guys if you don't know about SQL so right here uh we will be giving

an ID here which will be the primary key so ID int integer it will be Auto

incremented automatically it will be incremented and this will be the primary key this will be unique so that you can

actually Target Elements by using the primary key and then we have the Google

score ID so here this will be VOR V

length will be 255 and it will be not be null it should not be null it should

have some value so this Google ID will be coming from Once you log in this will be coming automatically then we have the

display name of the user again this will be varar

255 then we have the email

again this will be

vchart so just make sure that you put a comma every time the record and then we

have the photograph of the user again this will be varar 255 we storing the

link of the photograph and lastly we will store the time stamp created value

whenever the record is created this will be the default the current Tim

stamp time stamp generally means time so whenever the record is created we store the time as well so

that's all guys this is actually the SQL code and there is actually a Go Button out there if you see click on that and

now your database will be created which you see Google login project inside that we have a simple table which is users if

you see the structure of the table we have ID primary key Google ID display name email photo created uncore at so we

have actually created the database and the table which is very easy now if I

see you uh basically if I show you

the so it is installing you can see now all the packages have been installed you

will see this autoload.php file we just need to load this file so right here just create a index. PHP

file this will be the starting point of the application so right here we will

actually be having a HTML right here and we will say PHP o login and log out

system in uh using my

SQL so this is actually the typle tile and after this we will actually be having a simple heading to the user that

welcome to PHP login system after this heading we will

actually have a simple button where we will redirect the user to the login page

so this will be very simple and anchor

tag so we will say to the user go to login.php file and we'll simply say

login with Google so what it will does guys if

you if I open this now Local

Host sorry Google login project there will be this thing if I go

to this this script doesn't exist we do need to create it so as you can see we

are clicking it it's clickable link and if we just need to create our login.php

script and also guys before writing the script we also need to config some values so just create a config.php file

here we will be storing all the constants which will be required for the application all the values just PHP we

need to first of all require our vendor file so do vendor and autoload.php

so we are actually requiring the base library that we have installed in the vendor folder we are requiring this file

autoload.php which will actually load all the libraries for us so we are

loading it in the config.php and we are need to Define some constants Define the

constants for the client and the database so the

very first constant we will Define is the Google uncore client

ID so for the time being I will just make sure that I give these values

Google unor client secret so all these values I will show

you how to get these values and the third value is Google redirect

URI and then we have the database host DB host dbor host by default this is

Local Host because we are developing it on the Local Host environment that's why it is Local Host then we have need to

give user password and database name so this needs to be defined

sorry then we have uh dvore user which will be root by default if you haven't

changed the settings and then the DB password this will be nothing the

default password and then we have the database name so database name we have given

which is Google login project this is my database name so we have defined all these

constant guys now we need to get the Google client ID client secret and redirect URI so you actually need to get

these details in Google Cloud console once you actually create a project it's

very simple uh let me show you so go to your Cloud console and uh just

inside the menu apis and

services just here apis and services go to credentials and here you need to

create a o client ID and right here we need to give it the application type

will be web application and authorize JavaScript origin because we are developing it on the Local Host so HTTP

Local Host and authorized redirect URI so redirect Ur So this simply means that

whenever user cfts the permission where the Google should redirect your

application to so I will first of all this is actually

my base URL which is Local Host Google login project so first of all I will

paste this right here and Then followed by callback PHP so I

will just create this file callback PHP so this will be the call back URL so I will simply copy this and click on

create so it will give me the client secret and client ID redirect URI I will simply paste it this is the same

redirect URL that I've given it in the settings so now this client ID and client secret will be different for you

so don't copy my information just see use your your

information so then we have the client secret as well so that's all that we need to do

guys in this file simply close it now what we need to

do we now need to go to the login.php script once we go to the login page so

we need to say PHP

and then we need to again require that file which is uh config

PHP so we are requiring it and then we are invoking this client we need to pass

the information we need to say new Google uncore

client so we now need to set some information guys right here which is set

the client ID this will be coming from Google client

ID then we have to set the client secret so again this will be coming from Google

client

secret uh and then we need to also set the redirect URL so this will be Google redirect

URL so then we need to add some Scopes guys what sort of information that we

need to request from the Google API so we need to set the scope it's very easy

by using this method add scope which is available in the PHP API of uh Google API client

so you need to have in single quotes just mention

it so we need to add the scope we also need to request the profile information

which is the display name profile picture for that we also need to add the scope of profile so after you do this it

becomes very much easy we need to construct a URL which is au URL

so we will say that client create or

URL so we are creating an all URL and then we need to redirect the user so we'll use the header function we can say

location and then we will just join it by using witer Fab or

URL

and then put a comma and we need to now pass a constant here which is filter

sanitize URL and then we need to also exit the

program so this needs to be filter where

so that's all that guys you need to do here and if I just refresh here and go

to this page so you will basically see it will redirect me to the login page it will show you the list of accounts right

here you you can select it so let's suppose if I select this

account and click on continue we will now see it will redirect me to this callback PHP script which I don't have

right now at this moment we will be you can see this code parameter is passed right here in the URL this is called as

authorization code so in the oo Google oo flow whenever you first of all Grant

the permissions to login this authorization code is generated now we need to get the access token by

exchanging this authorization code so now to get the access token guys we need

to write our call back redirect URI script which is called PHP file so we

need now need to first of all get that uh authorization

code you will basically check if authorization code exist in the URL or

not so first of all we also need to start

the session so session _ start as well and then we need to require uh that

config.php file again at the

top

so so after you do this guys we now need to

create the client ID we need to create the client so for

creating the client we will simply say new Google

client and then we need to basically say set the client

ID we will say Google _ client

ID so we just need to repeat this information once again we need to set the client we need to set this three

things client Secret

and we also need to set

uh the

redirect so after this guys we now need to check in the if condition that if that uh parameter is present in the URL

which is the get I can simply say if this

parameter exist which is the code parameter if this exist in that

case uh let me just parenthesis close this so right here if this is available

then we need to access the token access token

exchange it with the access token so we can create a variable token

and there is a method available right here which allows you to get the access token fetch access token with

authorization code there is also a access to fetch access token with refresh token as well so if you got a

refresh token then you can even get it access token so for the very first time we need to fetch the access token with

authorization code that we got we'll actually use this method and actually pass

our authorization code so you say pass this code so now we actually got this uh new

we can initialize the service new service o 2 and we will actually pass

the client right here as a parameter then we will actually get our Google

user guys so now to get this Google user

oo and there is a method out there which allows you to fetch the user info

get so this is actually the method to actually fetch the profile information about a specific user using this access

token that we got and after this after we get the user

information we now need to connect to the database and store this

info store the info of the user so you will simply say my sqi new my

sqi and we'll basically pass the DB host DB user DB password and DB

name so here we'll simply check that if the connection has not been successful

if any sort of error take

place so if my sqi has some error connecting the database we can simply TR

and print out message connection to database

failed so put a semic call and after this if the connection is successful

then we will simply check if the user exist in database in table or

not so for doing this we will simply make a SQL statement my SQL I we will

say prepare so prepare and here you will

simply select all the users select star from users

where Google ID is equal to question

mark so here we need to put the placeholder we need to bind it bind

param with the generated ID user uncore ID Google user-

ID so this is uh you need to put this dollar sign right here so after we pass

the user ID we need to execute this command by using the execute

method and then we will basically say result and

statement get the result so this is actually the function that you need to get the actual result from

the of the profile of the user so it will be stored inside this result

variable now we need to actually get the user so what we can say

result and fetch an associative array of the profile of the user which will

actually contain the display name profile picture and the Google uncore ID all this information so here we will

simply have a if block right here if the user information exist then in that case and

else in the else blog we can simply redirect the user back to the

homepage and then we can simply

di so if the user is successfully found and then that case we need

to insert them into the table so we'll say prepare you can simply if the user

already exist then we'll update the information we will set the display name

question mark email to be question mark and photo to be question

mark where Google uncore ID is equal to question mark so now we need to bind all

these parameters so how we can do

that so there is a bind param VAR method so do. s so we need to first of all bind

it with the the name of the user so Google

user so if you see basically we have

uh this Google user variable that you see that we got in associative are we

are using it and one such value of this associative array is name so we are actually initializing it

to the name then comes

uh Google uncore user email then comes Google

user picture and then again Google user

ID so after binding all these parameters guys what we need to do

so just make sure you write

it paste it so now you can see that now it is not having some problem so after

you bind this you just need to execute this statement so statement execute

so so else if the user doesn't exist in that case we need to insert it in

the database so for inserting it we

have again this method my SQ I

prepare so we will have the insert statement insert into the table which is

users and we'll put this parenthesis right here which is Google uncore ID

display underscore name

email photo so here we need to give the values

as well after you inserting which which values

so we will simply say the values which is question mark question

mark question mark so these are placeholder values put

is so in insert so put

a single code right here

semicolon right here that's all and we just need to put

a dollar sign right here so we now need to bind the values

so we can simply say bind

params SSS so the very first thing which is the

Google uncore ID Google

the

name sorry name and Google user

email and Google user

picture so this will be Google uncore user

so that's all guys we have successfully binded all this now we just need to execute this

statement so now we just need

to have this user object that we have so we just need to initialize the values

the ID will be equal to statement whenever the record is created

the ID will be insert underscore ID and then the Google

ID which will be Google

user so display

name so we are actually you can see ID Google ID

so two more times what we can

do so I think if some any s sort of error

take Google user

sorry sorry put a semicolon right here

and then right here now correct so here we need to change uh this one to email and this one

to photo this one to

picture this one to email so here guys you will see that we

have initialized it this user object we have given it five properties the ID

Google ID display name email and photo so these are all the same properties we are storing it in the database if you

see the structure right here now we just if I I think it should do it so right

after this call bracket we need to initialize the

session variables so we have we will basically be creating a session variable

of user uncore ID which will be equal to user ID whatever is the user ID and also

another session variable which will be the actual user

and it will be same in the user variable that we have which we constructed in the previous step we will initialize it to

the session variable session user you can see use user variable that we

have it is having it associative array and then we are initializing it to this

like this so

so now guys what we need to

do so after this we need just need to redirect the user back to the

homepage once they are authenticated we can say header

location index.php and exit out of the program

and also right here if you uh if the authorization code is not initialized in

that case there will be a problem so in that case also we can redirect the user back to the index page

index.php this is rarely will happen in any case if the information is not correct this condition 90% will not take

place out of 95% this condition will be true authorization code will will be

there we will be getting the access token with it then we'll initialize the Google o through client we will get the

user information then we will simply check if the user already exist or not if the user already exists then we will

simply update the information right here if the user doesn't exist then we will

insert this information into the users's table and initialize the session variable as well this is a quite a very

simple logic guys that we we are developing it now we just need to go to the homepage which which is index.php

and based upon if the user exist or not we just need to show the profile

information details so right here if I show

you so in the index word PHP page right at the top we just need to add a PHP

block of code so here we will simply check we will simply check if the user

is already logged in or not so right here we will simply say if

is set dollor session variable user ID

user _ ID exist in that case user is logged in so we'll simply say the user

variable will be equal to session

user in D FL the user is null if the user doesn't

exist then in that case user is null if the user ID doesn't exist so we have

made this in at the top of the thing very simple logic and now based upon

that we can inside our HTML we can just wrap everything in a if condition that

if the user exist in that case colon in this way you can write PHP if

conditions conditional logic so we can even have a else block

as well else and then we can also have and

if semicolon so in this way you write if

and else statements inside PHP mixing up with HTML as well so now we need to

Dynam basically write

here we can actually write a very simple PHP line here

PHP Echo HTML special correctors we'll use this function because we are

fetching the data from the database from the table and we'll simply say right

here user display underscore name

so if you just refresh now guys what will happen right here just see if I go to the

homepage so Local Host Google login project if I

just uh browse it if I need to just delete everything here delete delete

I think I'm not running this

application so now it is running it tit Google login project

uh I think uh session I think in this file if you see at the very top we do

need to start the session as well guys so right here at every file you need to

start the session you need to call this function session start and also we need to require this uh config file as well

config.php this file we need to require it that's why that's why it was not

working and again just cross check in every file at the very top we need to start the session so right inside your

call back. PHP file as well if you see at the very top we need to start the

session this is your call back. PHP file and now in the login.php as well we need

to start the we are requiring this you can see requiring config.php

so now it looks good and if I try to run this application you will see I'm not

currently logged in the table is empty if I show you the record nothing is present in the table so if I click login

with Google it will actually say to me uncut my SQL statement bind parameter

cannot be passed by reference call back by 69 on line number 60 there is some kind

of error line number 60 so it exactly

pinpoint Google uncore user ID Google

username uh just wait guys let me just uh pinpoint that insert

let me paste this uh paste it here now I think it looks

correct there will be the full source code is present guys with full documentation you can purchase it the

link is given and if I try to run this once again the number of variables must

match the number of parameters in the prepared statement in okay I think uh I made a mistake

right here so what I will do is that I will simply copy paste this whole source

code sometimes in coding guys uh mistakes may happen so what I will I will don't waste

your time the full source code is present in the description you can directly purchase it so once we do this

so if I show you the table right here you can see one record has been successfully uh entered you will see the

ID is one Google ID coding fure and this is actually the email address and

photograph so it is already been

inserted so

and then we have this file right here let me see it should print print out the

information this is the index the homepage of the application let me paste it

so if you see guys basically if

I there is a log out if I click the log out button right here this script

doesn't exist so we do we just need to create a simple script right in the root

directory logout.php so here this very simple script guys it will actually log

out and destroy the session it will delete this information so it's very easy two lines of code we need to first

of all start the session and then we need to destroy it

so session destroy this is a function and then we need to again

redirect back to the user home

page and exit out of the

program so now if you just see click on log out you will be redirected back to

the homepage so now if you redirect welcome coding sea your email address profile

picture and if I close the tab right

here and reopen this application it will already detect that I am currently

logged in it will automatically show you the login page Google login project you

will see that if I click log out now if I go to the same page it will

automatically detect I'm currently logged out so it will show me the login page so this way you can see that guys

you can try out with any if I again try out with different browser Google login

project click you will be redirected to the login screen where you can select your account click Grant the permission

and you will basically see welcome email address profile picture log out button

if I see you the table as well one record if I show you where is

my uh my app so two records I think will be

inserted sorry I think yes this one Google login project users to records

you will see har you see email this is profile picture so two records are present right here

you can log out again log in so you will see that so it's a very simple application guys the full source code is

given in the description you can directly purchase it from my website procore.com so full documentation you will get full

support you will get after you purchase it the link is given in the description so you can see that it's very easy and

uh in the you can see that in the index.php we

are actually displaying this uh display name we are displaying the email we are displaying the photograph then we have

the log out button in the else blog if the user is not logged in in that case we'll show you the login with Google

button right here so conditional lodging depending upon whether the user is logged in or not we are using it mix it

with PHP and HTML so thank you very much guys for watching this whole video thank you very much please hit that like

button subscribe the channel and I will be seeing you in the next video