Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Login and Access-Control with Angular: Talk from ngPoland, Warsaw 2017

Login and Access-Control with Angular: Talk from ngPoland, Warsaw 2017

Login and Access-Control with Angular: Talk from ngPoland, Warsaw 2017

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

November 21, 2017
Tweet

Transcript

  1. Login & Access Control in Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

  2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Fokus: Angular • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
  3. Contents • Motivation • OAuth 2 • Single Sign on

    and OpenId Connect • Social Login • DEMO • Single Sign out
  4. Motivation

  5. Access to App and Backend

  6. Requirements for Modern Apps Service delegates to other services Cross

    Origin Requests Using existing Identity Solutions Loosely Coupling to Identity Solution Single Sign on/ out Protect from XSRF
  7. Traditional Solutions don't work (well) HTTP Basic & Co. Cookies

  8. None
  9. Roles Folie▪ 10 Client Authorization-Server Resource-Server

  10. Flow Folie▪ 11 Client Authorization-Server Resource-Server 1. Redirection 2. Redirection

    w/ Access-Token 3. Access-Token One central user account Only Auth-Svr. sees the Password Auth. decoupled from Client Tokens provide flexibility No Cookies: No XSRF
  11. Authorization Server === just some endpoints ;-)

  12. Roles Folie▪ 13 Client Authorization-Server Resource-Server

  13. Roles (simplified Scenario) Folie▪ 14 Client Resource-Server Auth. Endpoints

  14. Lots of Auth Server out there … Active Directory Federation

    Services Identity Server (.NET) Readhad Keycloak (Java) Okta Auth0 Firebase Azure Active Directory … On Premise Identity as a Service
  15. OAuth 2

  16. What is OAuth 2? • Developed by Twitter and Ma.gnolia

    • Protocol to delegate restricted rights • Used by Companies like Google, Facebook, Flickr, Microsoft, Salesforce.com or Yahoo! • Several Flows for different use cases • Leverages HTTPS! Folie▪ 17
  17. Implicit Flow for SPA Folie▪ 18 Client Authorization-Server Resource-Server 1.

    Redirection 2. Redirection w/ Access-Token 3. Access-Token
  18. Popular Attack Folie▪ 19 Client Authorization-Server Resource-Server 3. Access-Token 2.

    Access-Token
  19. Implicit Flow for SPA Folie▪ 20 Client Authorization-Server Resource-Server 1.

    Redirection + Nonce 2. Redirection w/ Access-Token + Same Nonce 3. Access-Token
  20. Single Sign on Page ▪ 21

  21. SSO with OAuth 2 Folie▪ 22 Client Authorization-Server Ressource- Server

    3. /user/profile + Token 1. Request Token { "user_name": "susi", "email": "susi@sorglos.at", … } 2. Token &scope=profile Not defined by OAuth 2.0
  22. Implicit Flow w/ OIDC Folie▪ 23 Client Authorization-Server Resource-Server 1.

    Redirection 2. Redirection w/ Access-Token and Id-Token 3. Access-Token User Info Endpoint (OIDC) Format: JSON Web Token (JWT)
  23. Social Login Page ▪ 25

  24. Implicit Flow Folie▪ 26 Client Google, Facebook, etc. Resource-Server 1.

    Redirection 2. Redirection w/ Access-Token and Id-Token 3. Access-Token Security Domain of Google, Facebook etc. Your Security Domain
  25. Implicit Flow Folie▪ 27 Client Your Authorization Server Resource-Server Redirection

    w/ your Access-Token and your Id-Token Access-Token Google, Facebook, etc. Their Token
  26. Demo • Angular • angular-oauth2-oidc • OIDC Certified • Identity

    Server in Cloud
  27. DEMO

  28. Single Sign out

  29. Single Sign out Folie▪ 39 Client B Authorization-Server Resource-Server 1.

    Sign out 2. Sign out Client A
  30. Open channel to Client? • Websockets • Server Send Events

    • Hidden iframe (Forever-Frame) • OIDC Session Management
  31. DEMO Page ▪ 41

  32. Fazit Token: Flexibility, Cross Origin … OAuth 2: Access to

    Service OpenId Connect: SSO at Client Token per Security Domain Implicit Flow Single Sign out
  33. Contact und Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer