Angular Security Using JSON Web Tokens

Applications must take security into account. Learn how to add security to your Angular applications using JSON Web Tokens, claims, and the .NET Core Web API.
Course info
Rating
(51)
Level
Intermediate
Updated
Apr 2, 2018
Duration
2h 50m
Table of contents
Course Overview
Review and Install the Sample Application
Authenticating a User
Secure UI Elements and Guard Routes
Call Web API to Authenticate and Authorize
Use JSON Web Tokens to Secure Web API Methods
Working with Bearer Tokens in Angular
Using Claims-based Authorization
Description
Course info
Rating
(51)
Level
Intermediate
Updated
Apr 2, 2018
Duration
2h 50m
Description

Applications must take security into account, and Angular applications are no exception. In this course, Angular Security Using JSON Web Tokens, you will create an authentication system and an authorization system that can be used on both the client side and the server side. First, you will learn how Angular applications must have secure UI elements on the client side, and secure your Web API calls on the server side. Then, you will use Angular, Visual Studio Code, JSON Web Tokens, claims, roles, and a .NET Core Web API to secure your Angular applications. By the end of this course, you’ll know exactly how to implement a flexible, claims-based security system, you can use in a small, medium, or large Angular application.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Building Reusable Angular Services: Logging
Intermediate
1h 50m
20 Oct 2017
More courses by Paul Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone, my name is Paul Sheriff, and welcome to my course, Angular Security Using JSON Web Tokens. I'm a business solutions architect at Fairway Technologies with over 32 years of experience creating enterprise applications. If you are like me, you've struggled to find good information about how to create a security system for your Angular applications. If so, then this course is for you. In this course, you're going to learn to create a security architecture for your simple or your enterprise type applications. You do this by learning to create a claims-based security architecture to secure your UI elements, as well as your Web API method calls. Some of the major topics we cover include authenticate a user, secure UI elements and guard routes, use JSON web tokens to secure your Web API methods, create a claims-based authorization system using JSON web tokens. By the end of this course, you'll know exactly how to implement a flexible claims-based security system you can use in the small, medium, or large Angular application. Before beginning this course, I'm assuming you're familiar with Angular, TypeScript, and the Web API. I hope you'll join me on your journey to create an Angular security system in my course, Angular Security Using JSON Web Tokens at Pluralsight.

Review and Install the Sample Application
Hello everyone, Paul Sheriff here with Pluralsight. This course is Angular Security Using JSON Web Tokens. This module is Review and Install the Sample Application. Now the goals for this particular course are to create two different security scenarios. One we're going to first start out with applications with small security requirements, then we'll turn our attention to enterprise applications. That's where we're going to get into the JSON Web Tokens. But first off, we're going to learn how to authenticate and authorize users. We're going to then learn how to secure UI elements, and we're going to learn how to protect navigation with route guards. We're then going to create a Web API and secure it using the JSON Web Tokens, and then finally, we'll learn how to bring it all together with claims-based authorization.

Authenticating a User
Hello everyone, Paul Sheriff here with Pluralsight. This module is Authenticating a User. Now the goals for this particular module are to create a user and a user authorization class, create our login mocks that we can authenticate against, create a security service that will return our authorization class, and of course, create a our login page. Let's get started. Let's review our security architecture using mocks. We're going to build the login page and we're going to build this user class that has a username and a password in it. We're also going to build our security service and we're going to build an array of mocked logins that we can validate against. We're then going to return an authorization object from this security service, and we're going to use that then to turn menu items off and on, like the Products menu, the Add New Product button, and the Categories menu.

Secure UI Elements and Guard Routes
Hello everybody! Paul Sheriff here with Pluralsight. This module is Secure UI Elements and Guard Routes. The goals for this particular module are to make menus invisible or visible, based on that user authorization object we created in the last module. We're going to also look at making buttons visible and invisible. We're going to also prevent direct navigation to a route by adding in route guards, and we're going to redirect to a login page if the user tries to access a route they can't get to in order to ask them for credentials that could be used to get to that particular route. Let's get started.

Call Web API to Authenticate and Authorize
Hello, this is Paul Sheriff with Pluralsight. This module is Call the Web API to Authenticate and Authorize. The goals for this module are to look at the SQL Server security tables that hold our users and our claims. We'll build Entity Framework classes to access those SQL Server security tables. We're also going to build an application user authorization class that will get returned from our call to the Web API. We're going to build a security manager class, and this is the class that actually goes out and gathers the data from SQL Server, validates the login, things like that. We're also going to build a security controller class. And we're then going to call all of this from Angular to be able to authenticate from Angular through the Web API. Let's quickly review our security architecture that we're going to use for the Web API. We've already created our login page and our user object in Angular. That's not going to change. But we are going to modify our security service now, and that security service is now going to call the Web API instead of using those mock logins. The Web API is going to access our SQL Server, in which there are two tables. The user table, and the user claim table. Then we're going to build an authorization object. This object looks exactly like the one that we built in Angular, and this is what then gets returned from the Web API back to our security service. So, let's go ahead and get started.

Use JSON Web Tokens to Secure Web API Methods
Hello, Paul Sheriff here with Pluralsight. This module is Use JSON Web Tokens to Secure Web API Methods. The goals for this particular module are to secure the Web API with the authorize attribute, set up JSON Web Tokens, read JSON Web Token settings from a configuration file, build a bearer token and send that to Angular. Let's get started.

Working with Bearer Tokens in Angular
Hello, this is Paul Sheriff with Pluralsight. This module is working with bearerTokens in Angular. In the last module, we saw how to send bearerTokens to the Angular application; now we're going to learn how to pass those bearerTokens back to the server so that we can be authenticated. We're going to also see how to create an HTTP interceptor, so that we don't have to write code to do it on every single call, and we'll also talk about adding a security policy to our Web API calls, so that we can restrict each Web API call by a certain claim or a role. Let's get started.

Using Claims-based Authorization
Hello, this is Paul Sheriff with Pluralsight. This module is Using Claims-based Authorization. The goals for this module are to use an array of claims instead of individual properties like we have been using. This will make our security system a little more flexible and support a large amount of claims for enterprise-type applications. We're going to modify these Angular classes to take advantage of this new way of doing this. We're going to modify our C# classes on the Web API to also take advantage of these new changes. We're also going to build our own structural directive that we are going to call hasClaim that we can now add to take away complete menu items or buttons or any UI element that we want on the DOM. Let's get started.