WEBVTT

00:00.640 --> 00:02.399
uh hello guys welcome to this video so

00:02.399 --> 00:04.880
in this video I will show you uh how to

00:04.880 --> 00:07.160
implement One Tap authentication of

00:07.160 --> 00:10.240
Google inside angular application so on

00:10.240 --> 00:12.440
your screen right here we have having

00:12.440 --> 00:14.080
this on the right hand corner of the

00:14.080 --> 00:17.240
screen we have this Google login screen

00:17.240 --> 00:18.720
appearing

00:18.720 --> 00:21.519
and we see the currently logged in

00:21.519 --> 00:25.439
account so you can click this button as

00:25.439 --> 00:27.679
soon as you click the button right here

00:27.679 --> 00:29.439
the authentication will happen and you

00:29.439 --> 00:32.640
will see the profile details of the user

00:32.640 --> 00:34.399
which is the profile picture username

00:34.399 --> 00:38.719
and email address so there is a specific

00:38.719 --> 00:41.039
package which allows you to do this one

00:41.039 --> 00:44.399
tape authentication inside angular

00:44.399 --> 00:46.600
specifically made for react CH or sorry

00:46.600 --> 00:48.239
angular application so if you go to

00:48.239 --> 00:53.480
npmjs.com uh the package name is ngx one

00:53.480 --> 00:57.399
tap so if you just search for this uh

00:57.399 --> 01:01.920
the very first package which comes is

01:04.320 --> 01:08.200
so you just type ngx one

01:12.680 --> 01:15.439
tab so this is actually the package so

01:15.439 --> 01:17.560
you just need to install it so I've

01:17.560 --> 01:19.720
already installed it by the npm command

01:19.720 --> 01:22.360
so ngx one

01:22.360 --> 01:26.400
tap so just install

01:26.400 --> 01:29.520
this so I have also given a detailed

01:29.520 --> 01:32.079
block post where I written step byep

01:32.079 --> 01:33.560
instruction and given all the source

01:33.560 --> 01:36.240
code you can check the description link

01:36.240 --> 01:38.320
so now to get started the very first

01:38.320 --> 01:40.560
step I will show you from scratch so let

01:40.560 --> 01:44.119
me delete everything and start from

01:44.119 --> 01:46.640
scratch so let me just

01:46.640 --> 01:49.640
delete

01:51.600 --> 01:53.880
everything so if you refresh your

01:53.880 --> 01:56.240
application now just go to Local Host

01:56.240 --> 01:59.479
4200 you will see we are starting it

01:59.479 --> 02:02.280
from scratch so you need to go to first

02:02.280 --> 02:05.719
of all app. module. Ts file so to

02:05.719 --> 02:08.360
register this module so just go to this

02:08.360 --> 02:11.800
file and just import this module so we

02:11.800 --> 02:15.040
simply add the import statement which is

02:15.040 --> 02:17.239
ngx one

02:17.239 --> 02:20.120
tap module and it will be coming from

02:20.120 --> 02:24.120
this package ngx One Tap so you require

02:24.120 --> 02:28.159
this it's 13.72%

02:30.599 --> 02:34.720
and just add this line here

02:35.319 --> 02:39.000
ngx and it contains this config and it

02:39.000 --> 02:41.400
actually takes an object which contains

02:41.400 --> 02:43.000
three properties first of all you need

02:43.000 --> 02:45.159
to pass the client

02:45.159 --> 02:48.680
ID which is Boolean

02:48.680 --> 02:50.840
parameters Auto

02:50.840 --> 02:53.640
Select now to get this client ID you

02:53.640 --> 02:56.000
need to register a account in Google

02:56.000 --> 03:00.000
Cloud console so

03:00.080 --> 03:02.200
let me show you how to get that client

03:02.200 --> 03:07.519
ID so go to Google Cloud console and

03:07.519 --> 03:10.799
uh uh just create credentials so go to

03:10.799 --> 03:13.480
credentials

03:15.120 --> 03:17.280
option and click on this create

03:17.280 --> 03:20.040
credentials and o or client ID so once

03:20.040 --> 03:21.720
you click

03:21.720 --> 03:27.120
it let me show you how to do this

03:29.879 --> 03:33.040
so as soon as you click it

03:33.040 --> 03:35.799
this application type you need to select

03:35.799 --> 03:38.480
web application and in the authorized

03:38.480 --> 03:40.519
JavaScript Origins you need to add the

03:40.519 --> 03:42.360
URL on which you are making your

03:42.360 --> 03:44.560
applications so we are developing it on

