Login With Google Account Using PHP & MySQL

hey guys in this video we'll build a login form which is gonna have a log in with Google option so basically what will happen a form which is gonna have two fields and then we will have a login button which is gonna set me in the form and then next to the login button there's gonna be another button which is gonna say log in with Google when the user clicks on log in with Google we redirect the user to Google Google is gonna send the data to our app and we store it in the database and then from there we just output the data on the main page which is index dot PHP so here's how this process gonna look like here we have the user so whenever the user is accessing our website for the first time the server's can access the image that PHP file by default so here's how this index dot PHP file looks in my case I've divided in two parts first part is what the user will see if is it's not logged in and what the users gonna see if is lovely right this is not logged in they will see this form which has two fields a launching button to submit the form and there's another button which is larger with Google whenever the user will click on this log in with Google button our app is gonna redirect the user to Google Google is gonna add the user to provide a valid email and password and after the user will provide that data Google is gonna redirect the user back to our app and more specifically it's gonna redirect the user to controller dot PHP file on our server and at the same time though Google is gonna send the user data from Google to our app to the same controller dot PHP file in this file we will process the user data we will store it in the database we will set cookies in our users browser and after that we will redirect the user back gene that's not each now having the cookies in the user's browser we can check if there is any user in the database which has the same value that our user has in the code in the browser if there is a user in the database same value then that means that this user is logged in and we output the user data in units of PHP so that being said let's go ahead and get started guys I have a quick demo here this is the form so I'm in the index dot PHP file I'm not logged in I see this form I have login button two fields and there is log in with Google now I'm gonna click on this log in with Google party and because you see I'm redirected to Google calm account at google.com here I'm choosing an account so I choose this email and then I provide password I click Next and now the user redirected me back to index dot PHP actually it redirected me first in the control dot PHP and then from the controller I was redirected index dot PHP back where I see the data from the database and this is the beta from Google I have my first name last name my avatar and my email there's also logout button if I'm not gonna click on it now but if I'm going to the database just wanna show you that I have the user here so I have the ID one first name last name avatar email there's also a password and accession columns I put the session just to show you that you can generate a food password because just to show you that you can generate a password and there's also the session this session is the same in cookies so if I open my tools application tab on the left side you can click on cookies or figure domain which in my case is localhost and here I can see the cookies so I have the first one is ID the second one is the session the ID is one user ID is one the session starts with X Z and it's ending in v8 so we see xz7 and the NVA so this session from our database and that's why we see this now if I delete for example this session and if i refresh the page I'm gonna be redirected to index dot PHP but I'm not gonna see the user date anymore I will see this login form and if I click now on log in with Google I'm gonna be redirected really quick because I already provided an email and I'm already logged in on Google so I didn't have to provide a Yalie email on the password now if I click on the log R this is gonna destroy the cookies from the browser and it's gonna redirect me back to s dot PHP so this is a quick demo this is what we will be building in this tutorial now just to let you know I'm using Sam I have Apache Ronnie and wife's yo Ronnie I'm gonna actually delete where I'm gonna create another database here I will start thinking start with that click on databases I'm gonna create one let's say Google login the codification is gonna be utf-8 general general CI create well it beats it ok so this database like that already let's say login G ok here I'm gonna create a table which is gonna be users and then this table is gonna have another member and see how many structure so we have here ID first name last name avatar email password and section 7 columns alright okay first of all is the ID which is integer like tan oops it's gonna be the primary key all right and then the second one is the first name this is varchar' make it 50 then last name bar char 50 actually can also choose the collection if you want ETF a general CI you may want to do that if you have different languages on your website like this and then what we have there is Avatar email email password and the session all right well these are varchar' here's put 200 because this URL may be read along because google is storing them in separate separate place separate domain face of general see I hear the same thing okay here and then password password within shield also utf-8 a OCR and this one the same thing all right but this one email is going to be March are 100 the password bar charm 100 section bar chart and 100 and then let's save it okay so we have now our users table we have database I'm going to close this tab from here and now I'm gonna create another folder and that will name it log in Google I'm gonna open it I'm gonna open my dears code in this folder it's taking awhile guys I'm sorry about that I've been recording on this laptop but it's kind of slow so okay so it looks like it's opening now just have to minimize it a little bit oh okay so I have it here all right so I'm gonna start with my index dot PHP file I'm gonna create the first file which is gonna be index dot PHP and this file is gonna be in html5 and one another thing though is like I would like to import here bootstrap I'm not gonna have any CSS files on my server and I'm actually gonna close this down I'm using it so let's search in google bootstrap there's bootstrap calm click on that link click on get started from here copy the CSS tag all right let's go back I'm gonna paste it right below the title my title my app style is gonna be log in with Google and let's see what else here in my body section I'm gonna have a if class container this causes all these classes mm-hmm so I'm gonna all these classes are from bootstrap so container I'm gonna close it something else here I wanted to add a style tag and it's gonna be margin top hundred pixels and here I'm gonna have a form first of all I'm gonna have an image so if you go you can put your logo there's gonna be my novel so if you go on my github github.com slash are you Victor under my repositories you'll find this repository is mine on the description of this video there's going to be log in with Google and just just want to copy this file just want to save it and I'm gonna save it this here C exam HT talks are you with Google and here I'm gonna create a new folder which is gonna be IMG and open it and I will say and I'm gonna close this down now here I'm gonna add that image so image source OMG logo that P oops logo dot PNG alt tag is gonna be logo and you don't have to cause it like that just got used to it so okay so we have the logo there's gonna be some styling here I'm gonna add style so there's gonna be display table margin:0 auto and max width of 850 pixels so this is just gonna Center the logo to the center and I'm gonna make it I'm making it smaller because it's really big now here I'm gonna have the form tags on have form form action is gonna be in the same file method is going to be cost closed form tag this form is also from bootstrap so I find it in Gustavus if you know how chief or just search in google bootstrap forms but I'm gonna typing it from scratch so you can follow along with me well the first thing is the form group there so I have actually there is div class form warm group and then this D we have the label label for example input email email one all right here's gonna be email address we close the label tag and below we have our input which is our input type email and here we have class form control and the ID is the ID is example input email one one from here and the placeholder placeholder is enter email all right and let's see okay we can close these days also it's another field so we can copy this the form group paste it here and this it's gonna say password and this type is going to be password form control but actually this label is going to be for example input email one it's gonna be password password one diee is gonna be also possible one and the placeholders can be enter password and then below this the we will have another submit button so I have button type submit class it's gonna be button-button - primary she's gonna make it low it's like a default button and it's gonna say login and then we close it we close it like that and the low we will have another button which is going to be log in with Google so let's see but but this button is gonna have an on click event so for now let's just add in type body and the class it's gonna be button button - danger just make I'm gonna make it rad this is gonna say log in with Google we closed button tag and we have form okay so let's see what we've got I'm gonna save it and just make sure you remember was the name of the folder in our case is log in Google so I'm gonna open open this and open my local host this is my own project so open my local host and our fold is login Google so here's how it looks like we can form them and now I want you I want to create a project on my Google console so make sure you log in on your Google account just trying to see I'm logged in or is unlocked in just go on the search for developers developers.google.com okay so you can access this subdomain developers.google.com/live is taking no it's actually console developer so let's just start for it also developers.googl all right so the subdomain should be counseled out developers.google.com open this console now here we want to create a service account for our per our app so wherever you see this it's saying Google API stays like a drop-down menu click on that and click on new project and here choose a name so we'll say login tutorial to organization organization click on create and this is creating a project alright this is done now under credentials on the left side we want to click on create credentials and here's all of client ID but sometimes guys you may see a something about screen something or something like that because whenever you'll click on create credentials you will not have this option here but there's gonna be a button somewhere should be configure is something an option related to the screen or something it does the first time you create a project like that on your Google account so configure that just put your name your app's name and that's that should be that should be you don't have to insert or add any then you will have some options for your apps URL and stuff like that you can leave that and just just use your name and save it and then after that just click go back to credentials click on create credentials and oh client ID right click on that choose web application now here the name say well web client she say login tutorial to the authorized JavaScript origins we don't eat that but what we do need is the authorized redirect URL this is the callback for which from glidecam to where where we want to redirect the user after they love them on Google so this should be the controller that each people now let's go back to our app let's copy this URL and we paste it here and also add that file which is going to be controller dot PHP well we didn't create it yet but we will so let's just set it up here like this alright and then click create and this is gonna give you credentials or offline created your client ID and your client secret this is this is the data we will need for our app so let's keep this tab open now let's go back to our app and let's continue with our building our app now let's go ahead and create our controller file about first first things first we should create before we do that we should create another file which is gonna be the config dot PHP file so we have completed PHP now here we will put these credentials from our app and using that file will connect our service account from Reuben alright we'll configure that so let's do that first of all open our PHP tag oops ok and here we will actually another thing I forgot we should import or should save our there's a library we said there's a library on this github.com slash Google API slash Google a guy - API - PHP - client slash releases I will leave this link in the description so check description of the video now what we should do here is download the latest version of this library which is our version two point four point one it says zip file click on it this is gonna download the file and this is gonna download it and into my downloads folder which is right here it's still downloading ok after it's done we want to unzip it and after it's gonna exhibit we should take this folder rename it and paste it in our project alright it's taking a while because there are so many facets library this is a PHP library built with guilty taxes this Google Data Google API and stuff like that we definitely need this library ok so this is the library I'm gonna rename E&T Google - API I'm gonna copy from here I'm gonna go on your mind you see Sam HT talks launched in Google and I'm gonna paste it here this is all gonna take a while because they're like eleven thousand eight items so I think I'm gonna pause the video guys all right so it's done now let's go back to our content dot PHP file and here let's require this vendor outlawed PHP because if we open this one there is a vendor folder and we want to import this bathroom here so let's do that here I'm gonna require bonds and we will put here Google - API that's the folder slash then there not a folder and how to load up HP alright having this one in place now we can assign a new Google client object to our to a variable which is gonna be G coin and we assign a new object which is Google underscore client like this now below here we have G client and we will call the function set client ID alright and here we will have the current ID and also G client and here we will set the client secret some have set set client secret just making sure I'm not spoiling anything and these credentials are the credentials we've got whenever we created this hoth client client account so let's copy client ID you can actually click on this one go back here and paste it and let's also copy the client secret let's also paste it here and then unlocks we want to set an application name so I have G client and we set application name and let's name it my code media login and then on the next line we will have to set the redirect URI so we have G client set redirect URI and here we have let's say HTTP localhost / this is actually the same URL we had we pasted it before so it's gonna be this world from here let's copy it let's paste it here like this but then we have slash and then this should be controller dot PHP this is where you gonna redirect user T with the data for movement and then the next line will add scopes like what do you want to do on that users icon we want to get using for email and the login data like the username and other stuff so CG client and we use the scope and here we want to get the actual each one and find out more about these scopes there is a URL I'm gonna also leave it in the description so it's the blog post at google.com slash identity slash protocol slash auth to slash scopes and here we have all these different kind of scopes for any different other functionality here we will be looking for of user info dot email so I have well this one will use this one and we will use another one which is going to be plus dot login so let's do that let's go back to our file and let's type in here HTTP and it's gonna be valid on the table the Google API is calm slash off slash plus log in space and we have HTTP we have www.google.com/mapmaker and then oops below we will have a variable which is gonna be login URL and we will assign the G client create you create off URL so we create a URL so this is gonna sign the authentication URL to this variable so now we can import these config dot PHP file let's save it let's go to our index dot PHP let's import it here so I have required once config dot PHP and now having all these data now and it's not PHP now wherever we have our button type party let's add the on click event and this is gonna be this is gonna be a new window so have your window locations over here though the location and we assign a say like this alright and yeah we will have a beach be a tag let's close it at the same time and then here we'll have neck hole and we will equal the log in underscore URL which is gonna be this one alright so whenever somebody will click on this log in with Google button the user is gonna be redirected to this URL to your login all right let's save it see what we've got here it's good and let's go back to our app let's refresh it just to make sure the works fine I'm gonna close this stuff I don't know they stabbed women may leave it like that so let's click on log in with Google to see what happens and it seems like there's an error response called X style a lot on quality okay so I miss all this stuff it needs to be controller and miss them are here save it because it did this URL from here didn't match with the URL we paste it whenever we created the conditions so let's go back and refresh it quick one more time now it's redirected Michi Google Google is asking me to choose an account and I'm gonna choose this account of course let me click on it and after that the users Google is redirecting me to controller dot PHP and I'll pay attention to this code guys because there is some data in the get method we have a code variable and we've got this code codified right and then we have email profile and other data here so it's saying object not following my local host is because we didn't create this file yet but as far as as we see everything works fine until now so let's go back and let's keep going with our app now let's go ahead and create that file so we'll create the controller dot PHP alright and the controller dot PHP actually this is gonna be just a simple file we will create another folder here which is gonna be poor and in this core folder we will create a new file which is gonna be controller class dot PHP and this is gonna be an object which is gonna have many other functions and will have functions to read the data to insert the date to check if the users log they will not and stuff like that so this is gonna be the controller this is gonna be the main object and we will call this object from this file from this part okay so let's continue with our controller that PHP file for now C control dot PHP so here let's open our PHP tag let's close it and here we want to import this controller that cause that PHP want to get the objects of require ones and we have here the core folder slash controller dot class dot PHP and then below we want to import the configuration stuff so we will require once on take that ehp file and then below we will check for for that code from the get method if you remember there was like a code equal to so we will check if there's any data like that in the get method so have if is set from the get method the variable code so this variable has any current data then we want to assign to the token variable the X is talking with our code from Google so we assigned the this code because that's the authentication code to our variable talking rebel then we will use it like so we assign the G client object and we get the cheek line object is this one all right make sure you don't misspell it here because we get errors and then the function is fetch access token with half code alright and here we have the get method and the variable is code like this alright otherwise we just redirect the user back G location index dot PHP and we want to exit the program except the execution of the code right so we have it like this here we've got code here and below now here below we want to see what kind of data we get from Google right so to do that we should create a new we sign a new object which is Google service off key to a variable which is o off so we assign new object which is Google underscore service off to and we use the G client object to do that as a parameter all right so we've got this Google service off to make sure you're not it's gonna spoil anything guys I made two some misspellings here and there but I'm gonna fix them later on if there's any mistake so we have and now we assigned to user data variable the user info using the OAuth object we just assign to this variable and we get the user say user info underscore version Chee underscore me and then the get method and this is a that's a function created by Google right now let's see if we get any data from Google so we have bar down and let's say user data and let's add something here echo this tag is gonna arrange the code it's going to be more readable so yeah okay like this let's go back to our app let's refresh it make sure I don't have any earth let's become logging with Google and it redirects so we didn't have to choose and not again the Google which email we want to use to log into Google because Google already knew I'm logging into my account and it redirected me directly to control of each people and it sent me all this data if you see this code this is the authentication code we will check for it right here itself and then we get identification and then this is the data we get from Google so we have the email address which is my email and then the family name which is this one given name victor ID this is my Google ID and there's also other beta and name there is also the should be the picture somewhere there's about this picture so that's what we want to get also so yeah now if i refresh it on more time I'm gonna get an error because this code is valid just for one query so I can use it as for as many times as and one is just for 1x access to this date so now I should go back and we should fix that error but let me just do it one more time so we have this data structure here because we will have to work with it and now let's see token let's also see what we have in our token here this fresh it on time okay so let's keep on the farm log in with Google so in the token we see that there is this string there's the scope all right and there is also ID token now if i refresh it one more time of course I'm gonna get this error just because I have to comment this out and I'm gonna go back you know refresh it now so we see that in our token we have an error which is gonna say which is saying invalid grant just because it's saying that just because this code code is not valid anymore so that's why it's saying that but look if I'm going back refresh it and click one more time log in with log in with Google I get it these days I can which is a valid data and if i refresh it on more time it's getting this error so what I want to do now is I want to check for this error if this error is popping up if it the text is Earth and that means that the user is trying to accessing this file for the second time which means that's not a good reason for this user to do that and then if we detect this error we want to redirect the user to the index dot PHP file so to do that we should uncomment this stuff and here above our Google service off object we want to have an if statement which is gonna check for if is sad is sad the token and from this parry we want to check the error all right and this if this error is different than this earth is different than invalid grant oops again copy if it's different than in delat grant and that means that session is still active all right so if the section is still active then we want you run following stuff from here all right so we're scientists object it is variable and we get data and here basically is the stuff when we have to insert we get the data and we want to insert there to our database so let's save this one as actually here we didn't actually do everything here should be an else header location index dot PHP and we have the Excel function alright like this let's save it user then it's here someplace okay so now if i refresh it is on the result of an expression you can use more so there's a an earned 11 forgot she close the parentheses it needs to be here right now compression strong this error that's really weird oh just because i misspelled it here and this token token and told him say they go back refresh it no okay so it redirects me to unicef beach and i click log in with Google and it's kind of show me Google's gonna send me this data and if i refresh it on my time it's gonna redirect it back to the unit's not HP so this works fine okay now here I'm gonna get rid of this stuff I'm gonna save it for now and here I'm gonna call I will healthy or a function which is gonna insert this data in the data so to do that should go to our controller class that HP and let's up a PHP tag here and here we will start with with the connection to the database so first thing is is a class connect which is going to extend extends the PDO object and here we will have the configuration to the database so we have parent construct okay parent Comstock and here we have our tea underscores and this construct is gonna have us a few parameters which is going to be the database type so now our case is MySQL and the host is localhost and the database name it's gonna be DB name it's gonna be what's our database a program it's Google login G so I'll copy this line from here I'll paste it here and then the second parameter is the user which is wrote in my case user to the to log into the database and then I don't have any passwords and false what's all living like that okay another parameter though is gonna be an array like this and this area is gonna have the qualification data qualification just gonna be utf-8 so we have here video and we have my SQL underscore IgD on the score in it underscore command alright and this is gonna have the qualification set names utf-8 like this alright and now below here we will have a few two more lines which is gonna be for the set actually set attribute lines which is gonna be just a few small settings here well let's see if we can do this without using them and actually here we've got this parent this construct needs to be in a function so the stuff is to be in a public function safe public function construct and we don't have any parameters for this one and here we will have like this so this is going to be a public function called construct all right and then here below this is connection to the engines now here below we will have another class which is going to be the controller so we have class controller and here we will have function this this function is going to be function to insert the data in the database and we have a DP we assign a new object which is the contact from here so we assign the connection to the data piece to this variable this is a new object and again I forget to mention this function first of all this is a function alright and the function name is insert data and the super arbiter will have data all right like this and we get a connection to the database here and then we want to insert this data in the database but before we do that let's go back to our controller dot PHP and now we can call this object you can sign it your variable so let's yeah I'm gonna in the controller so we import it here and now let's assign a new object so just here like this insert data we have a new object which is controller and we assign the object which is controller okay just make sure this name matches this name all right and then using this controller we will have an echo controller and we call this function from this object which is insert data and the data will third here is in an Eric format so we have three all right and we will start with the email and we get email from user data let's see what we've got okay it's not gonna work anymore because I believe that stuffing data we want to get email which is in our user data and just comment this out and I'll put that bar down back just to see what kind of data were trying to get from here all right so we want to get email so this is email and now we want to get a family name given name and picture so we'll do that here I'm gonna get rid of this uncomment this stuff back so have controller alright you can get email useful data email we will get also the first name as the with Avatar first get avatar and this is picture and we also get picture family name family name here see boys yep family name and then given me copy this one like this so I don't misspell them okay given name this should be comma okay what else we got one two three four so we get the email avatar first name and last name I mean first name is lost alright let's save this we have that code here we'll just make sure we get this data from here so let's return for now the data so what we've got there the avatar for example oh we got avatar here so it should show the picture on the page right now if I go back well if i refresh now it's gonna redirect it in some PHP I click log in with Google Colton foil method construct control for saying that set and thrown in sample across for so there's a problem in the phone line problem is pulled something here on this connection to the database just make sure thing is fine public function and we have to construct parent construct my skill host local host database name user password this is an array PDO mysql GP init command get set name CDFG and let me just add two more alphas here because I think that's why the is air is popping up so I have this set TV we have video and a Kiki are on the score our mod and we have video and then our mod and we have underscore exception section and then the second one is base and we set set add to the video a Kiki are on the score emulate underscore three pairs and false alright let's see this kind of things the problem because I didn't so yeah that was the problem guys because I can set this error mode and the emulator repairs because this one is for the prepared statement and this one is for the error more than the board for the way they show the errors I'm not sure about that guys I cut this functionality from a PHP [Music] website there was an example on how to connectivity so I didn't get deep into this stuff but you can just do more research to see what's going on here alright so speak and log in with Google it's still trying this error let me see I'm gonna just pace it because I have already created before side it all right so saying because I had this database before another day that is what we see now big volume with Google so okay so it works I guess I misspelled something here around as just make sure pause the video and see if you didn't misspell anything they don't have any Earth's from here because I did some response I don't even know where what it is fault here because I couldn't see that so just for the sake of time I just copied from my project and they paste it here you can also find this project in the on my github because it's gonna be a link in the source code so you can check with my code alright so the connection to the database works them sure actually I'm trying to remove this one to see this is kind of throw any errors just just curious about that so well so way we don't really need that stuff all we need is this stuff okay public function like this one more time log in with Google okay so we get the Avatar URL from Google so if I copy and I paste it in a new tab it's gonna show my picture right so let's keep going with this one we want to insert this data in the database and actually to do that as just get rid of this return for now so here we will have the check first if there's any user with us with this email the database so we come to the database and check it is already a user with this email there is a user with this email we don't insert this data and database but if there is no user with this email we want to insert the state and the database so we have it for the next we'll have it for the next time the users gonna log in with Google because in this case we want to make it so whenever the user is gonna log in for the first time using Google we want to save all that data in the database to have it for the next time and we can also generate a password for that user so the user next time can just log in using their using its password and email so let's let's check for this stuff check user using Ted connection to the database prepare statement all right and we can select everything from users where email it's equal to email and then we have check user execute and here's an error so we have email so email data in like this okay we have it like this and we have a new variable which is info and we assigned the check user using the fetch and here we get the PDO attach a sock like this and now we can check we will have another if statement if in call ID so if it found a user like this this is what we are checking now if it found the user in the database we want to check if there's an any ID in our variable if it's assigning any data alright if there's an idea in our input that means the days we use with this email so here we want to focus oh no if it's different then that does going to be fair so if it didn't find if there is nothing in this variable ID and we want to insert this data in the database so let's go insert user using the database prepare statement and here we have the third into users and here we have first-name lastname avatar email password session here we have values and the valleys are following should be should be in the same order so we have first name last name we have avatar email and we have password and the last one is the session all right all this stuff it's good now we want to execute this inserting stuff so insert user execute this is gonna be an array so we have here what's the first one firstly right firstly and here we have data data and it's gonna be given me for last name email it's avatar email password and session all right first name this is gonna be a last name and this is gonna be family name and we also have the avatar and this is gonna be data avatar we have the email here email password actually the password let's just do for now one two three and this session session is gonna be also something like 5 6 7 8 alright and then you will have a neat statement let's let let's save it and let's see what's going on here because I hope we don't have any errors okay I'm gonna click log in with Google this is gonna redirect us to control a PHP but that means that we should have something in our users table so if I open the users table I can see that it's inserting data in the table we have first name last name avatar email password which is 1 2 3 in this session is 5 6 7 8 so everything works fine till now now below here we'll have another if statement which is gonna say if insert user so if this insert query has been inserted inserted the user successfully then we want to set cookie so with house set set cookie and this is going to be ID in or let's say ID actually not not like this because we can't use this one yet because in this case if it's doing this in case it didn't find anything so what we will do here after this is going to be executed we want to get the last inserted ID so let's do that using DB connection to the database we will use last insert ID and hi no let's do something like 60 60 24 30 this is gonna be if I'm not mistaking is gonna be per bar than a all right this is the path and here is a null as parameter and we want to set another cookie like that for our session so we have SAS and here's gonna be the session s also we will have a variable which is going to be session so as the session at the same time and no now this session here we will will have to create another function which is going to generate a session and also guys so right below our class controller we will have another function let's say generate char here we'll have function we will name it generate code alright this January code it's gonna be say here we will have the length we have chars and here we have chars BW y Z ABC you add this minus u 1 1 2 3 4 1 2 5 6 and then we have the code which is empty and then we have clean variable and we assigned as TR Ali and chars minus 1 okay this is getting the width the length of this char and then we have wire miss Terrill STR le and code like okay we get the code chars and T r and 0g clean like this and then after that we just return it it's all what this does we get a chart we get the line all know what we call this function will have a length now okay let's say I don't know maybe we can put five for the password and for the session we'll put like 10 and we have a code variable which is empty I'd fall first like first time we know this function is running it's empty and then we have another variable which is getting a sterlin chars she's getting the whole number of the characters from here minus 1 because it's start counting from zero and then while this code is not greater than the length this length from here's a prompter and we assigned to the code variable a random character from this from here C chars empty ran from zero to clean which is the number of the characters we have from here so it gets one by one character from this chars string and assigns it to the code and then after that just returns the code okay now using this function we can call it here wherever we have our password so this is gonna be this like that five and we should have another session variable and we assign this generate code now let's do it ten here and here we have a session session and we can use it here T session like that alright we just do it in this way because the session from the date is needs to match with the session from the cookies all right let's save it let me go back and just this user we just kind of clean I'm gonna empty the table all right refresh it on time click log in with Google this is gonna redirect the controller now if I check the users table here we can see that there is a password generated and there's also session generated now if I check the if I check the cookies right click on the respect application no cookies from here and then I check the user ID just one session is why am3 why it starts with ye and ending in a table so it's working so she is working within the spine here let's continue now guys so if it didn't insert if there was any error we just thought it turned her inserting a certain user like this and there's another if statement like this else if it found any user in the database then we want to just set these cookies like this set cookies ID which is going to be in for in for Phi D this is data from here and the session it's going to be in session so we have info session like this this in case it found it there so found the user right there and then after that we want to redirect the user so I have header location index dot PHP like this and we want to exit the program and let's save it let's go back so in our case I'm not gonna remove this user and I leave it like that but I'm gonna go another refresh it one more time gonna go to index I'm gonna click on log in with Google now actually let me remove the cookies from here I'm gonna just omit down let's get rid of them look i'ma leave it open just to see it cookies so if I click on log in with Google it redirects me back to index dot PHP yeah we didn't even you didn't even see it but look at these cookies I've got cookies here I give one and the session and this is the idea one from here and the session from here you know why a starts with why a foreign staff starts with Y and ends in a double D so this is the session from the database again updated user didn't update anything it just grabbed session from the user ID and now if I delete this and if I remove the firm of the user actually let me just not remove the user I'm gonna change the email so there's some kind of random stuff and now if I click on log in with Google it's gonna redirect me to controller that PHP and it doesn't do anything though it's just because I didn't put the right direction here but it's actually creating a new user here if I see user ID t I get the same victor person and last name but the Ino is different and passwords open it and the session is also different it starts with v 1 and ends with one C so while actually move it's actually for some reason didn't want to insert my data here try it one more time but I'm going to check everything yeah so if not so it inserted so cookie so I'm gonna copy the stuff from here session time okay I'm gonna save it or I'm gonna leave this open I'm gonna try on more time log in with Google and we see that it it inserts actually didn't showed that time because we didn't it didn't refer to age it just insert it and they didn't throw anything on the page so okay so it's it's working we've got the idea three idea three the same data Victor email but emails and here we got different passwords and we've got a session which is why six and ends on 0 C so we have y 6 and 0 C so it's working fine dice okay this is this is a long video guys but I hope it's it's useful to you because oh there's a lot of information useful information Gary can use for your project and see what we have here now now we should out for the data so it should have a nuke statement in units of each people let's actually import the controller that HP for now so we have here chorus - controller that Clause dot PHP and in our index dot PHP okay so here we should create another function controller which is gonna check if the user is logged in we're not and but first of all in our container what will have a PHP tag like this and here we'll have an if statement just gonna check if if said if we have any cookie in the browser which is the ID and if we have another and is cookie the second one is the session then we want the output echo cookie detective else we want you output this form and logo like this so let's save it let's go back in is left each end and refresh it it says the cookie detected because we have cookies in the browser and if I delete this at least one of those by the day time and i refresh it's kind of show them all right now it's this is good but this is not enough to check if the users log they will want to check to see the user ID matches with the user ID from the database and the session as well so to do that you should create another function you know controller that PHP file so right below our cost control wherever we start our object we want to create another function which is gonna check if the user is logged in or not and we'll call this function we'll have function and name of these functions let me check user status we will have the ID as a parameter and the session and here we will select so how user actually DP you assign a new connection in a connection to the database we have user DB preparer and here we select the ID from users where ID is equal to ID and session sequel T session like this and then user execute this is going to be an array because we have we have two variables so here we have ID which is gonna be in pal ID from the parameter and then we have also session and this is gonna be the session all right we have it in this way and then lo here and how user info and website user attach so wanna fetch the data video object fetch sock and then below here we have an if statement if it's different than user it is different than user info ID then that means the user is not long and that means it didn't find any user we should remove this dollar sign for me it means they didn't find any users with the same ID and session database on this case we will return false yes we want to return true like this all right we're having some place on this this needs to be working now on select ID from users where okay ad section ok let's save it let's go back here throw in this lot beach people we already imported the controller that cause dot PHP now what we should do here is just assigning you a new object to the controller see web sign a new object controller to the controller variable and then from here we'll have another if statement if controller and function then check user status and we send they say cookie ID cookie ID and cookie session like this so if this is true if this function returns true then we want to echo it's a user logged in yells we want to see if it's true then we're gonna output out for that stuff if not then we will output something like and say yeah I can't find anything then just here like this I'm gonna save it let's go back and just refresh this page we don't have any earth log in with Google click on that so it's saying good user logged in because it found the user with the same ID and session but if I for example change the session and another G a DM and if i refresh it it's gonna say her because we still still have this sections but this case happens that means somebody starting to hack our app so just leave it error for now there's like a security measure okay next what we should do next now we've got these so now we should print the data to the screen as I think that should be the last time and also we should create a logout functionality so let's go back to our controller file controller that cause dot PHP and here we want to create another function which is going to be for print data so we have function print data and here is gonna be the I D print data is going to be user ID but we need the user ID THC to know which user we're trying to select from the database and then you have DBA sign a new connection to the database and then we can use the user variable and website this variable a using the database connection a prepared statement so we want to select everything from users table and we want to order it by ID like this and then user execute we want to execute this prepared statement and then here we'll have content content variable and Google assigned to this content variable a table this is a bootstrap table it's gonna have bootstrap classes and stuff like that so we have table class and this is gonna be table like this or below is gonna be tabled hat and this is gonna have class which is the head - light and then just kind of be like this this is gonna have a TR tag TR want it close here the table head alright and here in the TR will have columns this is a line TR is the line and then comes our th so have th scope call and this this is gonna be for the first name then we will have three more this is gonna be for the last name this is gonna be for the avatar and for the email all right here let's start the body table so we have table body like this and then below here we'll have we'll use the same content variable and we'll just concatenate and add to this content some other content if you see a dot equal is website more content to this variable and you will just close the table body and the actual table main tab and here we'll actually have an if statement which is gonna get user by user and output it in this statement so we'll have while user info user hatch peel and we have fetch sock like this if you have content and we want to concatenate these also have content like this and here I have TR a new line alright and I have columns so it's gonna have TD TD and this kind of hat is gonna all concatenative stuff here like this and here we'll have it's gonna be user info user info and here we'll have the first name so we'll have underscore name and we'll have three more like this this one is gonna be for the last name this one is gonna be a picture so we want to output our avatar so I have IMG source equal to this Alta party is gonna be avatar and we'll just close it like that and this is gonna be a it's going to be using in for avatar and the style you want to add styling she's gonna be marks max width of 50 pixels like this and the last one it's going to be email column all right Stan after we did that we want to return the content variable which has all these data so we save it okay we saved it let's copy the name of the function so what I get now now our inductor HP we want to call this function here which is going to output the user list from our database so have echo we're starting to think about how to so if we have returned here and we should use tackle okay so we have echo controller brain theta and here we want to send the cookie ID all right but this is going to be in pal I put in fault because this kind it's kind of filtering just and I was like a security measurement just to Secours make it integer 100% in file the ID so we save it let's go back let's refresh the page nothing is showing because we don't have any cookies like this yeah we don't have any cookies if I click log in with Google it's going to redirect the index but there's a problem stuff HP 19 stack with that content file function of a Miss policy in pal all right the first shirt there's another connect I misspelled prepared statement in controller prepare you guys probably saw it already okay so it's showing all the users from the database we have three users right now and showing personal lastname picture and the email so we see I was playing with these emails and out-out puts everything in the table now I want to create a local party so right here in the index dot PHP I'm gonna have another echo which is gonna say which is gonna be a link logout and this is gonna be a logout dot PHP file and whenever I will click on this logout link this file is gonna remove all the cookies from my browser so let's go ahead and create a new file logout dot PHP and let me see here we want to set cookie so first of all let's open PHP tag and I'll have set cookies ID and I wanna make it empty all right time it's gonna be when I remove the time so it's gonna be 60 60 24 and 30 and this is gonna be a path all right this is gonna be for the ID and the second one is gonna be for the session session and after that I want he hopes it's gonna be header location and it's gonna be index dot PHP I want to send user teen is that HP and I want to exit that program so it's gonna be died had their cookies idea just make sure she didn't misspell anything I'll save it go back refresh this and I have this logout button here if I click on it of course I'm gonna have an error because set cookies I should put this at the end so that guys it's kind of late and I'm so tired T so okay so it works click again log in with Google slugging me how will they stop logout and if I remove all these users I emptied the table you know I open it I don't have any user here I'm gonna click login with Google it's gonna create a new user in the database as you see here and it outputs all the data here so if I log out everything works fine all right let me see if I didn't miss anything else and get that stuff everything looks good here controller config alright guys that's it for this video if you have any questions feel free to leave them in the comments I understand this kind of it's a complex tutorial for a beginner it's so it's kind of long to warranty but I did my best to show you how this functionality works and how to build it and so yes if you have any questions feel free to leave them in the comments I will do my best to help you thank you for your attention if you liked the video thumbs up subscribe for my channel and I'll see you guys in the next tutorials

Channel: Vicode Media

Views: 11,935

Keywords: login with google, video, tutorial, google api, google login, oauth, api, php, oauth2, login with google php, php tutorial, google sign in, google oauth, gmail login, gmail sign in, php login system, php login tutorial, google client, web development, login, google, php login, bootstrap design, howto

Id: M4jde7THXAI

Length: 95min 42sec (5742 seconds)

Published: Sun Apr 12 2020