Build a CodeIgniter 4 Google OAuth2 Login and Logout System With Sessions and MySQL in Browser

uh hello guys welcome to this video so in this video we will actually talk about how to actually integrate the Google login inside Cod nigher for application C nighter is actually a PHP framework if you don't know just write Cod nighter and this is the official documentation website it's a PHP framework it's a small framework but with powerful features it's a MVC W framework model view controller and let me just show you the demo so if I just open host 8080 this is actually the you will see the profile information about the user which is a display name profile picture and the email address so we also have the log out button as well if you click log out you will you are successfully log out and we will also be storing information inside this table if you see my SQL table so we will actually have these fields here which is ID this is the Google ID name email profile pick so let me just uh zoom in just wait so you will basically see guys this is actually our table which is storing ID is the primary key Google uncore ID name display name email address and profile picture so all these details will be storing it inside the table in COD nighter so this is the actual directory structure of the project if you see that we are actually running this project on our port number you can have this command PHP spark serve this is actually the spark CLI which is provided by Cod nighter PHP spark Ser so this will actually start our development server which will simply run on Local Host 8080 so if I open this application the very first link which comes right here so we are not logged in we need to log in so simply we need to click this uh login with Google button so as you click it you will be redirected to the consent screen where you need to select your Google account on which you need to log in I will simply select my Google account right here you need to Grant permission right here simply click on continue to actually Grant the permission to this project so once you click continue it will actually fetch the user information and it will display the profile picture this is a display name this is actually the email address and we also have the log out button and if I refresh the table right here you will see that one entry has been successfully added so you will see the ID is automatically inserted primary key this is the Google uncore ID this is a display name this is the email address and this is actually the full profile picture link right here that we are displaying here so in the browser so if I close the window right here again open it reopen it you will see it will automatically detect that I'm already logged in so it will actually redirect me to the profile page you will see that so now we are actually showing the user profile information so if I close my browser as well again reopen the browser and again go to that same URL then also it will work because it is storing this information in the session so again it will redirect me to the profile page so once we are logged in so we also have the option to actually click log out so now we will be redirected back to the login page so once again if I open the browser now it will re redirect me to the login page because we are log out so very simple login system guys we will not try to develop this Google authentication system so now you will see this login with Google button so once you click this button you will be redirected to the profile page so we are actually using Cod nighter 4 the latest version of the this framework we will be storing information inside the session table in the users table in the MySQL table right here you can try out with any account here Google account if you have a different account you can try out with that also again it will cons uh just show the consent screen you need to allow the permissions so once you do this you will see your profile information in a nicely like structure we are using Tailwind CSS for the user interface this is a complete project guys and if you are interested in purchasing the full source code of this project with full directory structure and documentation the link is given in the description you can directly go to the my website proot store.com where I've given the full source code with full directory structure and documentation the link is given in the description of the video after you purchase it you will actually get a zip file of this which will actually contain all these directories structure so once you make the payment you will be redirected to Google Drive where you will actually get this ZIP file which will actually contain all these project files so if you are interested the link is given in the description of the video so now let's get started by building this uh application so I will be seeing you in the next section so now guys in this section we will start building this Cod nighter 4 project before you do this you must have exam control panel installed on your machine so this we will be requiring for for running PHP because citer is actually a PHP framework so you should have exam control panel installed so we are actually starting our Apache server which will run on port number 80 and the MySQL uh database which will actually run on Port 3306 so this comes with this uh MySQL comes with this Apache while control panel exam control panel you can simply write here exam control panel download the very first link which comes this is their official documentation you can download for Windows Linux and Mac depending upon your operating system simply install this and start this Apache server and my SQL Server so now to actually install Cod nighter and make a new project I will simply go into the C directory and go to examp so just go to the exam directory where the exam is installed and then go to STD docs folder and write right here we'll make a new citer project so for making this citer project we have a command line tool that we can use which is composer which is a dependency manager for PHP application so we'll simply write this command composer create project citer so just write the same spelling right here that I'm writing citer 4 SL app starter and Then followed by your project name so let me just give Google O2 login project so this is actually the command guys let me zoom in composer create project code nighter 4/a starter and Then followed by your project name so I will simply enter it and now it will actually create the composer file and it will actually install all the modules which is a cord nighter modules so you just need to wait for some time to actually install in this and just finish so once it's installed it will actually give you notification that everything is okay so now you can see that now we can navigate to our project directory and open it inside vs code so it will look something like this the basic citer project we have the app folder we have the public folder so this is actually the basic citer project so now the very first thing we need to do we also need to install this module which is the Google API client which is a dependency required for implementing Google authentication composer require Google SL API client so this is actually the composer require Google SL API client this is actually which is required for this application simply enter it and uh now this will actually install this Library as well it is used to actually interact with the Google apis different apis so this is actually the client library for PHP applications so it will hardly Take 5 to 10 seconds and it will install this module as well after that we will actually create our table and migrations in code nighter so there is a actual command which is there which allows you to make those migrations so once it is finished we will try making the tables as well so just wait for this to finish so you can see it is just extracting the archieves here it is gone to this Google SL API Client Services if you see the version number it is the latest version that we are installing it so once it it is installed guys I will be back so now wise it is successfully installed uh the library that we are installing so if you see inside your vendor folder all the dependencies will be installed so this is actually the vendor folder and this is actually the module that we installed it is stored inside Google this is API client folder it contains all the modules that we will be using in this tutorial API client services so all the services that Google offers apis we have installed it so after installing it we will now need to create our database and table so for that we need to go to the app folder go to the config folder right here and just there is a file called as database.php you need to edit this file and here you need to tell citer which is your database name and the username and password so this is actually Local Host host name will be correct Local Host username you need to replace here for examp it is root password is nothing so by default password is nothing and here you need to replace your database so you do need to create just go to your PHP my admin simply click it you will be just create a new database I will call this database as uh o or2 login click on create so now now you will see that this database has been created this is O2 login database currently it doesn't have any table so what I will do I will replace this name in the database entry or or to login that's all and DB driver is my SQL I that's all this will remain the same you just need to replace the username as root and the database name so whatever database that you will create replace the name right here simply close this file now come to the command line and simply you need to execute this Command right here here which is composer uh PHP spark and make migration make colon migration and then you need to name your migration so I will simply say create users table this is actually the command simply pause the video and write it PHP spark make colon migration and create users table so it will actually create the users table and you will see the file is created in the database m mtion folder so if you just see there is a database folder right here in the migrations we have actually created this file this file is automatically created when we executed that command so right inside this file we just need to write here just write some code for this this Forge and here we need to add field so we need to add field for our ID so this ID will be actually will be the primary key so this will something like this so what I will do I will simply copy paste it don't waste your time and then explain to you what is happening so this is actually the fold uh I just uh just fit let me copy this and explain to you what is happening right here in this this is actually uh the fields right here guys we have added for add field we ID is actually the primary key Auto increment to Google uncore ID name display name email address and profile picture so this will be typ varar again constraint is 100 so we have just put right here after that uh we just say here this Forge and here we need to Simply add the primary key so we'll simply see add key ID to be true so this basically tells the Cod nigher to make this as a primary key and lastly we just need to create the table so there is a method out there which is in code nighter which is create table and we will name this table as users so this table will get created user table so there is a function create table so after this for the for this migration to happen if you want to delete this table we have this uh drop method as well there is a drop table method as available as well if anytime if you want to delete this table you can uh undo this migration so this function will call this drop table to actually delete that so both the functions we have written so now what what we need to do we just need to run this migration to actually create the table if you just look at in the database nothing is present because the table is not created Now to create that table using these constraints that we have written we just need to execute the command which is PHP spark migrate so what it will do it will run this migration and now you can see that the table will be created if you refresh two tables are created this is actually your migration table it will actually hold all the migrations that you have done so we have created one migration create users table and the second table is actually the users table if you see the structure of the table ID primary key Google ID name email profile pick these are five columns out there so the table is successfully created just close this file right here and now after this we now need to create model so in just go to the models folder and just create a file right here user model. PHP so right inside this file guys we need to models typically refers to the data whatever data that we need to store so right here we will be using PHP tag right here Nam space app models we will be using the code lighter uh SL model class and this will be the class here of user model it will be extending the the model class model based class so right here we will have some variables protected first of all the table that we have created uh table is equal to the table name which is users then we have uh the primary key which is ID and then we have allowed Fields so what fields are allowed so we are allowed in Google uncore ID display name email address and the profile pck so these are the four columns we will be storing information Google ID name email profile pick after this we will actually Define a function in our model to actually find or create we will actually pass the data to it and here you'll be actually inside this model we will be getting this information by using this where Clause so where Google ID is equal to Google uncore ID so this is actually the method first so this will actually get uh the username we here we are actually providing the Google ID so this Google ID will be coming before if you make authentication successful this all this information will be coming from Google so here we are actually getting the user by providing Google ID so after we get this user we can just have if the user is not found in that case you can simply say insert this user to the database so if this user is not found in the table if this is a new user then in that case we will be inserting this user by using the insert method in the table and then we will simply say user us this. where goore ID data Google uncore ID first that's also after this we just need to return the user so here if you see guys basically in this function we are getting the user and we are checking it if the user is already present so the user is already present we are returning it simply we are returning it so if this is a new user then we are inserting it to table by using the insert method like this this is actually the model class so that's all that we need to do inside the model CL class guys user model simply close this file now we will navigate to uh again uh app folder and this config folder and here you will actually found a file which is called as route routes.php this file is responsible for writing all your routes inside your application so there is only a single route available to you so if you just run your application if I run this application PHP spark serve this will start your development server HTTP Local Host 8080 so if you run it for the very first time this application this will actually load the homepage you will see welcome to Cod nighter 4.5.3 so which file is this doing it is going to the home page if you see in the routing file it is loading this component home controller and then home controller is calling this file which is index so now we need to go to the home controller if you see it's a MBC framework so model view controller so we have a controller folder if you see we have having this home controller and inside this home controller if you see we have the index function and it is loading this view which is this welcome message so we have defined this file if you see go just go to the Views folder we have this file called as welcom message. PHP so we are actually loading this file if you see if I make any sort of changes right here to this file WR say hello Vol so if I makes changes refresh you will see it will change so you just need to understand the inner inner workings of citer before you make uh integrate Google login so it's MVC framework before first of all the application goes to routes.php it basically goes to the homepage then it loads the home controller and that home controller is located in this folder home.php then it is loading this index calling this index method then it is loading the this view this is welcome uncore message which is located in the views folder so now what we need to do we need to add some more routes to it so just go to routes.php so right here we need to add some more routes routes for getting the login page so slash sorry Au login so for the login page we just need to create a new controller for this which is the Au controller and here we'll need to create a method which is login so for doing this just go to your controllers folder and we need to create a new controller which is au. PHP just create this folder just create this file. PHP and uh we will simply have appcore just write some PHP tag first of all app controllers it's a controller file that's why this name space is necessary and then you use uh Google SL client as Google client and then use app models SL user we are integrating the user model file that we defined early on and then we are using the use code ner SL controller the base controller class for defining every controller so you'll basically Define this controller class o extends uh controller so inside this controller guys we will actually have this method which is uh public function login so this function will be responsible for actually defining our configuring our client or for O2 login there will be another function which will be responsible for call back URL so this will be responsible for call back URL once you actually Grant permissions so which which URL you want to load and then the third function here will be for the log out functionality so here we will be writing code for logging out the user that's all so so right here guys first of all we need to write our login functionality this is really easy we will be configuring our client which will be new Google client so we have imported this dependency so and here we will have this function which is available to us which is set client ID so here we need to set our client ID and similarly we have a function for setting the client secret as well so we need to get both this information from Google Cloud console I will show you later on how to do this and in the meantime we also have this function as well which is set redirect URI and here you need to set your redirect urri the base URL followed by SL sorry au/ callback so this will look something like this uh if you want to see HTTP Local Host 8080 SL au/ callback so this actually is the redirect URI that you need to copy pasted inside Google Cloud console to actually get the client ready and the client secret so after this we also need to add the scope what scoping information we need to say add scope we need the email scope we need the email of the user and also we need the profile as well so we need the profile as well like this so after this guys we will actually be creating the Au URL so this will be client there is a function here create all URL and then after that we will be returning this we will be redirecting user to this URL which is two and then or URL that's all that's all is there in this function guys so once once the user goes to the login page once it clicks it it this function will trigger and here we need to actually Define this client ID and client secret so for doing this you need to have a Google Cloud console account for this I've already have one so if you just go to apis and services you need to go to credentials and uh if you go to it then click on create credentials o o client ID and select app application type to be web application and here you need to paste your homepage URL so this will be I'm running it on Local Host 8080 this is my homepage in the authorized JavaScript Origins and then the authorized redirect URI so the same redirect URI that you have mentioned right here if you see I will copy this so This depends upon on how you are configuring your application for me it is look something like this just see this is the HTTP local 8080 Then followed by sl/ callback that's all so just follow me and then you will get no error so after that it will give me my client ID client secret so don't copy this information this will be different for you so just simply paste the client ID and also paste the client secret so after you do this it's very now easy now uh now what we need to do we need to go to the if you see we are actually having this Au controller if you see Au login so here what we need to do we need to go to the home controller so just go to the controllers folder just go to this file which is home.php and right here if you see if you are going to the homepage we are simply loading this view but we don't want to load this view instead we want to check if the user is in session so session we will basically have this method get if the user is in session in that case the user is already logged in then in that case just remove this I think why it is coming if the user is already logged in then we will simply redirect him to the profile page but we will just do it later on but if the user is not logged in in that case we will return the view as au/ login put a semicolon so here we need to define the login page login view which is uh which will be present in the views folder so we just need to go to the Views folder right here and just Define a directory called as directory o a and inside this directory you just need to make a file login.php so this will be the login page so we also need to include Tailwind CSS because we are using it for styling the UI so just after the title paste the CDN for CSS after this guys we will be having a body class BG gray 100 inside this we will have these much of classes this is just a basic HTML so I will not waste time in writing this all the source code is given you can purchase it so this will be the index uh login HTML we have a simple button login with Google and it will simply go to this base URL which is / login so this routing we have defined it inside routes.php so here we are actually if you go to all/ login we will be loading this function in the controller that we have defined if you see or. PHP we have defined this function which is login we is simply calling this function login function if you see in the controller file so in the we are simply going to it so now what we need to do we also need to create one other file in this views folder which is profile.php just create this not in the O folder not in the O folder just outside this profile.php so here we will be showing the profile of the user so we will say this is the profile page simply here in uh our controller file if you see uh not in controller file it is in the uh I think there is this file home.php so just go to the home.php and here we will simply if the user is already logged in then we will redirect the user to the profile page so two base URL profile so here we are simply checking if the user is already in session if the user is already logged in then we are redirecting it to the profile page if they are not then we are showing the login page login view so if you just refresh now you will see the login with Google button right here so it has already detected this condition evaluates to false because the user is not in the session so now it is running this view which is located in the O folder in the views directory if you see o folder and it is loading this view login. PHP so once we click this button right here login with Google it is saying whoops we seem to have hit his snack so whenever this happens guys if you want to debug your code nighter application there is a folder available to you if you go to this uh writeable folder and go to logs and there is a logging file right right here so you can check errors what error has happened so it is saying to us that class Google client not found if you see this error is taking place Google client not found so we need to actually uh go to that and actually import this class because it is saying to us that this class doesn't was found so I think I made some kind of error in this Google client Google / client as Google client let me see guys what is the error so now guys it is perfectly okay the application is now working so it was just my backend issue so now you can see that if I click this button of login with Google it will redirect me to the account selecting screen consent screen so here I can select my Google account and uh let me select this account and here need to Grant permission so simply click continue so what it will do it will exactly show you 404 page because you can see the URL structure Local Host 8080 sl/ callback this is actually the call back URL that we have configured and this is actually it is giving you the authorization code this is exactly what we want this authorization code value we want this code to actually exchange it for Access token so access token is access we need the access token to actually use the Google API to actually show the user profile information so now to exchange this authorization code for Access token if you see you need to go to your uh route file go to config folder and just open this uh routes.php so we need to write this route for the call back URL so when this URL occurs we need to add a routing for this routes. getet and then we will simply say /all back and whenever this occurs we need to call the Au controller and inside this we need to call the call back function put a semicolon so here we are simply telling Cod ner whenever this URL structure comes we just need to call the O controller in that Au controller we have defined a method called as callback if you open the O controller if you see we have the login method we have the call back method and we have the log out method so now we will concentrate on the call back method to actually exchange the authorization code that we get with access token so now inside this again we need to configure the client new Google client we need to set the client ID once again here also and also the client secret as well and also we need to set the redirect URL this is same that we have done early on as well base URL / callback so put a semicolon right here so here you need to replace your simply copy this and replace it here also and just replace your secret key as well right here so after that we will actually have a if condition right here and here we will simply check that if request get variable code so this simply means that if this in this URL structure if this uh code variable exists so we just need this value this is authorization code so we are checking in this if condition that if this code variable exist then we need to exchange it for Access tokens so we will simply have a method right here inside this client library of PHP which is fetch access token with authorization code or you can even Fetch with uh refresh token as well but we using this fetch access token with authorization code this is a method and here we need to replace our get Val we will just say We'll provide the authorization code like this so after you so this will be in this request method request it contains this method get like this so now we actually get this access token so if you want to print out this access token just to see what it looks like you can just Echo out a simple statement right here token so it will just show you on the screen if I refresh here just go again I think okay so this token if you want to just see the error you can again go to that I tell you that writeable folder and this log statement and you will see this lock if you just delete everything from here again refresh you will see arror to string conversion this is actually the method error is coming because this token is in the form of array we can't display it directly that's why this error is coming so we can delete this line from here instead what we can do uh uh what we can do right here we can set the access token the client set access token you can pass this token as it is token access token this is actually array so that's why it was having this error so if you want to display this this is actually a array so in this we have this property called as access token so now if you want to display it if I refresh now you will see that so this is actually the access token that we got from this authorization code if you see so we exchanges this authorization for for this access token so we are actually getting it and we are setting it so it is good practice to actually debug your code as well just to see if it you if you are on the right track so after you do this we just need to declare a new variable new Google service and uh this service will be for the o 2 login system so passing this client as an argument so here we need we will be getting a Google user from this so O2 this actually contains a function which is user info and it contains a get method so now we will be getting the user model we will be instantiating a new instance of it we have declared this class early on which contains five properties Google ID name email and profile ID so what we will do so you'll put the user data array variable you will simply say Google user ID then we comes the name Google user name and then comes the email address email then comes the profile pick picture I think that's all so these are the four columns that we had and just put a semicolon right here and then we need to Simply insert this into the database as well so we'll say user model find or create this is a function we'll pass the user data so actually it is calling this class which is user model class we Define this function early on find or create if you check in the models folder uh if I show you user model class we have defined this function find or create so we are actually checking if the user is already available then we are simply returning the user or if this is a new user then we are inserting this user in the table like this so This is actually calling that model function so this is internally related guys say MVC framework model view controller that's why after this we need to store this VAR uh user in the session so you'll say session set it's very simple in C nigher you look like this user pass the user like this this will set the user in the session and then we will simply return and redirect the user to the profile page two and here we will simply go shift the user to the profile page that's all simply and here if you see if this uh request code doesn't generate in in that case we will be redirecting the user back to the login page so redirect to to the login page so / login if there is some kind of error then we are simply redirecting user to the login page that's all so if you just refresh now what will happen it will actually if you just go to Local Host 8080 click this button and uh sorry cannot seem to find the page you're looking for can again go to the log here again delete everything from here again refresh so you will see it will redirect you to the profile page whenever I want to go to the homepage it is redirecting me to the/ profile page if you see so here it is saying to me that 404 not found so this is not error but we are on a uh right track if you open this uh routes.php we are haven't defined this route for uh the profile route so we do need to Define this to actually counter this error so we just need to define the profile route just right here we will say routes doget profile and whenever someone goes to the profile page we need to Simply call the Home controller and then def call the profile function so here we need to go to the home controller and right here we will be calling our home controller and this home controller actually contains the code for so here we will Define a function profile so we are calling that function so here we will simply say the user will come from the session so session get you getting the user right here you will see from the session so after we get the user we can simply compare right here if the user exist if the user doesn't exist here we will simply redirect the user back to the login page very simple very simple logic base URL that's Sol so it needs to have dollar sign so if the user doesn't exist we are basically going to the homepage and if the user exist in that case we will showing the profile page profile and here we will be in sending this user as an argument user is equal to user that's all so if you just refresh now they will actually see this this is the profile page if I go to the Local Host 80 it will redirect me to the profile page we are currently logged in now we just need to go to the profile page that we have in defined here in the views folder profile.php and here we just need to edit this file just to show the information that we need which is the profile picture display name and the email address so just after the title paste the CDN of Tailwind CSS and this is profile page of user so all the source code of this project guys you can purchase it with full documentation the link is given in the description I will support you once you purchase it and after this right here we will be giving a class BG gray 100 so we will be having class here M at screen Flex items we will show the image to the user like this so we are showing the profile pick like this so if you just refresh you'll see profile picture is showing we will basically give it some Tailwind classes to it so just give it a class rounded full MX Auto mb4 so it will basically turn around so then we actually have to have a H1 tag so let me just write this guys a slightly complicated code so I don't enjoy writing it so I will explain you once I write it so just format so you will see this is act profile pick this is a user display name this is email address and this is actually the log out button it will actually go to the au/ logout route if you just refresh now you will see that so I think there is some slight mistake that I done let me copy this whole file I hate writing HTML guys that's why it creates some problem now it is there in the same screen so all the source code is given guys you can directly purchase it from my website Pro Cod store with full documentation and directory structure and after you basically you need to Define this route au/ logout so just go to your routes.php file and whenever you click this uh log out button we will actually be having this route so in this route guys what we need to do we just need to paste this so it will actually call the log out function in the Au controller just make open Au controller and here we need to uh Define the log out function which is pretty much very easy we need to destroy the session so this session it contains a method to destroy the session after destroying the session we will redirect user back to the homepage like this that's all two lines of code for logging out so click on log out it will react back to the homepage again if you click login with Google you will see that so now if you close the browser once again open it it will automatically detect that you are already logged in Local Host 8080 you will see that so if you see the this information is already been inserted in the database as well if you check O2 database we have created O2 login database so in the users table we have currently one user logged in so if you try to log in a different user Local Host 8080 click on if you're doing it for the very first time then you need to select the account here you need to just do it for the very first time and then a new account is inserted so this information is inserted automatically this is a project guys fully flesh project in citer 4 and if you are interested please hit that like button subscribe the channel as well and you can find out the full source code purchase it the link is given in the description you will get this full directory structure with full documentation and support from me once you purchase it from my website proot store.com you will get a zip file after you purchase it from Google Drive so thank you very much guys for watching this video and I will be seeing you in the next video

Channel: freemediatools

Views: 50

Keywords: freemediatools

Id: lnNG891MEp8

Length: 53min 16sec (3196 seconds)

Published: Mon Jul 01 2024