1 00:00:00,330 --> 00:00:06,689 Now, in this lecture, let's try to integrate social login into our easy bank application with the 2 00:00:06,689 --> 00:00:09,330 help of GitHub identity provider. 3 00:00:09,540 --> 00:00:14,970 If you observe the current login page, the user can only enter his username and password. 4 00:00:15,300 --> 00:00:21,690 But there is no option off social login like guitar bar or Facebook in order to integrate social login 5 00:00:21,690 --> 00:00:25,050 into my login page of my eastbank application. 6 00:00:25,260 --> 00:00:27,630 I can go to the key club admin console. 7 00:00:27,870 --> 00:00:29,610 Go to the identity provider. 8 00:00:29,880 --> 00:00:32,700 Select the option which you want to integrate. 9 00:00:32,910 --> 00:00:38,370 In this scenario, since I want to integrate GitHub login, so I'm selecting GitHub. 10 00:00:38,640 --> 00:00:45,690 So here it will ask you give me your client TTY and client secret, which you have received from the 11 00:00:45,690 --> 00:00:48,360 guitar while registering your client with it. 12 00:00:48,630 --> 00:00:54,060 So if you can recall in the previous section, we did a GitHub integration at the time. 13 00:00:54,060 --> 00:00:56,560 We have a client ID and client secret. 14 00:00:56,580 --> 00:00:58,440 So we need to mention the same here. 15 00:00:58,650 --> 00:01:04,019 So if you can go to our GitHub profile, there is a settings option under settings. 16 00:01:04,019 --> 00:01:05,640 You can select developer settings. 17 00:01:05,820 --> 00:01:07,380 Click on what apps? 18 00:01:07,650 --> 00:01:09,720 So you can see I have an app right now. 19 00:01:09,720 --> 00:01:10,830 I'm just clicking that. 20 00:01:11,160 --> 00:01:17,800 So here my client I.D. So-and-so and Clancy Grant, I already saved it when I'm restring very first 21 00:01:17,800 --> 00:01:18,050 thing. 22 00:01:18,240 --> 00:01:21,480 So I have my client data and client secret in my hand. 23 00:01:21,720 --> 00:01:25,220 If you want, you can upload the logo here, application name. 24 00:01:25,230 --> 00:01:32,970 You can rename it to like instead of spring security or two, you can mention Easy Bank as an application 25 00:01:32,970 --> 00:01:33,210 name. 26 00:01:33,480 --> 00:01:36,660 So homepage URL is localhost 4200. 27 00:01:36,960 --> 00:01:39,530 Now coming to authorization callback, you are. 28 00:01:40,140 --> 00:01:43,860 If you go to the admin console, your key clock is telling. 29 00:01:44,160 --> 00:01:47,790 Go and use this UALE as you redirect to Aurel. 30 00:01:47,910 --> 00:01:52,020 So I have to copy paste this and mention here and add the GitHub. 31 00:01:52,230 --> 00:01:54,240 So I'm just clicking update application. 32 00:01:54,660 --> 00:01:59,400 So now I have done all the changes that I needed on the GitHub auth app. 33 00:01:59,640 --> 00:02:05,610 So here I just have to argue the client I.D. I'm just mentioning my client I.D. and client secret. 34 00:02:06,030 --> 00:02:07,830 Now I can go and click siel. 35 00:02:08,160 --> 00:02:15,570 So with this, I should be getting Noyer GitHub login option also inside my easy bank application. 36 00:02:15,630 --> 00:02:17,010 So let's see that magic. 37 00:02:17,130 --> 00:02:20,580 So let me go to the localhost, four thousand two hundred. 38 00:02:20,850 --> 00:02:26,880 So if I click a login here, you can see along with the username and password right now, it is also 39 00:02:26,880 --> 00:02:28,890 giving an option of GitHub login. 40 00:02:29,040 --> 00:02:35,910 So if I click GitHub login, it will ask you, these are the user details that I received from the GitHub. 41 00:02:36,210 --> 00:02:40,200 So please fill other details which are mandatory in my system. 42 00:02:40,290 --> 00:02:42,270 So first name I'm giving easy. 43 00:02:42,540 --> 00:02:43,920 Last name I'm giving bytes. 44 00:02:44,160 --> 00:02:49,650 So as soon as I click submit, a user is created inside key blocks of work. 45 00:02:49,920 --> 00:02:51,750 But don't expect the password. 46 00:02:51,750 --> 00:02:54,420 Details of GitHub will be stored inside Kikla. 47 00:02:54,420 --> 00:02:55,440 That will never happen. 48 00:02:55,650 --> 00:03:04,320 So whenever I click GitHub, option key Cluck's server will go and try to get ID and authorization from 49 00:03:04,320 --> 00:03:05,040 the GitHub. 50 00:03:05,250 --> 00:03:09,900 Once the user details are validated, it will show the dashboard page. 51 00:03:10,110 --> 00:03:16,170 But in this scenario, since GitHub does not, giving the rules at my page is expecting, which is admin 52 00:03:16,170 --> 00:03:19,620 and user, I'm not able to display anything to the user. 53 00:03:19,860 --> 00:03:24,960 So let's try to remove our roles restriction for dashboard in the UI court. 54 00:03:25,260 --> 00:03:30,430 So here for Dashboard, I'm removing the roles restrictions that we have. 55 00:03:30,750 --> 00:03:33,510 With this, I'm saving and rebuilding the application. 56 00:03:33,810 --> 00:03:41,100 So now I'm clicking login so you can see I'm getting the dashboard details because there is no role 57 00:03:41,100 --> 00:03:42,080 requirement right now. 58 00:03:42,090 --> 00:03:42,540 We have. 59 00:03:42,750 --> 00:03:49,110 And of course, one of the drawback that we'll have when we use social logins is they don't share the 60 00:03:49,110 --> 00:03:51,330 information like the way we expect. 61 00:03:51,540 --> 00:03:57,210 Like in this scenario, for my application, I'm expecting rules to be written from the authorization 62 00:03:57,210 --> 00:04:03,930 server, but I can't do that customization at GitHub alteration, so I have to leave it the water GitHub 63 00:04:03,930 --> 00:04:04,860 be sharing to me. 64 00:04:05,070 --> 00:04:11,550 So due to that reason, whenever you have a custom requirements, never, ever go with the social logins 65 00:04:11,550 --> 00:04:17,790 instead defined, you are one requirements in, say, identity and access management products like Dekalog, 66 00:04:17,790 --> 00:04:18,269 Log, Opta. 67 00:04:18,570 --> 00:04:24,270 But for now, I just integrated for your reference how quick log is going to provide those out-of-the-box 68 00:04:24,270 --> 00:04:26,280 features for your login page. 69 00:04:26,490 --> 00:04:27,600 I can show one more time. 70 00:04:27,600 --> 00:04:29,640 Also, I'm just clicking logout. 71 00:04:29,880 --> 00:04:34,260 So this time I open the homepage inside the Incognito tab. 72 00:04:34,440 --> 00:04:35,760 So I'm just clicking login. 73 00:04:35,940 --> 00:04:39,210 So if I click GitHub, it is asking me. 74 00:04:39,510 --> 00:04:43,740 You are about to use the easy bang with the help of GitHub attrition details. 75 00:04:43,920 --> 00:04:49,200 So I have to give my username, which is easy bytes and the password of my account. 76 00:04:49,320 --> 00:04:55,530 So as soon as I click sign in, you can see my key clocktower will redirect me to the dashboard. 77 00:04:55,770 --> 00:04:59,910 But definitely, I can't use any of these tabs because I don't. 78 00:04:59,980 --> 00:05:05,680 Power roles coming from my GitHub operations are what whereas if I tried to log in with the geek log 79 00:05:05,680 --> 00:05:12,460 alteration server, definitely I how the roles that I'm expecting and I can use my eastbank application 80 00:05:12,460 --> 00:05:12,970 happily. 81 00:05:13,210 --> 00:05:15,220 And one more last thing that I want to show you. 82 00:05:15,490 --> 00:05:20,290 Banora on user uses GitHub and tries to login with the GitHub. 83 00:05:20,530 --> 00:05:25,000 You will get his user details created inside Kikla culture. 84 00:05:25,240 --> 00:05:31,290 This is because GitHub is fine to share my profile details with the easy bank application. 85 00:05:31,300 --> 00:05:35,740 That's why I'm able to get the basic details of the user from the GitHub. 86 00:05:35,950 --> 00:05:42,400 But never, ever, I'll get the password of the user every time my access token refresh tokenize expired. 87 00:05:42,640 --> 00:05:49,150 My user how to do again in login operation with GitHub by entering its corrective credentials so that 88 00:05:49,150 --> 00:05:51,870 we might log on to easy bank application. 89 00:05:51,880 --> 00:05:57,610 Always have an access token which they can use for authentication and alteration purpose. 90 00:05:57,880 --> 00:06:03,310 Hope you are very clear how easy it is to integrate any social login with the key blocks over inside 91 00:06:03,310 --> 00:06:04,210 the login page. 92 00:06:04,540 --> 00:06:09,100 If you want, you can disable it or deleted permanently without breaking off. 93 00:06:09,310 --> 00:06:13,160 Delete edit options here for now and just clicking delete. 94 00:06:13,180 --> 00:06:16,690 So this will delete the login operation using GitHub. 95 00:06:16,870 --> 00:06:20,320 I can also come from by going to login page again. 96 00:06:20,320 --> 00:06:21,880 So now and clicking login. 97 00:06:21,880 --> 00:06:24,700 This time there is no GitHub login option to the user. 98 00:06:24,970 --> 00:06:31,210 So this way we can integrate any social login to your website with the help of Keflex out very easily. 99 00:06:31,210 --> 00:06:36,310 And of course, every identity and access management products like OCTA for Job. 100 00:06:36,640 --> 00:06:38,830 They'll also provide social login features. 101 00:06:39,130 --> 00:06:39,570 Thank you. 102 00:06:39,580 --> 00:06:41,020 And I'll see you in that next lecture. 103 00:06:41,050 --> 00:06:41,380 Bye.