Lecture thumbnail 0:01 / 12:09 Okay, just I have added the comments for this method for each line of the code.
I have just briefly explained what is happening in each particular code,
so you can use it for your reference. Anyway, no code changes, only the comments added.
Now, we have created the create JWT token method and we have to call the same while
logging in as well as registration in the account controller. So, go to the account controller,
go to the register DTO post method. Here, after successful registration,
especially at the time of login, I mean at the time of automatic login after registration,
you have to generate the token and return the same as response.
To do so, we have to inject that particular service, isn’t it? So, go to your program.cs file,
add the same as a service. So, somewhere, anywhere, either at the top, middle or bottom,
you can add services.addtransient. We are going to add a service, that is
IJwtService and implementation of the same is JwtService.
So, we have added this service to the IoC container.
Import the corresponding namespaces, that is citiesmanager.core.services and service contracts
also. So, you can inject this IJwtService anywhere that you want. Go to the account controller,
in the constructor of the account controller, try to inject the same.
I want IJwtService and import the corresponding namespace, that is service contracts.
Oops, it is core.servicecontracts and inject the same over here. Here, you will just mention the
interface name, only the contract and initialize the same into underscore JwtService. So, you can
use this private field wherever you want. Again, go back to the post register method.
After successful creation of the user, here exactly you want to generate a token.
Hey, JwtService, create a token for me and I am supplying the user object.
So, it reads the person name, user id and corresponding details. As defined in this particular
service, it generates and returns the token as authentication response object. So, we will receive
this authentication response object here. Let’s receive the same and return the same to the client.
That’s all. So, this includes only person name, email, token and expiration date, but doesn’t
include any other unnecessary information. It’s good. Exactly in the same way, repeat the same
two lines of code for login as well. So, go to your post login method. After successful password login,
here exactly I would like to call that JwtService. So, copy pasted the same code and return the
authentication response, which includes with the person name, email along with token.
That’s fine. So, we have done with the modification of the account controller.
It just invokes that method and returns the token here. So, this authentication response includes
with the person name, email, token as well as expiration four properties. And this is what the
data that is required for Angular application, especially token is the most important part.
Okay, next after that, we have to receive this particular token and store it in the local memory
in the client application. Go to the Angular application. For example, open up your login
component.ts file. Here in the next arrow function after successful login, we have the properties of
authentication response object in this response. So, we have to store the same here in the local
storage. I would like to store the details of the token and the response now includes with the token
as well. Okay, since the response is mentioned as a login user type, the compiler doesn’t allow us
to read this token property. Let’s mention the same as any data type. And even in the account
service also, I mean in the Angular application, let’s mention the return type as any data type
observable of any for registration as well as login. Optionally, you can also create authentication
response kind of class in the client side as well, which is optional, which we are not doing here.
If you want, you can create a model class in the Angular application with these properties.
Okay, we can simply mention the same as any. So, for post register as well as post login, the return type
is any. Make sure you mentioned it correctly, but the argument data type doesn’t change.
This is the request body and any represents the response type. That’s fine. So, come back to the
login component TS file. We are receiving the response and assigning the same into the local storage
as a token property here. The local storage is used to store custom data as a part of the browser
memory itself, which is not revealed outside the browser process. Do the exact same thing at the
time of registration as well. So, go to the register component TS file. After successful
registration, I mean in the next arrow function,
here exactly you can store the response.token and store the same in the local storage.
You can mention the return type as any. That’s fine. So, run this application by using ng serve.
It has no errors. That’s fine. Also, run the ASP.NET core application.
Enter the login details. As per my machine, it is harsha123 is the password.
At your practice time, you have to register yourself by using the registration page.
So, click login. We made a request and that request is received by the post login
account controller action method and we have received the same email address and password
values. And of course, the validation is correct here. Since it is validated,
we will enter into the true block and create the user object, sign in the same.
After sign in, we are going to call the create JWT token method,
which is the part of the JWT service. Let’s press F11, step into. So, we are on the create JWT
method and we have received the user object over here, which includes the email ID and
any other details. We have created expiration date, that is 10 minutes after the current system time
and created claims array, created security key, which contains the actual key,
that is the byte array form of the actual key that was written in the configuration.
At production scenarios, you have to store the same as environment variables
at user level or at the process level. So, we have created a token generator
and token handler. The token handler receives the token generator object
and the token generator object contains details of all these above mentioned properties and
configuration and based on which finally the token gets generated, when you call this write
token method. Now the token is ready and this is the one that we are looking for.
See, this is the token. So, this token contains three parts, the header and then the payload
up to this and then the signature. Just for your understanding, I’m just writing the same in
multiple lines. It is a single string value. So, this is the token that is generated on the server
and the next part is that we have to send the same as a part of the response to the client.
So, we are including this token as a part of the authentication response object
and the same we get back here. It contains person name, email, expiration as well as token.
Now, we will return the same as response and now this is the moment. We have successfully
received that response here. So, if you click on this login, the payload includes the email
and password which is the request body and the response contains the person name, email
as well as token. The same token what we have seen before a moment.
Of course, expiration date and time value also. This is optional but the token is the most
important part and we are going to store the same as a part of the local storage, right?
You can investigate the same here. So, just go to the application tab here in the browser
development tools, go to the local storage, expand the same and here you can see your domain
that is 4200. Now, you can see the stored value that is token and this is the token value.
So, in this way, we have generated the token on the server side, sent the same as response to
the browser and stored the same for future usage in the local storage within the browser memory.
This token value is visible to the user, of course, but programmatically it is unable to
be accessed from any other browser tab. For example, the user has opened another browser
tab with www.example.com. So, from that particular domain page, programmatically also,
this particular token value cannot be accessible. That is the security that is provided by the
browsers as inbuilt feature. So, this token value is only accessible by the code that is running
on the same domain. So, so far we are able to generate the token and the next part is that
we have to send the same token as a part of the request header and we have to validate the same
at the server side. We will try to do that in further lectures.
Play Play Play Play Play Play Play Stop Play Play Play Start Start Start