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

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

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
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