03:44.560 --> 03:46.519
Local Host

03:46.519 --> 03:50.159
4200 so just type the full URL and also

03:50.159 --> 03:52.720
you need to also write the HTTP Local

03:52.720 --> 03:54.920
Host so both the

03:54.920 --> 03:57.200
versions this one this one and in the

03:57.200 --> 03:59.799
authorized redirect URI you need to

03:59.799 --> 04:02.680
paste the same

04:02.840 --> 04:07.519
URL with port number like this so after

04:07.519 --> 04:09.439
you do this click on the create button

04:09.439 --> 04:11.519
so now it will actually create your

04:11.519 --> 04:13.799
client ID and it will give you this

04:13.799 --> 04:16.840
simply copy to clipboard and simply

04:16.840 --> 04:18.639
paste it right

04:18.639 --> 04:21.680
here so now just close this file come to

04:21.680 --> 04:25.680
your app. component.ts files so inside

04:25.680 --> 04:30.360
this file you need to now declare

04:30.360 --> 04:33.240
an interface so you'll simply declare an

04:33.240 --> 04:35.440
interface right here so just make a

04:35.440 --> 04:38.960
simple interface of uh Google profile

04:38.960 --> 04:41.199
you can call this anything so this

04:41.199 --> 04:43.280
interface will require three properties

04:43.280 --> 04:44.919
name

04:44.919 --> 04:48.280
email and picture all these will be data

04:48.280 --> 04:50.919
type of string so declared a simple

04:50.919 --> 04:53.520
interface which contains these three

04:53.520 --> 04:57.000
properties and now we need to go to the

04:57.000 --> 05:00.360
actual component and declare a user of

05:00.360 --> 05:02.560
this type Google

05:02.560 --> 05:06.720
profile and by default the value will be

05:06.720 --> 05:09.440
null so we are using this interface

05:09.440 --> 05:11.759
declaring an object or sorry variable

05:11.759 --> 05:14.479
user currently the value is null here

05:14.479 --> 05:16.360
we'll be storing the user profile

05:16.360 --> 05:19.039
information and then in the Constructor

05:19.039 --> 05:20.600
we need to

05:20.600 --> 05:22.680
pass the

05:22.680 --> 05:24.880
ngx one tap

05:24.880 --> 05:28.319
service which will be imported from ngx

05:28.319 --> 05:30.400
One Tap so

05:30.400 --> 05:32.280
just it's empty Constructor we just need

05:32.280 --> 05:35.080
to pass this and then we'll be using the

05:35.080 --> 05:38.759
life cycle method ngx on in it this

05:38.759 --> 05:40.639
executes as soon as your angular

05:40.639 --> 05:43.199
application executes so right here we

05:43.199 --> 05:45.960
will initialize this Google One Tap

05:45.960 --> 05:49.039
authentication O So this contains this

05:49.039 --> 05:51.240
init function so here you need to pass

05:51.240 --> 05:54.919
your client ID again the context here

05:54.919 --> 05:56.520
will be of sign

05:56.520 --> 05:59.639
in so again you need to pass your client

05:59.639 --> 06:03.560
client ID so just need to copy

06:03.560 --> 06:06.400
this and simply paste it so this here

06:06.400 --> 06:11.880
you pasting a client ID and after you do

06:12.800 --> 06:17.479
this you simply need to call identity

06:17.479 --> 06:20.560
dollar do

06:22.039 --> 06:24.440
subscribe and this response will be

06:24.440 --> 06:28.440
coming of credential

06:32.280 --> 06:34.840
response and here you can console log

06:34.840 --> 06:37.919
this response so this will contain the

06:37.919 --> 06:40.120
Json web token uh if you refresh your

06:40.120 --> 06:41.919
browser you will

06:41.919 --> 06:45.639
see and the window will

06:45.639 --> 06:48.440
appear uh I think this is not appearing

06:48.440 --> 06:51.199
because we need to edit we need to edit

06:51.199 --> 06:53.759
the component file here which is app.

06:53.759 --> 06:56.199
component. HTML you need to render this

06:56.199 --> 07:00.240
component to work so just declare

07:00.240 --> 07:05.120
and declare this directive ngx One Tap

07:05.120 --> 07:07.560
so just add

07:07.560 --> 07:10.160
this so if you try to open this you will

07:10.160 --> 07:12.080
see on the right hand side the window

07:12.080 --> 07:14.440
the account screen will there so as soon

07:14.440 --> 07:17.280
as you click it it will do the

