Up next in 10
Buy the full source code of application here
https://buy.stripe.com/14kg2ie7DbsYeI09Fe
Show More Show Less View Video Transcript
0:00
Welcome to coding six. Today in this
0:01
tutorial I will be telling you that how
0:03
to uh implement Google authentication in
0:06
angular. So this is a demo application.
0:09
You can see that if I refresh it. So
0:12
there will be two buttons sign in with
0:14
Google and you can also sign out of your
0:18
Google account. So if I just click this
0:20
first button a pop-up window will
0:23
generate.
0:25
So if I click this button here, you can
0:27
see that a window has generated. This is
0:31
containing all my accounts here. So if I
0:32
select this account and then this will
0:35
prompt me to enter the password. So I
0:39
can just select my account password and
0:42
click next. So then it will be
0:44
displaying the profile picture and the
0:46
email address of the account. So you can
0:49
see that also in the console we are
0:53
getting a message here. If I drag down
0:56
you can see that social user ID name
0:59
email is photo URL is also fetched. If I
1:02
close it and you can see that the photo
1:05
the username of the account and the
1:07
email address. So all these details are
1:09
printed out and there is also a option
1:12
to sign out. So if I click this you have
1:14
successfully signed out and the details
1:16
are gone. But uh in order to explicitly
1:20
sign out, you just have to go to Gmail
1:22
and then you need to click on the sign
1:24
out button. You can see that.
1:27
So this is a short little application
1:29
that we will be building. So for
1:31
building angular applications I'm using
1:33
a online tool called as code sandbox.io.
1:37
It is kind of a integrated development
1:40
environment which is present online to
1:42
make angular applications. So if you go
1:44
to Google
1:47
and type here code sandbox
1:52
the first result which comes in you just
1:54
need to click it and uh there is also a
1:57
option available to create a sandbox
2:00
once you create account on that. So you
2:03
should have a GitHub account in order to
2:05
log in in in their website. After login
2:09
it just create a sandbox and create just
2:12
choose your language. So in this we will
2:13
choose angular. So on this website you
2:16
can also create view applications, react
2:18
applications
2:20
and for building this application we
2:22
need a dependency. So adding dependency
2:25
from code sandbox is very easy. There is
2:28
a button available by which you can see
2:30
that add dependency. So we will be
2:34
searching for angular 4 social login.
2:46
Let me just uh search for the dependency
2:49
which is Angular 4 social login.
2:57
Angular 4.
3:05
Angular 4. There is no dash. Angular 4
3:08
dash social login.
3:16
You can see that this is a dependency.
3:18
So you just have to click it and
3:21
instantly it will download for you and
3:24
install. In the background you will see
3:26
that forked sandbox. You can see that.
3:29
So it is compiling and transpiring the
3:32
modules which was present inside it.
3:36
So we need to do it again. So just go to
3:40
the project and once again download
3:42
this.
3:49
So once you load it so you will be
3:53
have to add dependency. So just drag
3:55
down.
4:03
So just drag down and uh add dependency.
4:06
So here we will write angular 4 social
4:09
login.
4:15
So this is a dependency. So just click
4:17
it once and it will be.
4:23
So you can see that it has successfully
4:25
forked the sandbox and it is in the
4:28
background. It is compiling. So now
4:30
after that we just need to go into the
4:33
app folder and go to the app
4:36
do.component
4:37
HTML file.
4:40
So let me just have some space. So just
4:43
delete all this. And now we will be
4:45
having a simple
4:48
two buttons which will allow us to sign
4:50
in and sign out.
4:52
So the first thing that we will be
4:54
having is a paragraph.
4:57
So inside this paragraph we will be
4:58
populating the title.
5:01
In the two curly brackets we will write
5:03
title.
5:05
So this title will come from the app
5:07
do.component file. So you can see that
5:09
it is populated this title code sandbox.
5:11
So we can just change that title later
5:13
on. After that we will be having
5:17
a button
5:20
button
5:22
which will be having a click listener.
5:24
So click is equal to we will execute
5:27
this method that is uh sign in
5:32
and we will pass a argument to it which
5:34
is Google. In this case we are
5:35
implementing Google sign in
5:39
and the label of the button will be sign
5:41
in.
5:45
with Google.
5:51
[snorts] So after this we will be having
5:53
two break tags
5:55
and then we will be having another
5:57
button.
6:02
So this time this button will be used to
6:04
sign out the user.
6:08
So this will be sign out.
6:14
So the label on the button will be sign
6:16
out.
6:22
Again we will be having two break tags
6:26
and then we will be displaying the user
6:28
detail in this div.
6:33
So I will be having a ng if directive.
6:37
So just write star ng if.
6:43
So this is capital ng if
6:47
is equal to user.
6:52
So if condition is is good then we need
6:55
to display the image. First of all by
6:57
the syntax
6:59
in the double curly brackets we will
7:03
write user dot photo URL
7:13
and after displaying the image we will
7:15
be having the email address
7:18
first of all the username so user name
7:25
and then we will displaying the email
7:28
address. So, user email.
7:34
So, the app do component is complete.
7:36
You can see that. So, now we will be
7:38
moving on to the app domodule.ts file.
7:45
So, we also want to delete all this here
7:49
and start from scratch. So the first
7:52
thing that we need to import is the
7:54
browser module
7:59
from Angular.
8:04
at the rate angular platform
8:19
platform browser.
8:23
This is the dependency. So after this we
8:27
need to import ngmodule
8:32
for the if condition that we have made
8:34
in the HTML file. So this also comes
8:38
from add the rate angular
8:42
core.
8:45
So after this
8:48
we will import some things here. Import.
8:52
So the first thing will be social login
8:55
module
8:58
comma o service
9:03
config comma Google login provider
9:10
and this dependency comes from this. So
9:13
right here in the same line let me write
9:16
from
9:21
so this is the dependency that we have
9:23
downloaded angular 4 social login that's
9:27
it
9:30
and last but not least we will also have
9:32
in this dependency which is app
9:35
component
9:40
from
9:44
app component. That's it. So all the
9:47
dependency are there now. So now we just
9:49
need to have a client ID
9:53
for the Google login.
9:56
So for the client ID you just need to go
9:58
to Google developer console and then you
10:01
need to create a project.
10:04
So let me just guide you how to do that.
10:06
So go to credentials and uh then go to
10:10
oath client ID
10:21
just select this option over client ID.
10:23
Let me just go to it by Google. So just
10:27
write Google developer console.
10:31
The first result which comes in just
10:33
click it.
10:37
I have already created some projects
10:39
here. So after creating it go to
10:42
credentials and uh
10:46
then click on create credentials and
10:49
then client ID. So this will be a web
10:52
application. So select this
10:55
and for the authorized JavaScript
10:57
origins you need to select the
11:01
full address here. Copy it. So your
11:04
address will be different. So
11:07
just paste it here and just
11:12
remove this slash here and enter.
11:17
And this is the authorized redirect URI.
11:20
So just paste it the same thing.
11:26
And after this create.
11:29
So this will give you the client ID and
11:32
client secret. So we only need the
11:33
client ID. So just copy it.
11:38
So after this we need to use this client
11:41
ID.
11:43
But before that we need to create a
11:45
variable con
11:47
Google oath
11:51
client ID.
11:54
This will be a string. So just
11:59
is equal to and then you need to paste
12:01
it.
12:05
So then after that we need to just
12:06
configure it
12:09
in your object.
12:11
So this will be let me name it as config
12:17
and this will be a new o
12:22
service config.
12:25
So this takes a array
12:29
and this contains a object here. So
12:31
double curly brackets right. So first
12:33
property it takes is ID. So this will be
12:37
a constant which is Google login
12:38
provider
12:40
dot provider ID.
12:44
And the second property it takes is the
12:46
provider property.
12:50
And this is a new instance of uh Google
12:54
login provider. And in the parenthesis,
12:56
we just need to pass our Google O client
12:59
ID. That's it.
13:03
So after configuring this, we need to
13:06
write some more code. So we need to
13:09
initialize the ng module
13:14
by this. So this takes double curly
13:16
brackets. In in this we need to write
13:18
declare actions.
13:20
So this takes
13:22
a array. So in this we just need to
13:24
initialize app component
13:32
and also we need to put a comma here.
13:35
The second property it takes is imports.
13:40
So in the import property we just need
13:42
to include some more dependency which we
13:45
have
13:47
there in the
13:49
main.ts file. So browser
13:53
all this stuff. So just write here in
13:55
the imports
13:56
browser module
14:00
comma the second is the social
14:04
login module dot initialize
14:09
and we need to pass the config object
14:11
that we have created earlier on. You'll
14:14
see that
14:18
so this array is complete. So put a
14:20
comma
14:22
and third property it takes is
14:23
providers. So this will be a empty array
14:27
and the fourth property it takes is
14:28
bootstrap.
14:30
This will also be a array which is app
14:33
component.
14:36
That's it. So now lastly we just need to
14:39
export the class. Export class app
14:42
module.
14:49
That's it.
14:55
So now we need to go to the
15:00
this file that is app component.main.ts.
15:13
It is there in the app folder. So app
15:15
component.ts file. So just go to this
15:17
file.
15:19
And we need to write some code here. So
15:22
the first thing will be the same. We
15:24
need to import the component.
15:26
And the second thing we need to write
15:28
here import
15:31
O service,
15:39
Google
15:41
login provider.
15:47
We need to import it from angular for
15:50
social login.
15:52
That's it. So in the component we need
15:55
to
15:57
these things remain same that is
15:58
selector template URL and style URL. All
16:03
and now we just need to write some code
16:05
in the app components and we can just
16:08
change the title to let's suppose
16:11
sign in with Google something like this.
16:15
If I make change, you can see that it is
16:17
reflected here.
16:20
So after the title, we can define the
16:22
user to this
16:25
any
16:27
semicolon. So after defining the user,
16:30
we need to have a constructor.
16:33
So this will be private
16:39
social
16:43
or ser
16:46
after that just write o service.
16:50
This will be
16:52
contain the empty set of curly brackets.
16:55
So after defining the constructor we
16:57
will be defining the method to actually
17:01
sign in with Google.
17:07
So in this
17:09
we will be defining the method that we
17:10
have defined in the app.component html.
17:13
So whenever we click the button we are
17:15
executing this function that is sign in.
17:20
So sign in. So this takes a Google a
17:24
platform string argument that we are
17:26
passing in the form of Google.
17:28
So this will be a string
17:31
and then we need to write colon
17:34
void
17:37
and to define the function we will be
17:41
having a set of curly brackets.
17:44
So first we will be having the platform.
17:49
This will be Google login provider dot
17:51
provider id.
17:58
So semicolon
18:00
after this we will write here this dot
18:03
socials
18:06
dot sign in. So inside parenthesis we
18:10
will pass the platform
18:14
and this returns a promise. We need to
18:16
handle this promise by having a then
18:18
block dot den.
18:20
So inside this it returns a response to
18:23
us.
18:25
So after this we will be having a arrow
18:28
function.
18:34
So inside this we will console log
18:39
the actual platform. So in this case the
18:42
platform is Google. And then we will
18:45
concatenate the
18:48
that is uh
18:51
logged in user data is
18:55
is equal to
18:58
and then we just concatenate the
19:01
response which is coming back from the
19:03
library.
19:09
And then after this we will just write
19:11
this dot user is equal to response.
19:17
So our function is complete here.
19:23
So we just need to write here semicolon
19:26
or parenthesis semicolon.
19:43
So in this let me see what is sign in
19:46
platform 10 response.
19:55
Sorry we need to have
20:02
just delete it from here and put a
20:06
parentheses and a semicolon. That's it.
20:09
So now the sign in method is complete.
20:13
So now we just be having our sign out
20:15
method. So just after you define the
20:18
sign in just define the sign out method
20:20
also to let the user sign out of their
20:24
account.
20:27
So this will be a simple function sign
20:29
out.
20:34
So in the app.component html we have
20:37
binded this method. So whenever the user
20:40
click this button this function will
20:42
execute.
20:47
So column
20:49
this will be a void function. So it will
20:52
not return anything. So in the
20:53
parenthesis we will call this this dot
20:57
social or sero.
21:00
So this contains a method which is sign
21:02
out.
21:04
So just call this
21:08
and semicolon
21:10
and after executing it we can just
21:12
console lock
21:15
that is user signed out.
21:21
So the application is complete. So now
21:23
if I refresh it or I can just do copy
21:26
the URL and
21:29
open it in the browser.
21:36
So now you can see that this is the
21:37
application. If I click sign on with
21:39
Google,
21:41
so you will see that
21:44
both the things three things are
21:45
displaying profile, picture, username
21:47
and email address. I can even sign out.
21:54
And if I inspect element,
21:58
you will see in the console also
22:03
the data has been received here.
22:08
You can see that Google logged in user
22:10
data is inside this JSON response. The
22:14
email address, ID, name, photo, URL is
22:17
all been received.
22:19
So thanks very much guys for watching
22:21
this video. Please like this video and
22:24
also don't forget to subscribe the
22:26
channel and I will be seeing you in the
22:28
next video. Until then thank you very
22:30
much.