Uh elephants today in this tutorial, I will be showing you that how basically you can implement that functionality of one tap login system inside
your javascript and html application. So if I open a URL local host
5500, you will see automatically. This will log me the accounts here
You will see. It will list me all the accounts which are previously I logged in
So this is basically the Google Identity Services system, the latest Google Earth flow that you see
So it will automatically log in with one tab. If I just tap on any of the individual account here
it supports this account. It will automatically verify the details in the background and it will now show me the name
coding, se email address and the profile picture. We do have the log out button as well
So if I click the log out button, I will be redirected to the. You can again see right here
Now, if I select this account here, I need to grant permission for the very first time
And then after that, it will simply verify and now you can see that once again
it will automatically detect guys. You will see as I close this
Once again, if I try to open this QR L, it will automatically detect that you have previously logged in with these details
It will show you in the sidebar and now you can simply verify this and now this will show you the information right here
So this is the Google Identity services one tap login system guys that we will be or log in
We will try to implement it inside javascript. I have given all the source code in the description of the video
You can check out all the source code and follow along with this video
So now let's get started. So the very first thing guys we need to do is that we need to create a brand new index
for html file. This is the only file that we will need here. And inside the body guys
we will basically have a on load. So we will execute this in it function guys right here
And we also need to include a CD N guide just right here. After the title
just include the CD N source will be TT P S accounts dot google dot com slash G si slash
client. And we just need to load the script asynchronously and defer that sort
So just include the CD and tag right here guys. After this
what we need to do, we need to define this initialization function that we have done
right here. So right here you put the tag and we will define this function function in it
So inside this function guys, we will basically have Google accounts dot id dot initialize
And this function takes in basically parameter guys. First is the client id
So here you need to paste your client id. And then we have the option of auto selecting the accounts
auto select. This is a boolean parameter to and the callback function
So callback function we need to have you can define this anything
Let me just say handle credentials response. So now we need to define this function guys right here at the top
So this callback function will automatically fire. So right here you will say handle credential
response, it will have the response right here and we can simply console
log it. So automatically, whenever you select your account automatically, all that information will be returned inside that callback function
So right here you need to paste your client ID guys. So this client ID, you can get it from Google cloud console
So you just need to go to Google cloud console. And here you need to create a project and get your client ID
This is very easy, simply create a project and right inside this uh
right here, you need to paste your ID. So whatever ID that you are doing
so I am having local host 5500. So simply copy this and simply paste it here
Local host, 5500 and also local host in the authorized javascript origin and also authorized redirect where I will be local host
5500 simply save and this will be your client id and simply copy this client id
paste it here. So now guys, if you try to open your application
if I try to open now, nothing will happen. So for that prompt case that you see in the previous and the starting
of the video to enable that prompt, it's very, we we need to write one line of code right here which is Google dot accounts
dot id dot prompt. This is the only line of code that we need to write guys
So after doing this, you will see automatically this will me that you have previously logged in with these accounts
If I select individual account here, it will verify this. And now if I check it the console
you will get an object here and this object contains these credential which is AJ W T token
Jason web token. So Jason web token guys, we need to decode this token to get our profile information
So JJ W T token, it's a very uh standard. All the authorization application use
Basically your provided information is contained inside the Json web token. Now we have this uh function inside that function
We will basically have a if condition we will have if response dot credential
which is your J W T token, if it exist in that case
we will need to decode that token. So now for decoding that token guys
we will say J W T and we will simply say response
you will say that Jason, first of all, we will store this token inside the response dot credential J W T
And now we will extract the user information. So you will use Jason dot Pars and inside this Jason dot Pars guys
you will use a two B and then we will say JWT split and then we will split it by dot symbol
And here we need to get the number one like this. So this will basically part the response
So now if you can control of the user guide, so this will get the user information if you now refresh your application
if you now do this, verify. So this will return the response guide
Basically, we need to I think let
me just paste it here. Sorry, credential, spelling is wrong. So this needs to be credential
Yeah, C R E D E, this is a spelling mistake and it was there
So now if you refresh your application, once again guys, click on that
you will now get your user object guys. You will see this user object contains all this information
email address, profile picture display name. Now we can display this information
So now inside the body guys, we will simply have some tag here which a simple paragraph we will give it an id of profile
This is an empty here. So now to display this information, we can simply say here
document dot get element by ID profile in A H D M L
And we can simply write in batic symbol. And right here will say your name is this
user dot name. And then we can say that your email is user
dot email. And then we can again have a break tack. And then lastly
we can display the profile picture which is image source, you can say user dot And this contains
a property picture. So that's all guys. And if you now refresh your application and basically if you select the account
you will see your profile information name, email address. And this is a profile picture
If you want to select it for a different account, you will see that you can see that
So now guys, we just need to display the logout button as well
So we can basically have a log out button. We can give it an idea of log out button and we can say log out
So we can basically whenever you this will not be displayed, so display property will be none
So now whenever it is log, we can change the display property
we can say log out button and then we can dynamically enable that button
So we can say style or display to block. So now this logout button will be shown to the user if you click it
So now your log out button will also be shown here guys. So now if I click this log out button guys
we need to basically write a function. So whenever we click this button
so we can initialize on, click here. So we say handle, log out
So this function we will need to make guys. So now we can make make this function handle
log out. So inside this function guys, what we need to do
we will say Google dot accounts dot id dot disable auto select
And then we will say Google dot accounts dot id dot com
Then we will simply just clear out the profile like this empty
And also we will hide the logout button. So we will say style do display
to no, that's so. So now basically if you now refresh your application guys
so click on log out, you will be really a log out. Once again, you will see select your account this you can enable this
for any application guys. You will see that it is now working perfectly
So in this way, you can integrate one tap login system inside your authentication system inside your javascript and html application
It's very simple. All the source code is given in the description of the video
Thank you very much for watching this video and I will be seeing you in the next video