uh hello guys welcome to this video so
in this video I will show you uh how to
implement One Tap authentication of
Google inside angular application so on
your screen right here we have having
this on the right hand corner of the
screen we have this Google login screen
appearing
and we see the currently logged in
account so you can click this button as
soon as you click the button right here
the authentication will happen and you
will see the profile details of the user
which is the profile picture username
and email address so there is a specific
package which allows you to do this one
tape authentication inside angular
specifically made for react CH or sorry
angular application so if you go to
npmjs.com uh the package name is ngx one
tap so if you just search for this uh
the very first package which comes is
so you just type ngx one
tab so this is actually the package so
you just need to install it so I've
already installed it by the npm command
so ngx one
tap so just install
this so I have also given a detailed
block post where I written step byep
instruction and given all the source
code you can check the description link
so now to get started the very first
step I will show you from scratch so let
me delete everything and start from
scratch so let me just
delete
everything so if you refresh your
application now just go to Local Host
4200 you will see we are starting it
from scratch so you need to go to first
of all app. module. Ts file so to
register this module so just go to this
file and just import this module so we
simply add the import statement which is
ngx one
tap module and it will be coming from
this package ngx One Tap so you require
this it's 13.72%
and just add this line here
ngx and it contains this config and it
actually takes an object which contains
three properties first of all you need
to pass the client
ID which is Boolean
parameters Auto
Select now to get this client ID you
need to register a account in Google
Cloud console so
let me show you how to get that client
ID so go to Google Cloud console and
uh uh just create credentials so go to
credentials
option and click on this create
credentials and o or client ID so once
you click
it let me show you how to do this
so as soon as you click it
this application type you need to select
web application and in the authorized
JavaScript Origins you need to add the
URL on which you are making your
applications so we are developing it on
Local Host
4200 so just type the full URL and also
you need to also write the HTTP Local
Host so both the
versions this one this one and in the
authorized redirect URI you need to
paste the same
URL with port number like this so after
you do this click on the create button
so now it will actually create your
client ID and it will give you this
simply copy to clipboard and simply
paste it right
here so now just close this file come to
your app. component.ts files so inside
this file you need to now declare
an interface so you'll simply declare an
interface right here so just make a
simple interface of uh Google profile
you can call this anything so this
interface will require three properties
name
email and picture all these will be data
type of string so declared a simple
interface which contains these three
properties and now we need to go to the
actual component and declare a user of
this type Google
profile and by default the value will be
null so we are using this interface
declaring an object or sorry variable
user currently the value is null here
we'll be storing the user profile
information and then in the Constructor
we need to
pass the
ngx one tap
service which will be imported from ngx
One Tap so
just it's empty Constructor we just need
to pass this and then we'll be using the
life cycle method ngx on in it this
executes as soon as your angular
application executes so right here we
will initialize this Google One Tap
authentication O So this contains this
init function so here you need to pass
your client ID again the context here
will be of sign
in so again you need to pass your client
client ID so just need to copy
this and simply paste it so this here
you pasting a client ID and after you do
this you simply need to call identity
dollar do
subscribe and this response will be
coming of credential
response and here you can console log
this response so this will contain the
Json web token uh if you refresh your
browser you will
see and the window will
appear uh I think this is not appearing
because we need to edit we need to edit
the component file here which is app.
component. HTML you need to render this
component to work so just declare
and declare this directive ngx One Tap
so just add
this so if you try to open this you will
see on the right hand side the window
the account screen will there so as soon
as you click it it will do the
authentication and now if you check the
console you will see this
uh so just need to refresh it
so I think if you your console logging
this
response now we need to decode this
response so for decoding it we need a
package so we are using this package JWT
decode so JW to decode it actually it
actually decodes the Json web token
which is there inside this response
variable
so have if condition that if response
credential then we need to get the
profile data we simply make a variable
profile data which will be of type
Google profile
so you use this function JWT decode and
we'll decode this response. credential
which will be coming and just you
console lock the profile data and store
it this. user profile data
so now we just need to display the
profile
information which is there inside this.
user you can directly go to the app.
component. HTML file right here and
embed this
data so we can add this NG if directive
that if the user is available then only
display this I will
change let me first of all
display the
image so user.
picture and then we display
our similarly we display user. email
so you're displaying all these three
details so if you refresh
now uh I
think all the source code guys I've
given in the description of this video
so
I think one thing I missed which is
credential I think I'm making some kind
of typ of mistake so what I will do I
will simply paste all this
code so you can go to the description
the link is given in the description of
Full Source
Code with step by-step instruction so
sometimes type of mistake will
happen so now you can see the profile
details are now appearing uh the picture
the username and the email
address so in the console also first of
all we get the Json web token credential
now we decode this and convert this into
the profile data object so all these
details are appearing if you see so we
are simply displaying these details in
the
browser so in this way you can do the
Google one tap authentication in angula
so as soon as you load the page it will
automatically detect and then you can
tap on that and it will display the
details so you can refer my blog post in
the description to get the full source
code it's step by-step instruction so
thank you very much for watching this
video and also check out my website as
well free mediat tools.com uh which
contains thousands of tools regarding
audio video and image and I will be
seeing you guys in the next video