07:17.280 --> 07:19.639
authentication and now if you check the

07:19.639 --> 07:23.199
console you will see this

07:23.479 --> 07:28.759
uh so just need to refresh it

07:35.400 --> 07:39.120
so I think if you your console logging

07:39.120 --> 07:41.440
this

07:42.960 --> 07:45.240
response now we need to decode this

07:45.240 --> 07:48.120
response so for decoding it we need a

07:48.120 --> 07:52.919
package so we are using this package JWT

07:54.000 --> 07:58.159
decode so JW to decode it actually it

07:58.159 --> 08:01.560
actually decodes the Json web token

08:01.560 --> 08:05.680
which is there inside this response

08:08.120 --> 08:10.879
variable

08:10.879 --> 08:15.039
so have if condition that if response

08:15.039 --> 08:17.680
credential then we need to get the

08:17.680 --> 08:20.240
profile data we simply make a variable

08:20.240 --> 08:23.159
profile data which will be of type

08:23.159 --> 08:26.639
Google profile

08:30.280 --> 08:32.800
so you use this function JWT decode and

08:32.800 --> 08:35.959
we'll decode this response. credential

08:35.959 --> 08:38.320
which will be coming and just you

08:38.320 --> 08:41.240
console lock the profile data and store

08:41.240 --> 08:46.519
it this. user profile data

09:04.320 --> 09:06.600
so now we just need to display the

09:06.600 --> 09:08.120
profile

09:08.120 --> 09:10.560
information which is there inside this.

09:10.560 --> 09:13.519
user you can directly go to the app.

09:13.519 --> 09:16.720
component. HTML file right here and

09:16.720 --> 09:19.439
embed this

09:22.399 --> 09:25.560
data so we can add this NG if directive

09:25.560 --> 09:30.200
that if the user is available then only

09:30.200 --> 09:32.600
display this I will

09:32.600 --> 09:35.920
change let me first of all

09:35.920 --> 09:39.079
display the

09:40.279 --> 09:44.240
image so user.

09:45.120 --> 09:50.360
picture and then we display

09:55.160 --> 10:01.160
our similarly we display user. email

10:01.160 --> 10:02.640
so you're displaying all these three

10:02.640 --> 10:06.600
details so if you refresh

10:20.839 --> 10:24.200
now uh I

10:24.200 --> 10:26.680
think all the source code guys I've

10:26.680 --> 10:28.839
given in the description of this video

10:28.839 --> 10:31.160
so

10:31.160 --> 10:36.040
I think one thing I missed which is

10:37.680 --> 10:39.959
credential I think I'm making some kind

10:39.959 --> 10:41.959
of typ of mistake so what I will do I

10:41.959 --> 10:45.320
will simply paste all this

10:45.320 --> 10:48.880
code so you can go to the description

10:48.880 --> 10:50.720
the link is given in the description of

10:50.720 --> 10:53.399
Full Source

10:54.639 --> 10:59.000
Code with step by-step instruction so

10:59.000 --> 11:02.639
sometimes type of mistake will

11:06.880 --> 11:09.920
happen so now you can see the profile

11:09.920 --> 11:12.600
details are now appearing uh the picture

11:12.600 --> 11:14.639
the username and the email

11:14.639 --> 11:18.480
address so in the console also first of

11:18.480 --> 11:21.360
all we get the Json web token credential

11:21.360 --> 11:23.480
now we decode this and convert this into

11:23.480 --> 11:26.279
the profile data object so all these

11:26.279 --> 11:28.079
details are appearing if you see so we

11:28.079 --> 11:29.800
are simply displaying these details in

11:29.800 --> 11:30.519
the

11:30.519 --> 11:33.959
browser so in this way you can do the

11:33.959 --> 11:37.560
Google one tap authentication in angula

11:37.560 --> 11:39.600
so as soon as you load the page it will

11:39.600 --> 11:41.240
automatically detect and then you can

11:41.240 --> 11:43.880
tap on that and it will display the

11:43.880 --> 11:46.480
details so you can refer my blog post in

11:46.480 --> 11:48.160
the description to get the full source

11:48.160 --> 11:50.839
code it's step by-step instruction so

11:50.839 --> 11:52.320
thank you very much for watching this

11:52.320 --> 11:54.760
video and also check out my website as

11:54.760 --> 11:57.680
well free mediat tools.com uh which

11:57.680 --> 12:00.160
contains thousands of tools regarding

12:00.160 --> 12:02.760
audio video and image and I will be

12:02.760 --> 12:06.720
seeing you guys in the next video