Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,564 views

Published on

Talk vom AngularCamp in Barcelona, July 2016

Published in: Internet
  • Be the first to comment

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

  1. 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. 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. 3 One User - (too) many User-Accounts Folie 8 One Client - (too) many User-Accounts Folie 9
  4. 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. 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. 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. 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. 8 DEMO Page  50 PROTECTING ROUTES WITH GUARDS Page  52
  9. 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. 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. 11 Provider for Guards Page  57 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), FlightEditGuard, AuthGuard ]; DEMO Page  58
  12. 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

×