WEBVTT 00:03.400 --> 00:13.140 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 00:13.140 --> 00:18.079 your javascript and html application. So if I open a URL local host 00:18.079 --> 00:22.909 5500, you will see automatically. This will log me the accounts here 00:22.909 --> 00:26.479 You will see. It will list me all the accounts which are previously I logged in 00:26.959 --> 00:35.500 So this is basically the Google Identity Services system, the latest Google Earth flow that you see 00:35.799 --> 00:41.340 So it will automatically log in with one tab. If I just tap on any of the individual account here 00:41.840 --> 00:47.610 it supports this account. It will automatically verify the details in the background and it will now show me the name 00:47.610 --> 00:52.849 coding, se email address and the profile picture. We do have the log out button as well 00:52.849 --> 00:57.349 So if I click the log out button, I will be redirected to the. You can again see right here 00:58.689 --> 01:04.540 Now, if I select this account here, I need to grant permission for the very first time 01:04.540 --> 01:10.260 And then after that, it will simply verify and now you can see that once again 01:10.260 --> 01:14.599 it will automatically detect guys. You will see as I close this 01:14.599 --> 01:21.400 Once again, if I try to open this QR L, it will automatically detect that you have previously logged in with these details 01:21.400 --> 01:29.580 It will show you in the sidebar and now you can simply verify this and now this will show you the information right here 01:30.309 --> 01:37.699 So this is the Google Identity services one tap login system guys that we will be or log in 01:37.949 --> 01:43.629 We will try to implement it inside javascript. I have given all the source code in the description of the video 01:43.860 --> 01:47.419 You can check out all the source code and follow along with this video 01:47.419 --> 01:53.319 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 01:53.319 --> 01:59.019 for html file. This is the only file that we will need here. And inside the body guys 01:59.019 --> 02:04.389 we will basically have a on load. So we will execute this in it function guys right here 02:05.760 --> 02:10.630 And we also need to include a CD N guide just right here. After the title 02:10.630 --> 02:20.089 just include the CD N source will be TT P S accounts dot google dot com slash G si slash 02:20.089 --> 02:26.059 client. And we just need to load the script asynchronously and defer that sort 02:26.059 --> 02:31.100 So just include the CD and tag right here guys. After this 02:31.100 --> 02:36.119 what we need to do, we need to define this initialization function that we have done 02:36.119 --> 02:41.990 right here. So right here you put the tag and we will define this function function in it 02:42.559 --> 02:49.020 So inside this function guys, we will basically have Google accounts dot id dot initialize 02:49.380 --> 02:53.949 And this function takes in basically parameter guys. First is the client id 02:54.610 --> 03:00.460 So here you need to paste your client id. And then we have the option of auto selecting the accounts 03:00.729 --> 03:05.279 auto select. This is a boolean parameter to and the callback function 03:05.460 --> 03:09.970 So callback function we need to have you can define this anything 03:09.970 --> 03:19.190 Let me just say handle credentials response. So now we need to define this function guys right here at the top 03:19.490 --> 03:28.509 So this callback function will automatically fire. So right here you will say handle credential 03:28.509 --> 03:33.160 response, it will have the response right here and we can simply console 03:33.160 --> 03:40.970 log it. So automatically, whenever you select your account automatically, all that information will be returned inside that callback function 03:41.309 --> 03:46.979 So right here you need to paste your client ID guys. So this client ID, you can get it from Google cloud console 03:46.979 --> 03:54.229 So you just need to go to Google cloud console. And here you need to create a project and get your client ID 03:54.589 --> 04:04.169 This is very easy, simply create a project and right inside this uh 04:04.169 --> 04:10.940 right here, you need to paste your ID. So whatever ID that you are doing 04:10.940 --> 04:17.420 so I am having local host 5500. So simply copy this and simply paste it here 04:17.559 --> 04:25.679 Local host, 5500 and also local host in the authorized javascript origin and also authorized redirect where I will be local host 04:25.679 --> 04:32.339 5500 simply save and this will be your client id and simply copy this client id 04:33.890 --> 04:39.470 paste it here. So now guys, if you try to open your application 04:39.470 --> 04:49.140 if I try to open now, nothing will happen. So for that prompt case that you see in the previous and the starting 04:49.140 --> 04:58.510 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 04:58.510 --> 05:03.549 dot id dot prompt. This is the only line of code that we need to write guys 05:03.549 --> 05:11.260 So after doing this, you will see automatically this will me that you have previously logged in with these accounts 05:11.260 --> 05:16.679 If I select individual account here, it will verify this. And now if I check it the console 05:16.679 --> 05:22.579 you will get an object here and this object contains these credential which is AJ W T token 05:22.670 --> 05:29.989 Jason web token. So Jason web token guys, we need to decode this token to get our profile information 05:30.339 --> 05:38.959 So JJ W T token, it's a very uh standard. All the authorization application use 05:38.959 --> 05:48.109 Basically your provided information is contained inside the Json web token. Now we have this uh function inside that function 05:48.559 --> 05:52.920 We will basically have a if condition we will have if response dot credential 05:52.920 --> 05:58.040 which is your J W T token, if it exist in that case 05:58.489 --> 06:02.450 we will need to decode that token. So now for decoding that token guys 06:02.450 --> 06:06.579 we will say J W T and we will simply say response 06:08.839 --> 06:16.829 you will say that Jason, first of all, we will store this token inside the response dot credential J W T 06:17.130 --> 06:24.329 And now we will extract the user information. So you will use Jason dot Pars and inside this Jason dot Pars guys 06:24.329 --> 06:33.820 you will use a two B and then we will say JWT split and then we will split it by dot symbol 06:34.950 --> 06:40.950 And here we need to get the number one like this. So this will basically part the response 06:41.149 --> 06:47.890 So now if you can control of the user guide, so this will get the user information if you now refresh your application 06:47.890 --> 06:53.250 if you now do this, verify. So this will return the response guide 06:53.250 --> 07:03.179 Basically, we need to I think let 07:03.179 --> 07:10.079 me just paste it here. Sorry, credential, spelling is wrong. So this needs to be credential 07:11.679 --> 07:17.709 Yeah, C R E D E, this is a spelling mistake and it was there 07:18.019 --> 07:22.070 So now if you refresh your application, once again guys, click on that 07:22.519 --> 07:27.450 you will now get your user object guys. You will see this user object contains all this information 07:27.450 --> 07:32.149 email address, profile picture display name. Now we can display this information 07:32.149 --> 07:40.579 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 07:40.579 --> 07:45.619 This is an empty here. So now to display this information, we can simply say here 07:45.619 --> 07:50.220 document dot get element by ID profile in A H D M L 07:51.929 --> 08:01.029 And we can simply write in batic symbol. And right here will say your name is this 08:01.029 --> 08:11.679 user dot name. And then we can say that your email is user 08:11.679 --> 08:15.179 dot email. And then we can again have a break tack. And then lastly 08:15.179 --> 08:24.260 we can display the profile picture which is image source, you can say user dot And this contains 08:24.260 --> 08:33.469 a property picture. So that's all guys. And if you now refresh your application and basically if you select the account 08:33.979 --> 08:39.400 you will see your profile information name, email address. And this is a profile picture 08:39.690 --> 08:45.799 If you want to select it for a different account, you will see that you can see that 08:47.609 --> 08:52.859 So now guys, we just need to display the logout button as well 08:52.859 --> 08:58.900 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 09:02.159 --> 09:09.409 So we can basically whenever you this will not be displayed, so display property will be none 09:11.840 --> 09:16.000 So now whenever it is log, we can change the display property 09:16.000 --> 09:24.909 we can say log out button and then we can dynamically enable that button 09:24.909 --> 09:32.679 So we can say style or display to block. So now this logout button will be shown to the user if you click it 09:32.989 --> 09:37.590 So now your log out button will also be shown here guys. So now if I click this log out button guys 09:37.590 --> 09:43.359 we need to basically write a function. So whenever we click this button 09:43.359 --> 09:48.010 so we can initialize on, click here. So we say handle, log out 09:48.190 --> 09:54.059 So this function we will need to make guys. So now we can make make this function handle 09:54.059 --> 09:59.260 log out. So inside this function guys, what we need to do 09:59.260 --> 10:04.340 we will say Google dot accounts dot id dot disable auto select 10:06.260 --> 10:10.710 And then we will say Google dot accounts dot id dot com 10:14.070 --> 10:22.469 Then we will simply just clear out the profile like this empty 10:25.059 --> 10:35.320 And also we will hide the logout button. So we will say style do display 10:36.150 --> 10:42.200 to no, that's so. So now basically if you now refresh your application guys 10:43.859 --> 10:51.840 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 10:51.840 --> 10:55.650 for any application guys. You will see that it is now working perfectly 10:55.960 --> 11:04.859 So in this way, you can integrate one tap login system inside your authentication system inside your javascript and html application 11:04.859 --> 11:08.559 It's very simple. All the source code is given in the description of the video 11:08.750 --> 11:12.840 Thank you very much for watching this video and I will be seeing you in the next video