Talk vom AngularCamp in Barcelona, July 2016

1. 1
Modern authentication solutions with OAuth 2.0,
OpenId Connect and Angular
Manfred Steyer
ManfredSteyer
About me …
 Manfred Steyer
 SOFTWAREarchitekt.at
 Trainer & Consultant
 Focus: Angular
Page  3
Manfred Steyer

2. 2
Contents
Motivation
Overview of OAuth 2.0
Overview of OpenId Connect
DEMO
Guards in the newest new Router
DEMO
Folie 6
MOTIVATION
Page  7

3. 3
One User - (too) many User-Accounts
Folie 8
One Client - (too) many User-Accounts
Folie 9

4. 4
OVERVIEW OF OAUTH 2.0
Page  10
What is OAuth?
Developed at Twitter and Ma.gnolia
Standard for the delegation of (restricted) rights
Used by companies like Google, Facebook, Flickr,
Microsoft, Salesforce.com and Yahoo!
Folie 11

5. 5
Roles
Folie 12
Client
Authorization-Server
Resource-ServerUser
(Resource-Owner)
Roles
Folie 13
Client
Authorization-Server
Resource-ServerUser
(Resource-Owner)
Registered with
client_id,
client_secret,
redirect_uri Registered with
Credentials

6. 6
High-Level-View
Folie 14
Client
Authorization-Server
Resource-Server
1. Redirection
2. Redirection
3. Access-Token
Details depend on flow Central User-Accounts
Only Auth-Server gets pwd.
Access-Token
Auth is decoupled
Token: Flexibility
No Cookie: No CSRF
AUTHENTICATION
Page  39

7. 7
OpenId Connect (OIDC)
Extension of OAuth 2.0
Defines how to use OAuth 2.0 for Authentication
Defines how to query User Profile
Client also gets ID-Token
 JWT-Token with information about user
 Can be signed by the issuer
Shuts down some security holes
Folie 45
OIDC
Folie 46
Authorization-Server
Client 1 Service 1
Access-Token
ID-Token
/service-url + Access-Token

8. 8
DEMO
Page  50
PROTECTING ROUTES
WITH GUARDS
Page  52

9. 9
What are Guards?
Services
Can get other services via DI
Router triggers Guards before activating/
deactivating Components
Can prevent activation/ deactivation
Page  53
Guards
CanActivate canActivate
CanDeactivate<T> canDeactivate
Result: boolean | Observable<boolean>

10. 10
Configuring Guards
Page  55
const APP_ROUTES: RouterConfig = [
{
path: '/flug-buchen',
component: FlugBuchenComponent,
canActivate: [AuthGuard],
children: [
{
path: 'flug-edit/:id',
component: FlugEditComponent,
canDeactivate: [FlightEditGuard]
},
[…]
]
]
Token
Provider for Guards
Page  56
export const APP_ROUTER_PROVIDER = [
provideRouter(APP_ROUTES),
{ provide: FlightEditGuard, useClass: FlightEditGuard },
{ provide: AuthGuard, useClass: AuthGuard }
];

11. 11
Provider for Guards
Page  57
export const APP_ROUTER_PROVIDER = [
provideRouter(APP_ROUTES),
FlightEditGuard,
AuthGuard
];
DEMO
Page  58

12. 12
Conclusion
OAuth 2.0: Delegating rights
Implicit Grant for SPA
OpenId Connect: Authentication with OAuth 2.0
Central User-Accounts
Only Auth-Server gets password
Folie 59
manfred.steyer@softwarearchitekt.at
ManfredSteyer
www.softwarearchitekt.at
Contact