Join Alexander Zanfir for an in-depth discussion in this video Save token in the browser, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll create our register service function in our frontend, in order to send our register data to the backend. If you look at api service, it's getting quite big. So I wouldn't want to put any authentication calls inside here. Instead, let's create a new service for authentication. So I'll add a new file to our app called auth.service.ts. Then let's copy our api service, and paste it in as a template.
I'll get rid of the observable properties above the constructor between line eight and 12. And I'll rename the class to auth service. And then I'll get rid of all but one function from inside the class. And I'll rename this to register. And this will take in credentials. Then instead of http.get on line 11, I'll change that to post and I'll update the URL with api/account and we won't need a URL parameter so I'll get rid of that.
And then we'll pass in object credentials as a second parameter. Then instead of returning this as an observable, I'll subscribe to it here. And our response should contain the token. So we'll use local storage.setitem and call the key in our local storage, token as the first parameter and then pass the value for the second, which will be response. And currently response is an object, so we'll need to set that to any by specifying the type on line 11.
And now we can save that as a string. Then let's go back to our register.html and instead of calling our register function on line two, we'll call auth.register and we'll pass in the form.value as the object. Let's save that and then let's open our register component. We can get rid of our register function and instead of injecting our api service, we'll need to inject our auth service. So let's start by changing the import on line three.
And then updating the constructor. Finally, let's register our auth service with the app module. So let's add it below line 23. And then add it to our providers on line 58. Let's save that and then give it a try. And remember, we need to have a complex password for it to work, so I'll use capital A-B-C 1-2-3 and an exclamation.
Let's hit register. And it looks like we got back a 200 OK for our account as a token. And if we check our application tab under local storage, and then the app URL, we can see we have a token key with a value. Now that we're saving the token, let's see how we can pass it back to our backend with every http request, which will be required for secure requests or requests that need authorization. Let's take a look at that next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework