Securing Angular Apps with OpenID and OAuth2

OpenID Connect and OAuth 2 allow your apps to use modern security protocols and to participate in a Single Sign-On (SSO) experience across multiple apps. This course will show you how to authenticate users and authorize access in your Angular apps.
Course info
Rating
(51)
Level
Intermediate
Updated
Jul 27, 2018
Duration
2h 30m
Table of contents
Course Overview
Angular App Security Big Picture
Authenticating with OpenID Connect
Authorizing Calls to Your Backend APIs with OAuth2
Enhancing the User Experience with Client Security Context
Description
Course info
Rating
(51)
Level
Intermediate
Updated
Jul 27, 2018
Duration
2h 30m
Description

Securing your Angular apps with modern, interoperable security protocols helps you ensure your apps are secure, and that they can participate in a Single Sign-On (SSO) experience across multiple apps that use the same identity provider. In this course, Securing Angular Apps with OpenID and OAuth 2, you will learn how to apply the OpenID Connect and OAuth 2 protocols to authenticate users and authorize their access to functionality and data in your apps. First, you will explore the security fundamentals and concepts you need to be aware of for Angular apps. Next, you will discover how to connect to your OpenID Connect identity provider for authentication. Lastly, you will successfully use and manage your OAuth 2 access tokens for authorization. When you are finished with this course, you will have a solid foundation for building your Angular apps with robust security and done in a way that lets you integrate with any OpenID Connect and OAuth 2 identity provider.

About the author
About the author

Brian Noyes is CTO and Architect at Solliance, an expert technology solutions development company. Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

More from the author
WPF Productivity Playbook
Intermediate
2h 57m
22 Aug 2016
Aurelia Fundamentals
Intermediate
8h 38m
4 May 2016
More courses by Brian Noyes
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, this is Brian Noyes, and welcome to my course, Securing Angular Apps with OpenID Connect and OAuth2. I'm a software architect with over 20 years of experience and have been working with Angular and other single-page application frameworks for over 5 years. I've seen many approaches to security, some good and some really bad. It's never been more important to make sure the apps you build and the data they manage are securer than it is today. There's also a growing expectation from users that apps will participate in a single sign-on experience for the user so they don't have to remember and use separate accounts for every app they work with. In this course I'll show you how you can use OpenID Connect and OAuth2 protocols to secure your Angular apps with the most modern, interoperable, standardized, and secure protocols, and ones that allow your app to be part of a single sign-on ecosystem of apps for your users. You'll see how to handle the authentication process, getting your users logged in, and authorization, or access control, to make sure users can only see and do what they're supposed to within your app and the back-end APIs that your app talks to. I'm really looking forward to showing you how easy it can be to do the right thing with security in your Angular apps.

Authenticating with OpenID Connect
Hi, this is Brian Noyes. In this module we're going to start drilling down into authentication with OpenID Connect. I'll cover a few more details of the protocols than I did in the first module and then we'll dive into starting to hook things up in the sample app. So first up I will review some of the reasons for adopting OpenID Connect for your authentication protocol. Next, I'll review the different authentication flows that are defined as part of the OpenID Connect protocol and we'll talk about which kinds of applications should use which. Then we'll dive into coding for the rest of the module, starting with the sample app you saw in the first module, but stripped down to just the raw functionality with no security hooked up yet. In this module we'll add the code to log on with an OpenID Connect identity provider and then later modules will expand on that with authorization code, token management, and managing the user experience based on the security context of the user. For brevity throughout the rest of the course I will often refer to the OpenID Connect Identity Provider as simply the IdP, for short, or STS for short, both terms are essentially equivalent. Likewise, I'll use OIDC as an abbreviation and quicker way of saying OpenID Connect.

Authorizing Calls to Your Backend APIs with OAuth2
Hi this is Brian Noyes. In this module we're going to focus on authorization with the OAuth2 protocol. I'll again start with some conceptual coverage of the protocol without getting too much in the weeds and then we'll spend most of the module working through demos showing you how to leverage the capabilities of OAuth2 in your apps. First, I'll cover a few more details about the OAuth2 protocol itself. You'll see that there's a lot of overlap with the OpenID Connect protocol details that I covered in the last module, which his not surprising since OpenID Connect is a derivative spec from OAuth2, which preceded it. Then I'll step through showing you how to start using the OAuth2 access token to authorize calls to your back-end, which also enables those services to filter data or restrict access to certain APIs or functionality based on the identity of the caller. Although this course is mostly focused on what you need to do in your front-end Angular app, you can't talk about authorization and access control without getting into some specifics about whatever back-end technology you're using for your APIs. So I'll be showing how to authorize calls, filter data, and enforce access control in the ASP. NET Core APIs that I'm using for the back-end of this course's sample app. But don't worry if you're going to be using something else on the back-end, the concepts and general approach are very similar regardless of what API stack you are using. Just the specific framework mechanisms and code will vary a bit.