Send a registration request with an HTTP service.
- [Narrator] In this chapter, we will get our first experience with authentication for ASP.NET Core and Angular. We will incrementally implement a working version of authentication over the next few chapters. You might have heard of the Identity framework for ASP.NET, but we will not be using that as it is far too complex for the simple system we will be making mostly from scratch, and with a few authentication packages from ASP.NET. At the end of this chapter, our Angular app will think it is able to authenticate even though we don't have all the components in place in our Back-End to do so.
And eventually by the end of this course we will then have a full authentication system both on the Front-End and on the Back-End. In order to register our new user in ASP.NET, the first thing we need is an Angular service which allows us to send over our form data to the Back-End. Let's go ahead and create a new Angular service. I'll call it auth.service.ts. Since it's a service, we know we will need injectables. So let's import that.
Then let's create the decorator injectable, and then export and create our class. Let's save that out and then let's register it with our main module.
And then I'll add it to the providers list on line 33. Next let's create a register function in the auth service class. It will take in a user that we expect to get from our forms so I'll put that in as a parameter. At this point we will need to call HTTP POST, so let's import HTTP and create a constructor to inject it.
Next inside our register, let's call HTTP POST, which as before will take in a URL and an object. Let's define the URL, which will be similar to the old URL. So let's just grab that from our web service. And I'll paste it at the top above the constructor. What will be different is instead of slash api, we'll have slash auth.
And now I can pass in that Base URL. And then let's add our register route to it. Next we will need to pass an object as the second parameter that will contain all of the data needed to create our new user. We will get this directly from our register form that we will pass in as the user parameter. So let's just pass user along. You can choose at this point whether you wish to use async/await with a Promise or an Observable to execute this HTTP POST.
I will be using the Observer Subscribe method. And although I'm not doing anything inside Subscribe, we do need to call Subscribe for it to execute. In just a quick fix this should be this.BASEurl. Next let's use our new auth service inside our registered component. Let's begin by importing this service.
Now let's inject it in the constructor. Then inside our on submit, on line 28, let's call our auth service dot register. And let's pass in the user register model data with form.value. Finally, let's finish off by creating a register button in our nav bar, since we currently have no way of accessing our register view.
Let's open up our nav component. Now let's add a button at the end with the text register. So I'll just copy this last button and paste it below on line nine. And let's modify the router link so that it takes us to register. And let's give this a try. If you go back to our home view, and then click on register, it'll take us to our register view. Since we don't have a Back-End register service, we can't actually test this.
So we will need to build that next.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.