Now we are all set to implement Bekesi operation called Ground Floor inside our angular application
so that it can interact with the key Glock's software to get the attraction code access token.
And by using that access token, my angular application can interact with my backend resource.
So what to get the resource details, as we discussed in the previous lecture, in the Pixy method.
The client application has to generate quarter verifier and quarter challenge, and this has to be generated
in a cryptographically manner so that my geek Luxo can use both of them to validate cryptographically
in order to pass operation code and access token to the client applications.
But this all sounds like a very complicated process, but it is not.
The reason is we don't have to do this all this quarter.
Verifier code challenge generation manually by writing the code.
There are already enough libraries available in order to do that.
Coming to Angular Library, we have an library called Geek Lock Angular.
Like you can see.
This package supports Angular and keep lock integration by providing out-of-the-box features like it
will only generate internally core verifier core to challenge for you.
And it will take care of interacting with the geek blocks of Web without the need of lot of coding from
the developer.
So this page has clear instructions to what this library does and how to install that inside your angular
application.
So in order to install inside your angular application, we have to run this command, which is NPM
install geek lock hyphen, angular space geek lock hyphen gious.
So once you run this command, you will get all the libraries that you needed for your angular application
to integrate with the geek.
So what was that?
This page also has clear explanation what kind of set up you have to do inside your angular app in order
to leverage these key Gloc Angular library.
So now coming to our angular application, the very first change that I have done is like mentioned
in the official library page.
First, I had to import app initializer from the angular core post that I should import to classes,
which is geek like angular module and geek love service from the geek like Angular Library.
Once that is imported, this is a very crucial function that I need to write, which is in Schilsky,
Glogg so far that I need to pass clock service as an argument.
So here you can see we are passing all the details of key log, like what is a base yooralla for my
key glogg, which is history to localhost 880 slash art.
And what is my real name, which is easy bank dough.
And what is a client activities?
Easy public client.
You can see here, I'm not passing any claim secret.
I am only passing client I.D. and under the INIT options, we have a pixy method approach, which is,
yes, 256.
And this has to match with what we choose under Gogglebox hour.
And coming to redirect, you are also we should make sure the redirect uara is matching with what we
configured in that key Glock's over, which is slash dashboard.
And we should also mention lawdy user profile at startups to false.
If you set this to draw by default without any action from the user, the very first space that will
be landed will be the login page.
But I don't want that to happen until unless the user click on the login action.
So due to that, I mentioned this property as false.
So don't worry if you don't understand all this angle related stuff.
But this just hand knowledge that I want to provide.
So in future, if you are building an Web application based upon equity, are angular, react, any
other library, you know that what is a process and based upon the language that you are working.
You can always search for corresponding libraries that support Kikla like integration and follow this
approach.
So I'll also attach all this angular code to this video for your reference.
So most of this application is very similar to what we are discussing in the previous lectures and sections
of this course.
So I just made some changes to integrate with the key clock, Utsav, by leveraging the key clock angular
library.
So once we write this function in Schilsky clock, we should come to that NJI module declaration.
So here under the imports, we should make sure we are importing Kikla.
Module and coming to providers, we should declare the providers like providing the to app initializer.
And what is a fact that we want to insulin's, which is in Schilsky cloud method that we defined in
the top and dependencies is key cloud service and multi is equal to true.
So these configurations you have to provide.
So once this basic configuration is done in the app, what derby is the very next to file that I want
to show you Yi's Huerter component dartez to Yemen.
So in order to understand this header, that component part has steam.
And let me show you that you web page of this angular application.
So it is pretty much similar, except that I remove the sign in page, because first I want to show
it to the user.
What is the homepage?
And when he click on the login page, he has to be redirected to the key Gloc login page.
So due to that is and I have some good homepage and whatever you see in the top is coming from the header
dart hits Tiamat.
So there is a whole login contactors notices, dashboard and logout.
So few tabs like dashboard logout will be shown only if the user is authenticated by looking at the
chart status variable is equal to auth if the user is not logged in.
We will show home login, contact us notices.
So if we see here for login on click, I mentioned it has to invoke the login method.
Similarly for logout, it has to invoke on click logout method.
So where do we define this method is inside the component of header.
Like you just have to look for the header component that piace.
Here you can see first I had to import the classes from the Dekalog Angler, which is the clerk's office
and Kikla profile.
So here under login, I just how to invoke the login method of keek lock service provided from the library.
So these internally take care of everything, like getting an authorization code from the key clerks
over by passing that code challenge.
And once I get the operation code, it will also pass the code verifier so that my key club server can
do an access token.
So all this will happen inside the library when you call the login method.
Similarly, if we want to lagat, you just have to invoke the logout method.
And the next important file that I want to show you is the routing configurations that allow that.
Like if you see by default, the homepage will be shown to the user.
Like if someone tried to interact to my application without giving any part like just simple localhost,
four thousand two hundred, then by default, homepage will display.
And every part has its own component defined.
And you can see certain parts like dashboard.
My account, my balance, my loans, my cards.
These are protected parts which are protected by using a class called Autarchic Clubcard.
And here I'm also having role based access like dashboard can be viewed by someone who have a role like
users and admin.
And of course, someone can fool my UI application by changing this code.
But since I have a second level check in the backend also, it should not be a problem.
Even someone changes that.
So this kind of role based a code on the new way at least will reduce some burden on the back.
And so do not pass the requests, which are not part of that role based access mechanism.
So let's try to go and see what is present in the object log.
So this is, again, a custom class that I have written by extending that kik lock out the card.
So key look at the card, which is from the library.
Again, provide some out-of-the-box features like it will hold the information, like whether the user
is authenticated, and it will also hold a user profile detail once the user is authenticated.
So you can see here, whenever a person is trying to access a protected page, are protected.
But this guard will invoke.
And here you can see Foster will check whether the user is authentic later.
If not, show him the login page.
And if the user is authenticated, we will check the status variable to art so that our header component
will use that to display corresponding taps.
And similarly, we will also get the first name and email details of the user from the user profile
that is provided by my Dekalog Angular Library.
So those details I will stored inside and user and set it in position storage so that I can use them
in other components and other places of the application.
And this is the place where we do.
Rule based to check, like you can see first what rules this rule should accept.
I'll get from Raut dots Datadog rules like if a user trying to access a slash dashboard part, I will
get all the rules required for that part, and that can be present inside these required rules.
And at the same time, if the record rolls is empty, which means the pad does not have any role Pastner
mechanism, I can simply return true.
But if the requite rules has some rules, I will check at least one of the rule should match with the
the rules that I'm getting from the geek Luxo.
So these dark rules is coming from the key clock Odegaard.
So if you click on the start rules here, you can see this is coming from the library file, which is
key block at Gaudiest.
So this way, Geek Lock Angular Library provides all the out-of-the-box features.
And in fact, you don't need any interceptor also to pass that access token every time to the resource
server in the backend, because the library will take care of it internally.
So now we discuss all the important changes that we have done inside this angular application.
But don't worry, if you don't have knowledge on Angular, please ignore it.
Please understand only the concept that I'm trying to explain here.
But if you are an expert and angular, try to download the code that I'm attaching to this video and
explore how that integration between log angular application and resource server is happening.
So now I have started this angular application.
You can see Easy Bank.
This is the homepage and I'm clicking contact us notices.
Notices were able to see.
The reason is notices the backend.
We put it as a permit.
I'll now I'll click on login.
So you can see here it is redirecting me to the login page of Key Cluck's over here.
I just have to enter accounts one, two, three, four, five, and I'm entering Sinem.
So it redirected me back to the dashboard.
But unfortunately, I'm not able to see any output on my page.
Let's try to go and see what is happening by going to that console.
So here it is, clearly showing it's an cost issue.
So we are trying to redirect from a port of 880 to 4200, which is a different port, different orison.
So due to that, we are getting a cost issue.
So how to resolve this cost issue?
Let's go to the quick clock admin console.
Go to the blind that we have created for Angular App, which is easy public client.
So here, if you scroll down and our Web origins, you can mention valid artisan's that Google should
consider and browsers should consider, so that the communication between two different applications
like cloud to angular application will be allowed by browser.
So you can see here, if we mention pless, it really aloh all kind of origins.
Otherwise, we can mention the exact audism also for now, for our testing.
I'm just mentioning bless.
So once you mentioned the plus click on sale, now I'll try to go and open the page again.
So I'm clicking login.
You can see since I already logged in last time, the cookies are available inside my browser.
It is not asking me to log in again.
The login operation is successful and I am able to see the dashboard.
So if you click on logout, the logout will happen and it will show the login page.
So I'm just trying to again, login counts.
One, two, three, four, five.
You can see here that line tities there redirect.
You want to use their code challenge method is their code challenges there.
So all these values are getting from the quick log angular library.
I didn't write any code to do that.
So now you can see it landed on to the dashboard page.
So now I'll try to click accounts.
So it may can call to the backend and getting the response.
Similarly for balance loans and cards.
So now let's try to remove the road and see how the UI behaves for the user accounts and removing the
role that this user has both.
I'm removing admin and user.
So now if I try to login again this time, my UI itself should catch that and should not display anything
to me.
So you can see here, there are no errors, but still I'm not able to see the page.
The reason is I don't have enough roles to view that big.
So let me add back those roles, once the roles are there, try to log in again so you can see now I'm
getting a proper dashboard because I have access to it.
So at this rate, you can also have a rule based mechanism control on the Angular site as well.
But the key point that I want you to consider is that whenever you are trying to have an aligned application
interacting with the resource.
So it is very important to follow authorization code flow with the pixy method instead of exposing your
client secret and client details to everyone.
So with this, we are clear how to implement or to framework, even in the scenarios where Web UI application
trying to interact with them, resource our string and the backend.
Thank you.
And I'll see you in that next lecture by.