Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect

Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect

• 1.
  1 Modern authentication solutionswith 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 OAuth2.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 OAUTH2.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) Registeredwith 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) Extensionof 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 PROTECTINGROUTES WITH GUARDS Page  52
• 9.
  9 What are Guards? Services Canget 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: Delegatingrights 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