Join Alexander Zanfir for an in-depth discussion in this video Associate user with quiz and question, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] Now that we're able to make our post New Quiz end point an authorized end point, we can also get the user Id and user account through the token that's passed to the back end. At that point, we can easily say associate this new quiz with the user that tried to request posting it. To get that going, we'll need a little bit of set up. So let's go to our back end project and stop the server. The first thing we'll need to do is add the user Id to the JSON Web Token.
We can do that with something called a claim. So let's go above our signingKey on line 45 and add a new line. We'll call it claims, and we'll set it to new Claim, and we'll initialize it. But first, let's add the name space, Security.Claims. Then we'll add a new claim and we'll pass in JwtRegisteredClaimNames.sub for subject, which in this case will be the user Id.
Next, let's go down to where we create our jwt on line 54 and add our claim. Now, our user Id is embedded in the token itself, and when a new user registers, that Id will be held in that token on their browser, and then passed back to any secure request. Let's go to our quizzes controller where we have our secure request. In our post Quiz function on line 89, let's get the user Id.
We'll go down below the ModelState check, and we'll add a new variable for our user Id. We'll set it to HttpContext .User .Claims .First and then we'll get the value. Since we're adding only one claim, the user Id, to the claimed list, this will work just fine. But if you had multiple claims, once you start using this in a production environment, you would need a more elaborate set up.
Now to test this out, let's add a break point on line 98. Then let's go ahead and run this. Once it loads, let's go ahead and register a new user so that it contains the user Id claim in the token. I'll check that we got back a 200 okay with the account creation. Then let's go to our new quiz, and post the new quiz.
Our break point should trigger at that point, and if we hover over userId, we can see we are getting the user Id. The next thing we need to do is associate our new quiz with the user Id. Let's open up our quiz model inside our Models folder. In here, we'll need a new property that stores the user Id. Let's add that below title. It will be of type string, and I'll call it OwnerId.
Let's save that. Go back to QuizzesController. Then we'll set quiz.OwnerId to the user Id. To test this out, let's modify our Get Quiz function. Let's scroll up to line 27 where we get all our quizzes. We'll once again get the user Id from the token claims inside here, and then we'll modify our return on line 29 so we return quizzes where the user Id matches the owner Id on the quizzes.
In other words, we'll only get quizzes that we own since we'll only be able to edit quizzes that we own. The first thing I'll do is add the Authorize decorator. Then I'll add var, userId, HttpContext, User.Claims .First .value. Next, I'll modify the return with .Where, and I'll specify that we want the quiz.OwnerId to match or equal the userId, and that should be it.
Testing this will take a couple steps, so let's give it a try. We'll start the server, and since this is an in-memory server, we'll have to register again. Since all of the users that were previously created are now deleted, we got back our 200 okay on our account creation, now let's post a new quiz. Let's refresh, and we can see the new quiz. Then, let's register with another user.
Let's go back to the quiz list, and we can see it's no longer there. I'll try to post a new quiz from this B user. Hit for refresh or seeing the quiz, and so we can see that the quizzes are being held separately and tied to individual accounts. Next, let's take a look at how we can log existing users back in without having to constantly register new users.
- 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