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
Không có nhận xét nào:
Đăng nhận xét