Up next in 10
Buy the full source code of application here:
https://buy.stripe.com/fZe2bs0gNaoUgQ8bRb
Show More Show Less View Video Transcript
0:03
Hello friends, my name is Goautam and in
0:05
this tutorial we will be uh building a
0:08
Google signin uh system. So basically in
0:11
this tutorial I will be integrating
0:13
Google signin into your website. I will
0:15
be guiding you guys about how you can uh
0:18
integrate Google signin. So as you can
0:20
see here we will be building this much
0:22
of stuff. A button will be there of
0:25
Google signin. So as you can see here uh
0:28
currently this button says that sign in
0:32
and this is a Google button. So if I
0:34
click it a pop-up window will appear to
0:36
me just asking for the permission of
0:39
selecting accounts. So if I click it
0:42
sign in so you can see here signin
0:45
window is generated of Google and it is
0:47
asking me the different accounts that I
0:50
have of Google which account to select.
0:52
So let me select this first account and
0:55
enter my password.
1:00
And after entering my password, I just
1:02
click on next. And uh it successfully
1:06
signed in. I have success successfully
1:09
logged in. As you can see here, I am
1:11
redirected to a new page say saying just
1:14
uh my profile picture is there and my
1:17
email address is shown to me. So this
1:20
much of functionality we will be
1:21
building and through this course of
1:23
tutorial you will get to know about how
1:25
you can use the Google au authentication
1:28
system and how you can implement it. So
1:32
there is a option of sign out also. So
1:35
if I click it sign out so you can see
1:37
here it is saying to me that you have
1:39
been successfully s signed out. If I
1:41
click to okay then I redirected to a new
1:45
page or the previous page saying to me I
1:48
am still signed in. So this is really
1:50
important because I am running it on the
1:53
local host that is this local host exam
1:56
server. So this does not allow me to
1:58
sign out. This allow me to log
2:01
successfully logged in but this local
2:03
host doesn't allow me to sign
2:06
successfully signed out. So in order to
2:08
explicitly sign out from my Gmail
2:11
account, I really go to my Gmail and
2:14
then go and then click on sign out. So
2:19
this is a disadvantage of using local
2:22
host. So if you want to implement this
2:25
sign out function functionality also
2:27
then you want to implement it on a real
2:29
server. So here also I just want to just
2:32
click sign out and then you can see here
2:36
I am successfully signed out. So if I
2:39
click once again so it is asking me to
2:42
sign in. So this much of functionality
2:44
we will be building in this tutorial. So
2:46
let's start. So first of all to create
2:48
this functionality we need to create the
2:53
uh a client ID
2:57
and in order to create a client ID you
2:59
just have to go to Google developers
3:02
console. So just click this and go to
3:06
the Google API console.
3:09
So I am signed out. So just I want to
3:12
sign in. First of all, you have to be
3:15
having a active Google account for
3:17
creating client ID and you will be
3:20
redirected to this website uh API
3:23
console. So from there you can create or
3:27
you can select a project or you can
3:29
create a new project. So let me create a
3:32
new project by just uh clicking this
3:36
plus icon of create project.
3:40
So let me name my project as uh
3:46
sign in app and let me create it. So I
3:51
my project is creating. So just wait for
3:57
5 seconds or 10 seconds.
4:04
So your project has been created. So
4:06
just click this project and
4:10
go to the credentials
4:14
here in the left arrow and just click
4:18
this and for this we doesn't need the
4:21
API key. We need the O o client ID. So
4:25
just click the second option and uh
4:29
in the
4:32
it is asking me to first of all
4:36
uh set a product name on the consent
4:38
screen. So first of all configure
4:40
consent screen. So just go to this and
4:43
select a appropriate product name. So
4:45
just uh
4:47
give the same
4:50
product name which I gave to my project
4:52
that is signin app and then you just
4:55
have to
4:58
save this. So it is saving.
5:02
So now it is showing to me that what
5:04
what is the application type? It is a
5:06
web application Android, Chrome app,
5:08
iOS, PlayStation 4 or other. So in my
5:11
case it is a web application. So just
5:13
select this web application and you just
5:17
have to provide one URL there authorized
5:20
javascript origins. So if you are using
5:23
localhost so just type http
5:26
colon//lohost
5:30
or if you are using a real server then
5:33
provide the URL there and after that
5:38
just create.
5:41
So after clicking create you can have
5:44
your client ID. So this is your client
5:46
ID and this is your client secret. So in
5:49
our case we just need the client ID. So
5:51
just here copy this.
5:54
You have successfully copied your client
5:56
ID. So just make sure that you have your
5:58
client ID. We will be using it. So I
6:02
have just back go back to the editor. I
6:04
have created two files index.html and
6:06
script.js. So index.html HTML will be
6:09
holding the design part and script.js
6:11
will be holding the scripting part. So
6:14
first of all just create the struct
6:21
type HTML
6:23
HTML
6:26
head.
6:28
Let me give a title of uh
6:32
Google signin
6:36
and uh you have to paste this client ID.
6:40
So how you can do that? Let me just copy
6:43
paste the code here.
6:50
Let me click add Google sign. Let me go.
6:54
So in order to add your client ID, so
6:58
you can see here specify your app's
7:00
client ID. So this is the meta tag you
7:02
need to copy here.
7:04
So just copy this meta tag and there you
7:07
can see here you can you copy paste the
7:10
client ID here in the red box. So I will
7:13
just copy the meta tag. So just delete
7:17
this part
7:20
and copy paste the client ID that you
7:22
have copied. So let me again copy this
7:26
my client ID
7:29
copy
7:32
and I will paste it in the content. So
7:35
my client ID is ready. So after that I
7:39
will be have to loading the
7:43
what we call
7:46
just wait
7:50
we have to load the Google platform
7:52
library. So this is very important
7:54
because we are using the Google signin
7:57
method. So just copy this script also.
8:00
Copy paste.
8:04
Copy
8:07
and paste. So this is my script that is
8:11
the Google script that you will need in
8:13
order to integrate the Google sign in.
8:15
So after that we will also need some
8:17
jQuery. So just quickly go to Google and
8:21
uh
8:23
jQuery
8:25
just write and in w3schools.com you will
8:28
get a CDN.
8:31
So just copy this CDN
8:37
and paste.
8:39
So let me link my external file that is
8:42
of script.js js
8:48
and in this file we will also need some
8:50
bootstrap. So just go to bootstrap also
8:53
and copy the CDN of it. Bootstrap
8:58
this is we just need the CSS file of
9:01
Bootstrap.
9:06
Copy paste
9:10
soil.
9:16
So all the things are there. Bootstrap
9:18
is also there. We have successfully
9:20
loaded the client ID and Google platform
9:23
library is also loaded and we also got
9:25
the jQuery and the external script. So
9:28
we have done the head portion. So let me
9:30
come to the body portion. So in the body
9:33
first of all we have the button of
9:38
Google sign in. So it takes the class of
9:41
G sign in
9:43
two. So this is a Google button. So it
9:46
is uh already made for us. We do not
9:49
have to make made this button. So this
9:52
is a Google class of G sign into and
9:55
there is a attribute of data
10:00
on success. So if I click this button
10:03
this function will execute it is on sign
10:07
in.
10:09
So this function I will write in my
10:11
script file. So just close this div
10:14
button div section and we just need to
10:18
style this somewhat so it appears in the
10:22
middle of the screen. So let me open a
10:25
style tag and target this class that is
10:28
g sin n2
10:33
and let me style it. Let me give a
10:36
margin of from left to 500 pixel and a
10:41
margin from top
10:45
to 200 pixel.
10:48
And let me save this file and show to
10:52
you what we have got here. Let me go to
10:55
the URL that is localhost
11:01
Google sign in
11:04
index dot
11:08
html.
11:10
So as you can see here we have just made
11:14
a button here of sign in which is
11:16
appearing in the center of the screen.
11:18
So if I click this button you can see
11:20
here a pop-up window is generated and
11:23
asking me to to select the account. So
11:26
let me just uh write this function of on
11:30
sign in which will be executed if I
11:34
click this button. So before that I just
11:37
need to make another div tag
11:40
which will be holding the data once we
11:43
are successfully logged in. So in that
11:46
div tag we have the profile details of
11:48
the user
11:50
profile details. So this is a paragraph
11:54
and a image will be s there. So
11:58
let me provide a id of tick
12:02
and a class bootstrap class of image
12:06
circle.
12:09
Let me provide a width of uh 100 pixel
12:14
and a height also
12:17
100 pixel
12:19
and I close this image tag.
12:22
After that I will be having another tag
12:25
of holding
12:29
email address.
12:33
So let me provide
12:36
email address.
12:38
a id that is email. So this paragraph
12:43
tag will be holding the email for us. So
12:45
let me provide a bootstrap class of
12:48
alert
12:49
alert
12:52
danger
12:55
and uh just close this. So we will be
12:59
dynamically loading the uh pro this
13:03
profile pick and the email address of
13:05
the logged in user in these tags when I
13:09
write my jQ script.js file. So in last
13:12
but not least we have a button of sign
13:15
out. So let me bind event listener of on
13:18
click.
13:20
So when this button will be clicked this
13:23
sign out button will be the sign out
13:25
function will be executed
13:28
and let me provide a class of button
13:31
button danger
13:35
sign out.
13:37
So let me save this and view it on my
13:41
browser. So as you can see here first of
13:44
all the page is loaded. These two things
13:46
are showing up. So we don't want the we
13:50
don't want this. We only want this
13:52
signin button to show. We don't want
13:53
these profile details and email address
13:56
to so show once the page is loaded first
13:59
of all. So for fixing this we just have
14:02
to target this uh class of data
14:06
and we just change the display property
14:08
to none. So so first of all the page is
14:12
loaded. These profile details and email
14:15
address will not be shown. So let me
14:16
refresh this. So as you can see here
14:18
only the Google signin button is
14:20
showing.
14:22
So this completes our
14:27
uh index html page. So let me move on to
14:29
my script.js file. So first of all I
14:33
will be writing my function
14:37
when the signin button is clicked. So
14:40
let me write function
14:42
on
14:45
sign in and it take the Google user as
14:49
an argument.
14:52
So this is the function I am writing.
14:54
This is a button. So let me show you
14:58
data on success on sign in. So I am
15:02
writing this function on sign in and it
15:04
takes the Google user as a argument. So
15:07
this you have to write. After that we
15:11
create a variable of profile and we
15:14
fetch the profile details of the user by
15:17
this method get basic profile
15:24
and in this variable we have fetched
15:27
successfully the profile details of the
15:30
logged in user. So after that we just
15:33
need to uh take help of jQuery and
15:37
target the
15:39
Google button that is G sign into
15:44
and let me change
15:46
the CSS property of display
15:50
to none because we we have to hide the
15:55
button if the user is successfully
15:57
signed in that is the sign in button. So
16:00
we change the display property to none.
16:03
So after that we need to make sure that
16:06
the data is visible to us. So for that
16:08
we are targeting the data class here
16:11
that is which will be holding the
16:12
profile details for us. So we need to
16:15
change the display property
16:22
from none to block
16:26
because we previously have set this
16:28
property to none. So if the if the user
16:32
has successfully signed in we are
16:34
changing this property to block. And uh
16:37
after this
16:39
we are targeting the
16:41
profile picture which we have provided a
16:43
id of pick and let me provide a source
16:47
attribute to it. So it will be having a
16:50
image. So let me target the source
16:53
attribute and uh the
16:57
we get the image URL by this method
16:59
profile dot. So profile is the variable
17:02
and there is a method where get image
17:07
URL. So this will be fetching the URL of
17:10
the logged in user and it will be
17:12
attached to this image. So last but not
17:16
least, we are targeting the email
17:19
address.
17:20
So let me provide a text property to
17:24
this. So it will be dynamically
17:25
generating this text that is profile
17:28
dot. So let me just eliminate this
17:31
double quotes. Profile dot in order to
17:35
get the email we have a get email method
17:38
get email.
17:41
So we have successfully written the
17:43
whole code here. First of all we are
17:45
just
17:46
uh hiding the button Google signin
17:48
button and then we are loading the
17:50
profile details by the these methods
17:52
that is get image URL and get email and
17:55
let me save this for you here.
17:59
and refresh. So if I click sign in here
18:03
and let me choose my account as Geeky
18:06
Gotham. So as I already have signed in
18:09
so you can see here my profile details
18:11
are coming that is this is the picture
18:13
and this is the email address. So let me
18:16
just again
18:18
log out for clarification. So
18:24
let me just sign out first and show to
18:28
you how it is looking like. So you can
18:30
see here I am not signed it. So if I
18:34
click this sign in button this prompt is
18:36
generated. So if I click this account
18:38
and enter my password
18:42
and click next.
18:44
You can see here the code is working
18:47
profile details email address.
18:51
So the code is the thing is remaining
18:54
right now is that we need to write some
18:56
code for this sign on sign out button.
18:59
So let me write a function quickly sign
19:02
function sign out.
19:07
So for that let me create a variable of
19:11
O2
19:13
and G API. This is Google API
19:18
2 dot get
19:21
O
19:23
instance
19:26
O2
19:29
dot sign out method. So this is a sign
19:31
out method. So if this method executes
19:34
then it returns a function.
19:41
So in that function we can write
19:43
anything. Let me write a alert box that
19:47
is
19:49
you have been
19:51
successfully
19:54
signed out
19:57
and let me
20:01
change the display property of uh the
20:05
Google signin button from none to block.
20:09
So let me copy paste the code and change
20:12
this property to block.
20:16
And let me just hide the data property
20:21
from block to none.
20:26
So this completes my sign sign out
20:28
function also. So let me just refresh
20:29
it. So if I click sign out, you can see
20:32
here you have been successfully signed
20:34
out. So if I click okay, you can see
20:37
here I am redirected to my homepage that
20:39
is index.html.
20:41
But there you can see here I am still
20:43
signed in because local host is not
20:46
allowed to sign out successfully. So if
20:48
if you are running on a real server you
20:50
will be having this functionality also.
20:53
So thank you guys for watching this
20:55
video. We have in this video we have
20:57
successfully implementing the Google
20:59
signin method. So if you like this video
21:02
please like it and don't forget to
21:04
subscribe to our channel for more videos
21:06
like this and I will be seeing you in
21:07
the next tutorial. Until then thank you
21:09
very much.