1 00:00:00,330 --> 00:00:06,990 Now we are all set to implement Bekesi operation called Ground Floor inside our angular application 2 00:00:07,200 --> 00:00:13,380 so that it can interact with the key Glock's software to get the attraction code access token. 3 00:00:13,500 --> 00:00:19,720 And by using that access token, my angular application can interact with my backend resource. 4 00:00:19,720 --> 00:00:25,710 So what to get the resource details, as we discussed in the previous lecture, in the Pixy method. 5 00:00:26,040 --> 00:00:33,150 The client application has to generate quarter verifier and quarter challenge, and this has to be generated 6 00:00:33,150 --> 00:00:41,850 in a cryptographically manner so that my geek Luxo can use both of them to validate cryptographically 7 00:00:42,030 --> 00:00:47,280 in order to pass operation code and access token to the client applications. 8 00:00:47,580 --> 00:00:52,770 But this all sounds like a very complicated process, but it is not. 9 00:00:53,130 --> 00:00:56,940 The reason is we don't have to do this all this quarter. 10 00:00:56,940 --> 00:01:01,170 Verifier code challenge generation manually by writing the code. 11 00:01:01,590 --> 00:01:05,820 There are already enough libraries available in order to do that. 12 00:01:06,090 --> 00:01:11,790 Coming to Angular Library, we have an library called Geek Lock Angular. 13 00:01:11,910 --> 00:01:12,870 Like you can see. 14 00:01:13,080 --> 00:01:20,700 This package supports Angular and keep lock integration by providing out-of-the-box features like it 15 00:01:20,700 --> 00:01:25,620 will only generate internally core verifier core to challenge for you. 16 00:01:25,950 --> 00:01:32,850 And it will take care of interacting with the geek blocks of Web without the need of lot of coding from 17 00:01:32,850 --> 00:01:33,570 the developer. 18 00:01:33,960 --> 00:01:41,130 So this page has clear instructions to what this library does and how to install that inside your angular 19 00:01:41,130 --> 00:01:41,850 application. 20 00:01:42,060 --> 00:01:48,510 So in order to install inside your angular application, we have to run this command, which is NPM 21 00:01:48,510 --> 00:01:53,580 install geek lock hyphen, angular space geek lock hyphen gious. 22 00:01:53,670 --> 00:02:01,710 So once you run this command, you will get all the libraries that you needed for your angular application 23 00:02:02,010 --> 00:02:03,470 to integrate with the geek. 24 00:02:03,740 --> 00:02:04,950 So what was that? 25 00:02:04,950 --> 00:02:12,810 This page also has clear explanation what kind of set up you have to do inside your angular app in order 26 00:02:12,810 --> 00:02:15,780 to leverage these key Gloc Angular library. 27 00:02:16,080 --> 00:02:22,440 So now coming to our angular application, the very first change that I have done is like mentioned 28 00:02:22,440 --> 00:02:24,180 in the official library page. 29 00:02:24,330 --> 00:02:33,720 First, I had to import app initializer from the angular core post that I should import to classes, 30 00:02:33,870 --> 00:02:39,570 which is geek like angular module and geek love service from the geek like Angular Library. 31 00:02:39,900 --> 00:02:47,450 Once that is imported, this is a very crucial function that I need to write, which is in Schilsky, 32 00:02:47,470 --> 00:02:52,320 Glogg so far that I need to pass clock service as an argument. 33 00:02:52,470 --> 00:02:58,650 So here you can see we are passing all the details of key log, like what is a base yooralla for my 34 00:02:58,650 --> 00:03:03,480 key glogg, which is history to localhost 880 slash art. 35 00:03:03,630 --> 00:03:06,810 And what is my real name, which is easy bank dough. 36 00:03:07,080 --> 00:03:09,060 And what is a client activities? 37 00:03:09,330 --> 00:03:10,920 Easy public client. 38 00:03:11,070 --> 00:03:14,850 You can see here, I'm not passing any claim secret. 39 00:03:14,850 --> 00:03:21,930 I am only passing client I.D. and under the INIT options, we have a pixy method approach, which is, 40 00:03:22,200 --> 00:03:23,490 yes, 256. 41 00:03:23,490 --> 00:03:27,600 And this has to match with what we choose under Gogglebox hour. 42 00:03:27,900 --> 00:03:34,230 And coming to redirect, you are also we should make sure the redirect uara is matching with what we 43 00:03:34,230 --> 00:03:37,800 configured in that key Glock's over, which is slash dashboard. 44 00:03:38,070 --> 00:03:42,030 And we should also mention lawdy user profile at startups to false. 45 00:03:42,480 --> 00:03:49,440 If you set this to draw by default without any action from the user, the very first space that will 46 00:03:49,440 --> 00:03:51,270 be landed will be the login page. 47 00:03:51,510 --> 00:03:56,760 But I don't want that to happen until unless the user click on the login action. 48 00:03:56,970 --> 00:03:59,610 So due to that, I mentioned this property as false. 49 00:03:59,880 --> 00:04:03,510 So don't worry if you don't understand all this angle related stuff. 50 00:04:03,720 --> 00:04:07,110 But this just hand knowledge that I want to provide. 51 00:04:07,290 --> 00:04:13,440 So in future, if you are building an Web application based upon equity, are angular, react, any 52 00:04:13,440 --> 00:04:20,670 other library, you know that what is a process and based upon the language that you are working. 53 00:04:20,820 --> 00:04:27,060 You can always search for corresponding libraries that support Kikla like integration and follow this 54 00:04:27,060 --> 00:04:27,690 approach. 55 00:04:27,870 --> 00:04:32,940 So I'll also attach all this angular code to this video for your reference. 56 00:04:33,270 --> 00:04:40,050 So most of this application is very similar to what we are discussing in the previous lectures and sections 57 00:04:40,050 --> 00:04:40,890 of this course. 58 00:04:41,190 --> 00:04:48,420 So I just made some changes to integrate with the key clock, Utsav, by leveraging the key clock angular 59 00:04:48,420 --> 00:04:48,930 library. 60 00:04:49,200 --> 00:04:55,410 So once we write this function in Schilsky clock, we should come to that NJI module declaration. 61 00:04:55,650 --> 00:04:59,930 So here under the imports, we should make sure we are importing Kikla. 62 00:05:00,480 --> 00:05:06,900 Module and coming to providers, we should declare the providers like providing the to app initializer. 63 00:05:07,200 --> 00:05:14,070 And what is a fact that we want to insulin's, which is in Schilsky cloud method that we defined in 64 00:05:14,070 --> 00:05:18,930 the top and dependencies is key cloud service and multi is equal to true. 65 00:05:19,080 --> 00:05:21,420 So these configurations you have to provide. 66 00:05:21,660 --> 00:05:28,380 So once this basic configuration is done in the app, what derby is the very next to file that I want 67 00:05:28,380 --> 00:05:31,560 to show you Yi's Huerter component dartez to Yemen. 68 00:05:31,950 --> 00:05:35,270 So in order to understand this header, that component part has steam. 69 00:05:35,270 --> 00:05:38,850 And let me show you that you web page of this angular application. 70 00:05:39,210 --> 00:05:45,990 So it is pretty much similar, except that I remove the sign in page, because first I want to show 71 00:05:45,990 --> 00:05:46,830 it to the user. 72 00:05:46,830 --> 00:05:48,600 What is the homepage? 73 00:05:48,840 --> 00:05:54,990 And when he click on the login page, he has to be redirected to the key Gloc login page. 74 00:05:55,140 --> 00:06:02,210 So due to that is and I have some good homepage and whatever you see in the top is coming from the header 75 00:06:02,230 --> 00:06:03,210 dart hits Tiamat. 76 00:06:03,390 --> 00:06:09,470 So there is a whole login contactors notices, dashboard and logout. 77 00:06:09,510 --> 00:06:17,550 So few tabs like dashboard logout will be shown only if the user is authenticated by looking at the 78 00:06:17,550 --> 00:06:21,570 chart status variable is equal to auth if the user is not logged in. 79 00:06:21,780 --> 00:06:24,790 We will show home login, contact us notices. 80 00:06:24,870 --> 00:06:30,810 So if we see here for login on click, I mentioned it has to invoke the login method. 81 00:06:31,080 --> 00:06:35,790 Similarly for logout, it has to invoke on click logout method. 82 00:06:36,000 --> 00:06:41,250 So where do we define this method is inside the component of header. 83 00:06:41,700 --> 00:06:45,360 Like you just have to look for the header component that piace. 84 00:06:45,710 --> 00:06:52,890 Here you can see first I had to import the classes from the Dekalog Angler, which is the clerk's office 85 00:06:52,890 --> 00:06:54,240 and Kikla profile. 86 00:06:54,600 --> 00:07:03,030 So here under login, I just how to invoke the login method of keek lock service provided from the library. 87 00:07:03,300 --> 00:07:09,480 So these internally take care of everything, like getting an authorization code from the key clerks 88 00:07:09,480 --> 00:07:11,970 over by passing that code challenge. 89 00:07:12,210 --> 00:07:19,600 And once I get the operation code, it will also pass the code verifier so that my key club server can 90 00:07:19,600 --> 00:07:20,940 do an access token. 91 00:07:21,030 --> 00:07:26,400 So all this will happen inside the library when you call the login method. 92 00:07:26,550 --> 00:07:30,630 Similarly, if we want to lagat, you just have to invoke the logout method. 93 00:07:30,960 --> 00:07:36,590 And the next important file that I want to show you is the routing configurations that allow that. 94 00:07:36,780 --> 00:07:40,830 Like if you see by default, the homepage will be shown to the user. 95 00:07:41,160 --> 00:07:47,340 Like if someone tried to interact to my application without giving any part like just simple localhost, 96 00:07:47,550 --> 00:07:51,450 four thousand two hundred, then by default, homepage will display. 97 00:07:51,810 --> 00:07:55,560 And every part has its own component defined. 98 00:07:55,860 --> 00:07:58,690 And you can see certain parts like dashboard. 99 00:07:58,710 --> 00:08:02,850 My account, my balance, my loans, my cards. 100 00:08:03,180 --> 00:08:10,140 These are protected parts which are protected by using a class called Autarchic Clubcard. 101 00:08:10,380 --> 00:08:17,190 And here I'm also having role based access like dashboard can be viewed by someone who have a role like 102 00:08:17,190 --> 00:08:18,880 users and admin. 103 00:08:19,290 --> 00:08:24,210 And of course, someone can fool my UI application by changing this code. 104 00:08:24,510 --> 00:08:29,160 But since I have a second level check in the backend also, it should not be a problem. 105 00:08:29,160 --> 00:08:30,870 Even someone changes that. 106 00:08:31,110 --> 00:08:36,659 So this kind of role based a code on the new way at least will reduce some burden on the back. 107 00:08:36,659 --> 00:08:43,230 And so do not pass the requests, which are not part of that role based access mechanism. 108 00:08:43,530 --> 00:08:46,840 So let's try to go and see what is present in the object log. 109 00:08:47,370 --> 00:08:52,560 So this is, again, a custom class that I have written by extending that kik lock out the card. 110 00:08:52,800 --> 00:08:55,260 So key look at the card, which is from the library. 111 00:08:55,260 --> 00:09:00,660 Again, provide some out-of-the-box features like it will hold the information, like whether the user 112 00:09:00,660 --> 00:09:06,480 is authenticated, and it will also hold a user profile detail once the user is authenticated. 113 00:09:06,750 --> 00:09:13,500 So you can see here, whenever a person is trying to access a protected page, are protected. 114 00:09:13,750 --> 00:09:16,710 But this guard will invoke. 115 00:09:16,920 --> 00:09:21,990 And here you can see Foster will check whether the user is authentic later. 116 00:09:22,200 --> 00:09:24,210 If not, show him the login page. 117 00:09:24,610 --> 00:09:32,670 And if the user is authenticated, we will check the status variable to art so that our header component 118 00:09:32,670 --> 00:09:35,580 will use that to display corresponding taps. 119 00:09:36,030 --> 00:09:43,740 And similarly, we will also get the first name and email details of the user from the user profile 120 00:09:43,740 --> 00:09:47,460 that is provided by my Dekalog Angular Library. 121 00:09:47,700 --> 00:09:54,330 So those details I will stored inside and user and set it in position storage so that I can use them 122 00:09:54,330 --> 00:09:57,750 in other components and other places of the application. 123 00:09:58,080 --> 00:09:59,850 And this is the place where we do. 124 00:10:00,180 --> 00:10:06,070 Rule based to check, like you can see first what rules this rule should accept. 125 00:10:06,090 --> 00:10:13,410 I'll get from Raut dots Datadog rules like if a user trying to access a slash dashboard part, I will 126 00:10:13,410 --> 00:10:20,460 get all the rules required for that part, and that can be present inside these required rules. 127 00:10:20,730 --> 00:10:26,970 And at the same time, if the record rolls is empty, which means the pad does not have any role Pastner 128 00:10:26,980 --> 00:10:29,550 mechanism, I can simply return true. 129 00:10:29,880 --> 00:10:37,410 But if the requite rules has some rules, I will check at least one of the rule should match with the 130 00:10:37,560 --> 00:10:40,770 the rules that I'm getting from the geek Luxo. 131 00:10:41,070 --> 00:10:44,400 So these dark rules is coming from the key clock Odegaard. 132 00:10:44,740 --> 00:10:51,690 So if you click on the start rules here, you can see this is coming from the library file, which is 133 00:10:51,690 --> 00:10:53,790 key block at Gaudiest. 134 00:10:54,150 --> 00:11:00,490 So this way, Geek Lock Angular Library provides all the out-of-the-box features. 135 00:11:00,750 --> 00:11:07,120 And in fact, you don't need any interceptor also to pass that access token every time to the resource 136 00:11:07,120 --> 00:11:11,340 server in the backend, because the library will take care of it internally. 137 00:11:11,760 --> 00:11:17,010 So now we discuss all the important changes that we have done inside this angular application. 138 00:11:17,250 --> 00:11:21,400 But don't worry, if you don't have knowledge on Angular, please ignore it. 139 00:11:21,420 --> 00:11:24,990 Please understand only the concept that I'm trying to explain here. 140 00:11:25,260 --> 00:11:31,380 But if you are an expert and angular, try to download the code that I'm attaching to this video and 141 00:11:31,410 --> 00:11:37,680 explore how that integration between log angular application and resource server is happening. 142 00:11:38,130 --> 00:11:40,800 So now I have started this angular application. 143 00:11:41,250 --> 00:11:43,050 You can see Easy Bank. 144 00:11:43,320 --> 00:11:48,450 This is the homepage and I'm clicking contact us notices. 145 00:11:48,810 --> 00:11:50,250 Notices were able to see. 146 00:11:50,250 --> 00:11:52,730 The reason is notices the backend. 147 00:11:52,740 --> 00:11:54,380 We put it as a permit. 148 00:11:54,390 --> 00:11:56,880 I'll now I'll click on login. 149 00:11:57,780 --> 00:12:04,620 So you can see here it is redirecting me to the login page of Key Cluck's over here. 150 00:12:04,630 --> 00:12:10,920 I just have to enter accounts one, two, three, four, five, and I'm entering Sinem. 151 00:12:11,460 --> 00:12:14,460 So it redirected me back to the dashboard. 152 00:12:14,460 --> 00:12:18,390 But unfortunately, I'm not able to see any output on my page. 153 00:12:18,660 --> 00:12:22,680 Let's try to go and see what is happening by going to that console. 154 00:12:23,010 --> 00:12:26,070 So here it is, clearly showing it's an cost issue. 155 00:12:26,430 --> 00:12:35,970 So we are trying to redirect from a port of 880 to 4200, which is a different port, different orison. 156 00:12:36,210 --> 00:12:39,150 So due to that, we are getting a cost issue. 157 00:12:39,450 --> 00:12:41,250 So how to resolve this cost issue? 158 00:12:41,520 --> 00:12:43,650 Let's go to the quick clock admin console. 159 00:12:44,130 --> 00:12:50,370 Go to the blind that we have created for Angular App, which is easy public client. 160 00:12:50,790 --> 00:12:58,800 So here, if you scroll down and our Web origins, you can mention valid artisan's that Google should 161 00:12:58,800 --> 00:13:05,220 consider and browsers should consider, so that the communication between two different applications 162 00:13:05,220 --> 00:13:10,590 like cloud to angular application will be allowed by browser. 163 00:13:10,800 --> 00:13:16,020 So you can see here, if we mention pless, it really aloh all kind of origins. 164 00:13:16,260 --> 00:13:20,650 Otherwise, we can mention the exact audism also for now, for our testing. 165 00:13:20,670 --> 00:13:22,510 I'm just mentioning bless. 166 00:13:22,950 --> 00:13:29,280 So once you mentioned the plus click on sale, now I'll try to go and open the page again. 167 00:13:29,640 --> 00:13:31,020 So I'm clicking login. 168 00:13:31,380 --> 00:13:36,090 You can see since I already logged in last time, the cookies are available inside my browser. 169 00:13:36,420 --> 00:13:38,700 It is not asking me to log in again. 170 00:13:38,970 --> 00:13:43,020 The login operation is successful and I am able to see the dashboard. 171 00:13:43,410 --> 00:13:48,420 So if you click on logout, the logout will happen and it will show the login page. 172 00:13:48,630 --> 00:13:51,930 So I'm just trying to again, login counts. 173 00:13:52,290 --> 00:13:53,460 One, two, three, four, five. 174 00:13:54,030 --> 00:13:57,210 You can see here that line tities there redirect. 175 00:13:57,210 --> 00:14:01,860 You want to use their code challenge method is their code challenges there. 176 00:14:02,070 --> 00:14:08,340 So all these values are getting from the quick log angular library. 177 00:14:08,760 --> 00:14:10,920 I didn't write any code to do that. 178 00:14:11,130 --> 00:14:14,580 So now you can see it landed on to the dashboard page. 179 00:14:15,060 --> 00:14:17,400 So now I'll try to click accounts. 180 00:14:17,850 --> 00:14:21,450 So it may can call to the backend and getting the response. 181 00:14:21,720 --> 00:14:25,830 Similarly for balance loans and cards. 182 00:14:26,160 --> 00:14:34,020 So now let's try to remove the road and see how the UI behaves for the user accounts and removing the 183 00:14:34,020 --> 00:14:37,090 role that this user has both. 184 00:14:37,110 --> 00:14:40,710 I'm removing admin and user. 185 00:14:41,010 --> 00:14:49,020 So now if I try to login again this time, my UI itself should catch that and should not display anything 186 00:14:49,020 --> 00:14:49,410 to me. 187 00:14:49,680 --> 00:14:55,000 So you can see here, there are no errors, but still I'm not able to see the page. 188 00:14:55,020 --> 00:14:59,240 The reason is I don't have enough roles to view that big. 189 00:15:00,140 --> 00:15:08,630 So let me add back those roles, once the roles are there, try to log in again so you can see now I'm 190 00:15:08,630 --> 00:15:12,110 getting a proper dashboard because I have access to it. 191 00:15:12,260 --> 00:15:18,500 So at this rate, you can also have a rule based mechanism control on the Angular site as well. 192 00:15:18,980 --> 00:15:25,910 But the key point that I want you to consider is that whenever you are trying to have an aligned application 193 00:15:25,910 --> 00:15:27,320 interacting with the resource. 194 00:15:27,320 --> 00:15:35,780 So it is very important to follow authorization code flow with the pixy method instead of exposing your 195 00:15:35,780 --> 00:15:38,930 client secret and client details to everyone. 196 00:15:39,590 --> 00:15:47,300 So with this, we are clear how to implement or to framework, even in the scenarios where Web UI application 197 00:15:47,300 --> 00:15:51,050 trying to interact with them, resource our string and the backend. 198 00:15:51,350 --> 00:15:51,800 Thank you. 199 00:15:51,800 --> 00:15:53,570 And I'll see you in that next lecture by.