SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
1
Moderne Authentifizierungslösungen mit
OAuth 2.0 und AngularJS
Manfred Steyer
ManfredSteyer
Page  3
Aktuelles Buch
2
Ziele
Möglichkeiten bezüglich SSO und Delegation mit
OAuth 2.0 und OpenId Connect (OIDC) kennen
lernen
Möglichkeiten zur Nutzung mit JavaScript und
AngularJS kennen lernen
Folie 6
Inhalt
Motivation
Überblick zu OAuth 2.0
SSO mit OAuth 2.0
OpenId Connect
DEMO
Folie 7
3
MOTIVATION
Page  8
Ein Benutzer - zu viele Konten
Folie 9
4
Clients benötigen Zugriff
Folie 10
ÜBERBLICK ZU OAUTH 2.0
Page  11
5
Was ist OAuth ?
Ursprünglich Entwickelt von Twitter und Ma.gnolia
Protokoll zum Delegieren von (eingeschränkten)
Rechten
Mittlerweile verwendet von Google, Facebook,
Flickr, Microsoft, Salesforce.com oder Yahoo!
Folie 12
Rollen
Folie 13
Client
Authorization-Server
Resource-Server
Resource-Owner
Registriert mit
client_id,
client_secret,
redirect_uri Registriert mit
Credentials
6
Prinzipieller Ablauf
Folie 14
Client
Authorization-Server
Resource-Server
1. Umleitung
2. Umleitung
3. Access-Token
Details legt Flow fest Ein zentrales Benutzerkonto
Nur Auth-Svr. kennt Passwort
Auth. von Client entkoppelt
Flexibilität durch Token
SPA: Kein Cookie: Kein CSRF
FLOWS
Page  15
7
Flows
Authorization Code Grant
 Am meisten Sicherheitsmerkmale
 Klassische Web-Anwendungen
 "Langzeit-Delegation"
Implicit Grant
 Clients ohne Client-Secret
 Single Page Applications
Flows
Resource Owner Password Credentials Grant
 Benutzer vertraut Client seine Credentials an
Client Credentials Grant
 Client "in eigener Mission"
Extension Grants
8
TOKEN
Page  18
Bearer-Token
Folie 19
9
Kein Bearer-Token
Folie 20
Token-Format
OAuth 2 schreibt kein Token-Format vor
Resource Server muss Token validieren und
auswerten können
Möglichkeiten zum Validieren
 Bei Auth-Server nachfragen
 Signatur prüfen
 Token entschlüsseln
Folie 21
10
Mögliche Token-Formate
GUID (Referenz-Token)
Eigenes Tokenformat
 Verschlüsselung und/oder Signatur durch Auth-Server
JWT: JSON Web Token
 JSON-Dokument beschreibt Claims
 Kann signiert und/oder verschlüsselt sein
 Header gibt Auskunft über verwendete Krypto-Algorithmen
Folie 22
SSO MIT OAUTH 2.0 UND
OPENID CONNECT
Page  38
11
SSO mit OAuth
Folie 39
Client
Authorization-Server
Resource-
Server
3. /user/profile + Access-Token
1. Token anfordern
{ "user_name": "susi",
"email": "susi@sorglos.at", … }
2. Token
&scope=profile
Nicht durch
OAuth 2.0 definiert
OpenId Connect (OIDC)
Erweiterung zu OAuth 2.0
Standardisiert User-Profil-Endpunkt
Standardisiert Übermittlung von Profil-Infos
Client erhält auch ID-Token
 JWT-Token mit Infos zum Benutzer + Audience
 JWT-Token kann vom Aussteller signiert sein
Folie 44
12
OIDC
Folie 45
Authorization-Server
Client 1 Service 1
Access-Token
ID-Token
/voucher + Access-Token
DEMO
Page  47
13
Fazit
 OAuth 2.0 zum Delegieren von Rechten
 Implicit Flow: Single Page Applications
 SSO: Recht zum Lesen von Profil delegieren
 OpenID Connect: Authentifizierung mit OAuth 2.0
 OpenID Connect: JWT  Sicherheitsmerkmale
 Vorteile
 Zentrale Benutzerkonten
 Entkopplung der Authentifizierung und Autorisierung
 Flexibilität durch Token
Folie 48
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt

Weitere ähnliche Inhalte

Ähnlich wie AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015

OAuth 2.0 presentation with example with google auth
OAuth 2.0 presentation with example with google authOAuth 2.0 presentation with example with google auth
OAuth 2.0 presentation with example with google authhelen489248
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...QAware GmbH
 
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...atwork
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...QAware GmbH
 
Integrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID ConnectIntegrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID ConnectQAware GmbH
 
REST - Hypermedia und Sicherheit
REST - Hypermedia und SicherheitREST - Hypermedia und Sicherheit
REST - Hypermedia und SicherheitMayflower GmbH
 
API Authentifizierung und Autorisierung
API Authentifizierung und Autorisierung API Authentifizierung und Autorisierung
API Authentifizierung und Autorisierung Stefan Kienzl
 

Ähnlich wie AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015 (10)

OAuth
OAuthOAuth
OAuth
 
OAuth 2.0 presentation with example with google auth
OAuth 2.0 presentation with example with google authOAuth 2.0 presentation with example with google auth
OAuth 2.0 presentation with example with google auth
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
 
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
 
Integrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID ConnectIntegrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID Connect
 
REST - Hypermedia und Sicherheit
REST - Hypermedia und SicherheitREST - Hypermedia und Sicherheit
REST - Hypermedia und Sicherheit
 
Oauth
OauthOauth
Oauth
 
SharePoint Claims und FBA
SharePoint Claims und FBASharePoint Claims und FBA
SharePoint Claims und FBA
 
API Authentifizierung und Autorisierung
API Authentifizierung und Autorisierung API Authentifizierung und Autorisierung
API Authentifizierung und Autorisierung
 

Mehr von Manfred Steyer

Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Manfred Steyer
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Manfred Steyer
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeManfred Steyer
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetManfred Steyer
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkManfred Steyer
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Manfred Steyer
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Manfred Steyer
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")Manfred Steyer
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Manfred Steyer
 
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 ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectManfred Steyer
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Manfred Steyer
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsManfred Steyer
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changesManfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonManfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonManfred Steyer
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonManfred Steyer
 

Mehr von Manfred Steyer (20)

Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
 
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 ConnectModern 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
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2
 
Webpack
WebpackWebpack
Webpack
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-Devs
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 London
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 

AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015

  • 1. 1 Moderne Authentifizierungslösungen mit OAuth 2.0 und AngularJS Manfred Steyer ManfredSteyer Page  3 Aktuelles Buch
  • 2. 2 Ziele Möglichkeiten bezüglich SSO und Delegation mit OAuth 2.0 und OpenId Connect (OIDC) kennen lernen Möglichkeiten zur Nutzung mit JavaScript und AngularJS kennen lernen Folie 6 Inhalt Motivation Überblick zu OAuth 2.0 SSO mit OAuth 2.0 OpenId Connect DEMO Folie 7
  • 3. 3 MOTIVATION Page  8 Ein Benutzer - zu viele Konten Folie 9
  • 4. 4 Clients benötigen Zugriff Folie 10 ÜBERBLICK ZU OAUTH 2.0 Page  11
  • 5. 5 Was ist OAuth ? Ursprünglich Entwickelt von Twitter und Ma.gnolia Protokoll zum Delegieren von (eingeschränkten) Rechten Mittlerweile verwendet von Google, Facebook, Flickr, Microsoft, Salesforce.com oder Yahoo! Folie 12 Rollen Folie 13 Client Authorization-Server Resource-Server Resource-Owner Registriert mit client_id, client_secret, redirect_uri Registriert mit Credentials
  • 6. 6 Prinzipieller Ablauf Folie 14 Client Authorization-Server Resource-Server 1. Umleitung 2. Umleitung 3. Access-Token Details legt Flow fest Ein zentrales Benutzerkonto Nur Auth-Svr. kennt Passwort Auth. von Client entkoppelt Flexibilität durch Token SPA: Kein Cookie: Kein CSRF FLOWS Page  15
  • 7. 7 Flows Authorization Code Grant  Am meisten Sicherheitsmerkmale  Klassische Web-Anwendungen  "Langzeit-Delegation" Implicit Grant  Clients ohne Client-Secret  Single Page Applications Flows Resource Owner Password Credentials Grant  Benutzer vertraut Client seine Credentials an Client Credentials Grant  Client "in eigener Mission" Extension Grants
  • 9. 9 Kein Bearer-Token Folie 20 Token-Format OAuth 2 schreibt kein Token-Format vor Resource Server muss Token validieren und auswerten können Möglichkeiten zum Validieren  Bei Auth-Server nachfragen  Signatur prüfen  Token entschlüsseln Folie 21
  • 10. 10 Mögliche Token-Formate GUID (Referenz-Token) Eigenes Tokenformat  Verschlüsselung und/oder Signatur durch Auth-Server JWT: JSON Web Token  JSON-Dokument beschreibt Claims  Kann signiert und/oder verschlüsselt sein  Header gibt Auskunft über verwendete Krypto-Algorithmen Folie 22 SSO MIT OAUTH 2.0 UND OPENID CONNECT Page  38
  • 11. 11 SSO mit OAuth Folie 39 Client Authorization-Server Resource- Server 3. /user/profile + Access-Token 1. Token anfordern { "user_name": "susi", "email": "susi@sorglos.at", … } 2. Token &scope=profile Nicht durch OAuth 2.0 definiert OpenId Connect (OIDC) Erweiterung zu OAuth 2.0 Standardisiert User-Profil-Endpunkt Standardisiert Übermittlung von Profil-Infos Client erhält auch ID-Token  JWT-Token mit Infos zum Benutzer + Audience  JWT-Token kann vom Aussteller signiert sein Folie 44
  • 12. 12 OIDC Folie 45 Authorization-Server Client 1 Service 1 Access-Token ID-Token /voucher + Access-Token DEMO Page  47
  • 13. 13 Fazit  OAuth 2.0 zum Delegieren von Rechten  Implicit Flow: Single Page Applications  SSO: Recht zum Lesen von Profil delegieren  OpenID Connect: Authentifizierung mit OAuth 2.0  OpenID Connect: JWT  Sicherheitsmerkmale  Vorteile  Zentrale Benutzerkonten  Entkopplung der Authentifizierung und Autorisierung  Flexibilität durch Token Folie 48 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt