securing-angular-apps-with-openid-and-oauth2
Chapter 01 - Course Overview
Lecture 101 - Course Overview
Course overview
Chapter 02 - Angular App Security Big Picture
Lecture 201 - Introduction
Course overview
Prerequisites
Module overview
Lecture 202 - Security Design Considerations
Security design consideration
- This course forcus on authentication and authorization
Transport protection
- Simple use https everywhere
About cors
About csrf
Csrf and oauth2
- With oauth2 we covered csrf because jwt explicitly put into header of any http request
About xss
- User input script block
Xss and angular
- Angular see data binding or data input to the DOM as untrusted, so it will sanitize or escapse parts of the values that contains sth like a script block that could be executed
Lecture 203 - Client vs. Server Security
App security
Lecture 204 - Angular App Security Architecture
Traditional authentication architect
Openid oauth2 authentication architect
- Separate of concernt login action
Lecture 205 - Authentication and Authorization
Authentication
Authentication
Authorization
Lecture 206 - Terminology
Terminology
- STS means security token service
- User agent is basically the piece of software the user is directly interacting with. This might be your client application in the browser, or even the operating system, if using built-in mechanisms for native apps to collect credentials outside of your app.
- Client is your app
Lecture 207 - OpenID Connect And OAuth 2 Protocols
Ouath
Openid connect
Lecture 208 - Identity Provider Options
Identity providers
ADD
Identity as a service providers
Identity server 4
Lecture 209 - Client Library Options
Client Library Options
Lecture 210 - A Tour Through the Demo Application
Login page
- We have several accounts, each have its role
Chapter 03 - Authenticating with OpenID Connect
Lecture 301 - Introduction
Module overview
Term for this course
Lecture 302 - Why Use OpenID Connect
Why openid connect
Lecture 303 - JWT Tokens and OpenID Connect Flows
The content
Jwt token types
Openid connect flows
- Odic defines three flows as picture
- The implicit flow is focused on this course, two first flows not used for angular app because it shared the secret key
Lecture 304 - A Word About the oidc-client Library
Using the oidc client
Lecture 305 - Getting Started with the App Code
App code at beginning
- Anybody can manipulate object
Lecture 306 - Getting the Client App Running
Lecture 307 - Getting the Back End Code Running
Lecture 308 - Adding oidc-client and an Authorization Service
Demo
Install oidc lib
Vs code tip
- This installed angular snippet, so when type "a-" a list of available template appear. let choose a-service-httpclient
A template
Constant class
Create UserManager
Lecture 309 - Adding Login to the App
Login method in service
Call the login method in component class
- Of couurse, we must declare the service in core.module.ts
- And the template has a button bind onclick into this method
Login page
- When click on login button on angular app, browser redirects to login page of STS for user login
- There are several requests behind the screen
Seeing two first requests
- This is Fiddler tool
- The first request is /.well-known/openid-configuration
- The second is the authorization endpoint
Seeing request for login action
- After login successful, STS redirect to page we specified before with id_token and access token
Click login after login
- STS will redirect to homepage again
Lecture 310 - Adding the Post-login Redirect Page
Reason to add separated login redirect page
- The cleanest and safest way to handle the redirect back to your application is to do it in a separate page from the one hosting your Angular app. There are a couple of reasons for this. The first is that is can be a little complicated tapping into the routing system as your app is just starting up to harvest the tokens from the redirect from the STS. The other is that you really want to check and see if the login process completed successfully before even relaunching your Angular app and paying the overhead of getting your app to fully load and run again.
Login redirect page
- This is static html page
- We use oicd lib to collect the returned tokens, save them in localStorage, then redirect to angular app
Lecture 311 - Creating the User Object and Checking Logged In Status
Update service code to
- Store the user obj in _user
- Adding logout method
- Let add logout button and implement onclick for this button to call the service.logout()
- Method isLoggedIn to check if user is logged in
If condition to show appropriate button
- When user click on logout button to logout, app will redirect to STS for a moment to kill the session, then reload home page
- In this case, app must clean the token stored in local storage
- To do that we put a parameter in the url from STS to know this is a result of a redirect from logging out at the STS
POST logout url
- We modify STS code to updaate post-loggout url
Update code to handle post-loggout
- In init method, we check if user entering app by logging out we call the appropriate method in service class
- This code have not initialized _router, leet do it in constructor
The signout redirect callback in service
- UserManager will clean out the items in the storage
LocalStorage after login
- Login info in here
LocalStorage after logout
- Login info are gone
Lecture 312 - Inspecting JWT Tokens
Update code to get the token
- App will not redirect to "/" (home page)
After login
- The token is in the url, let copy it
The url info
Viewing id-token jwt in jwt.io
- Attr nonce is indetifier session
Viewing access-token jwt in jwt.io
- Aud is an array
Lecture 313 - Switching to Auth0 and Setting up Tenants, Apps, Users, and APIs
Demo content
Provider
