Login With Google Account Using PHP & Client API & Bootstrap Design

in this video you will learn how to add Google login functionality to your login page so stay with me hey what's up guys Senaid here from codingpassiveincome.com the place where I help others to become a web developer much easier and faster than they will do it on they own so if that something that interests you consider subscribing so before you start writing any code I want to show you and explain the basics that you need to understand for this tutorial so let's see at the moment you have one login page like this and there's some email some password and some login button and also you have some index.PHP file and you want that this file is only accessible for the people who are logged in so now at the moment people can login to this page only if they have valid account data but we also want to enable those people to sign in with the Google account so what you are going to do we will just add one button here log in with Google and once someone press this button we will redirect the person to the Google so let's say this is Google and now on the Google they will have to accept the permissions that we are asking for and once they accept Google will redirect them to the one page that we are going to call Google callback page and now the key things will happen inside this page we are going to check all the details from the Google and if the user has given all the permissions and all the data that we are looking for we will redirect him to the index.PHP and if he is not we will just redirect back to the login page so now as you can see you will have two options to login directly from from the login page with the data from the database and also from the google so this may seem a little bit complicated but actually the code is very simple so let me show you how to do it so now I'm here at my PHP store I have created a new project and also 5 empty files that you are going to need for this tutorial so first thing that I'm going to do is to design the basic login page so I will just quickly do like this I'm going to change title to the login and now I'm going to use a bootstrap so I'm going to download bootstrap library from the getbootstrap.comI will just use CDN version I will just copy and I'm going to paste just before closing head tag so now inside body I'm going to have one container and for this container I will set margin top to the 100 pixels inside the container I'm going to have one row and in that row I'm going to justify content to the center and inside the rope I'm just going to have one column with md-6 and I will set off set to three and also I'm going to align everything to the center so now inside this column I will just include my logo PNG file make two braids and I'm going to create one simple form so here I'm not going to specify anything because we are not going to create that so discreet inputs let's I will have one with placeholder email I will set name to the email and I'm going to see the class will be form-control okay and I will duplicate this I will change the password change placeholder to the password and let's see it should be placeholder and I'm going to specify the type as password and that's it after that I'm going to add one button so see input type submit I will see value load and let's set some class for example to the button and button primary and of course I'm going to have another button I will set button danger and here I will say loaded with and maybe I should change the tag to the but so let's now see this design and here we go so it's very simple and nice design and as you can see this button doesn't work at the moment so in order to make a long amid Google the first thing that we need to do is to download Google API library so here is the link and also for the for those of you that are watching this on youtube or my website you can find the link in the description below I mean all the links from this tutorial so let's click here on the latest one and we'll just save to the whole project folder it's don't order I will extract editing delete the archive and also going to rename this to the Google API - so it's much easier for me to use it and now we first need to create a config file for our client so shall see here first we need to start a session and after that I'm going to require from the Google API you need to go to the vendor and then autoload.PHP So I will say render out dot PHP and now I will just create one variable let's say we'll find equal new Google client and now for this client we need to specify client ID and we need to specify client secret okay and now as you can see we do not have those two and in order to get those we need to create a new on the Google so I'm going here to the console.developers at Google Talk Google calm focus - API /library and after that I'm going here to create a new project so he two plus so let's say this will be C behind volume have a fit create and after that I'm going to hit first we need to wait here as you can see now it is created and now I will go to the Google+ API and I'm going to hit enable ok and after that I will go to the credentials hit create credentials and after I go to the go out client ID so now we need first to configure I will say here CPI login other things are just optionals like logo homepage URL etc etc I will just leave it as an empty but you can modify it I will choose application type as web application and here for the name I will say CPI logo and for the authorized redirect URLs I will say he it will be just my local host Google login folder and maybe I will just set and also the name of the file that we are going to use for this tutorial but it's an option okay and I will hit create and that's it now we have our client ID and client secret and we need to copy those to our code okay and here's the secret that's it after that once we have all those things I'm just going to set application name so CCP Iowa Toria and I'm going to set resurrect so my red red one second is localhost Google login and g-callback.php and the last thing to setup is google client back is to add the scopes which means the permissions that we will ask a person to accept in order to get all the informations that we need from that profile so I'll say here drink wine add scope and now I'm going to show you where you can find those scopes so here's the link and once you open it you can read here about authorization scopes and learn more about it but the ones that we are looking for are plus.loading and down here we also have user info dot email so see here this and then I will hit space and we'll just edited this to the user info info.email and that's it now once you have set up our Google client we need to go again to the login page and now I'm going at the top to get the authorization URL from the Google shall see he require once config.PHP and they'll say here URL equal G client create authorization URL okay and now I'm going to set on click method to our login with Google button so I'll say use java cript here and just a window that location equal and from the PHP I will just echo the login URL okay and now let's make a test so I'll just refresh I with it log in with Google and as you can see here now it is asking me to choose an account because I have multiple so I'll choose this one and after that it asks me for the permissions that we have been asking for so does say allow and now I have been redirected to the Google callback.PHP and as you can see here there is some code and there is out in case user session etc etc so now we need to create this Google callback.PHP file and get this code so now how does go here I will say again we will need config.PHP and here I will say if isset get code I will create a new token and say token=gclient fetch access token with authorization code and authorization code is the code that you have seen in the URL and after that I'm going to store this you know we created token to the session so I'll just say access token and the value will be our token and that's it and down below we know that the person has been authorization and now we need to just get the data from this person so I can see I will create a new variable and say gclient new google service Oauth2 and we need to specify the Google time so just pass it and now here as I use a data I will say info_v2_me and I will say get and after that let's just print to the screen so I can see what we have this is going to be an array I will just use var_dump my preferred function and let's try to refresh and here we go and now as you can see I have associative array and I have multiple keys and some of them are email which is my email family name gender given name ID Google+ link name picture all those cool things so let's use those information and store them to the session or maybe even if you need it inside your database you can save it too or you can do whatever you want but in this tutorial we'll just save to the session so let's say like this will be userndata, email so I will duplicate this so there is a gender okay there is a picture and then there is family name and there is I don't remember let's see there is given name okay see given name and that's it so now once you have all those data we should redirect the person to our index.PHP file so it does say location index.PHP and I just love to say that each time after the header function I will say exit even if there isn't any other code but this is just my practice the cool thing will be if someone opened this page and there is already a session we should just get it shall see here if isset(session ['access token']) we can say that google client they'll set access token from session so how does it like this and maybe I should move this up here and here I will say if there isn't access token they all just get it from the code and maybe if there isn't session access token if there isn't gate code we will just say else and I'm going to just to move a person to the login.PHP so this is just one way of implementation of this and this should work just fine let's make a test so refresh and as you can see I have been redirected to the index.PHP but this is an empty because you don't have any code so I'll go to the index.PHP and let's say Oh dust copy this okay you know modify this part here but he will delete it and that's it so let's say I will have one column with three and I will have another column with nine okay inside this first we will have one image okay which is a picture of the person and inside here we are going to have one table so I will say class you'll be table table-hover and table-bordered and so what I'm going to create inside the table so let's say we'll have two columns in each row first column will be let's say our key and the second one will be the value so I will just we can use PHP but it's not necessary so let's say like this and here for example I will say ID I'm not even sure did we save it no we didn't so let's say I'm not going to show my ID or we can even do it it is just not that much important let's say I'll save it okay ID and I'm just going to duplicate those so email gender and two more and does going to delete thoose move here I'll say PHP echo session so I'm going to have ID first name last name email and gender so here I will say this is our given name this is ID this is family name email and finally gender okay so just let me copy this and here I will say session picture I'm not even sure did we save it yes we did okay and at the top all we need to do is to start a session and check if if not isset session access token it means that the person is not authorized and we will just redirect him to the login.PHP okay and maybe we can copy this to the login.PHP because if the person is authorized we need to redirect him to the index.PHP okay cool and the last thing is of course log out log out should be pretty simple so see he required once config and I will say he unset unset session access token okay I'm going to use gclinet to revoke token I will destroy all others and I'm going - to redirect to the login.PHP okay let's make a test so now if we first open all about all session will be deleted and we will be redirected to the login.PHP and now let's try to login I've been redirected here and as you can see here there's my picture and there are some ID first name last name email gender etc so it is not the best design but it's something that does work maybe I will just will be doing this so let's see what will happen now maybe we didn't cause something let's see it just make a picture a little bit small so maybe c.width and let's say 50% and here we go maybe even a little bit bigger maybe 80 and that's it so now this is looking really nice we have a table with the informations from the Google profile there is a picture and of course from now on you can do whatever you want with this information so guys I hope that this is very simple and extremely useful tutorial and if you have any questions please ask in the comments below and also if you enjoyed this video tutorial please like it and share with your friends take care

Channel: Coding Passive Income

Views: 95,683

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: hazMyK_cnzk

Length: 25min 34sec (1534 seconds)

Published: Wed Aug 30 2017