In this video, learn about installing binaries into projects.
- [Narrator] In this video, I'm going to show you how to secure portions of your application behind a username and password using auth0. To do that, let's go back to auth0 and let's select clients from the left hand menu, and let's select our Angular-Azure client, and then if you scroll down towards the bottom you'll see a section that says Allowed Callback URLs. Enter http://localhost:5000callback. You see, auth0 actually hosts our login page, and when the user is done they'll be posted back with all their account info.
And this is the route that we want to post them back to while we're developing. Now that I've done that, I can return to my terminal window and I can install auth0. So let's open terminal. I'm going to clear my previous session and I'm going to type npm install --save auth0-js, as well as @types/auth0-js. Great. Now that that's installed, let's return to our project and let's go down to the views folder and open up home index.cshtml.
On line five, there is an attribute called asp-prerender-module. I'm going to remove this, although pre-rendering can give us some performance impacts, I don't want to have any unpredictable results in our demo today. Now that I've done that, I'm going to go back to angular, to the client app folder, and up where it says app, I'm going to create a new folder that's a child called services. And I'm going to go ahead and create a file in here that's typescript, and we'll call this auth.service.ts.
One of the things I like about auth0 is that they provide some quick start guides to help get us going, and that's exactly what we're going to do right now. If I scroll to the top of this page I'll see that the first option here says quick start. This is under clients, Angular-Azure, quick start. I'm going to select Angular 2, and there's a block of code here that I want to get because it actually has our credentials in it. So if I scroll down here where I see export class AuthService, let's grab this little lock of code right here.
This is going to be the start of our AuthService. I'm going to switch windows and I'm just going to paste that code right into my application. I do need to make one change, however, on line 14. We're running our application on port 5000, so make sure you make that change, otherwise you're going to get some unexpected results. Now that I've done that, I can press save, Ctrl+S, and I can go ahead and return to my app shared module from the app folder, and I can go ahead and import this service. So on line 12 let's do a new line and let's import our AuthService from './services/auth.service';.
And then now, let's go down to line 34 and let's add a new block here called providers, and in providers we're going to provide the AuthService. This is going to allow it to be injected into our components. Great. Now, let's open up our app components folder. Let's open up the fetch data folder, let's open up fetchdata.component.ts, and let's inject our AuthService. First we'll need to import it on line three. I will import the AuthService from '../../services/auth.service';.
Then I'm going to say inject the AuthService to the constructor, and then I'm going to move everything down, and on line 13 I'm going to say authservice.login. Now this is going to force the user to login every single time this component is showed. Now that's not super practical, but it's going to at least show us what the auth0 application does. Returning to our code. Let's refresh the page and see what we get. Okay, look's good on the home page.
I'm going to click fetch data, and I've been routed to auth0. Now, I've already logged in here with my username, so I'm going to go ahead and click that again, and now I have a session in auth0.
At the end of the course, you'll have skills to connect the popular Angular framework to key services in Microsoft ecosystem.
- Creating and configuring the Angular project
- Securing login
- Working with GitHub and Visual Studio Team Services
- Building APIs in .NET Core
- Securing .NET APIs
- Testing with Postman
- Building a .NET proxy from start to finish