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

Authentifizierung und Autorisierung mit Angular

Authentifizierung und Autorisierung mit Angular

Presentation von dotnet cologne, Mai 2017

Manfred Steyer

May 05, 2017
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. Fragestellungen • Immer Benutzername und Passwort übersenden? • Immer Benutzername

    und Passwort am Server prüfen? • Eigenes Benutzerkonto? • Was, wenn Services mit anderen Services kommunizieren? • Cookies und Angriffsvektoren? • Cookies und verschiedene Domänen? • Besser: Zeitlich beschränktes Token zum Zugriff
  3. Prinzipieller Ablauf Folie▪ 7 Client Authorization-Server Resource-Server 1. Umleitung 2.

    Umleitung mit Access-Token 3. Access-Token Ein zentrales Benutzerkonto Nur Auth-Svr. kennt Passwort Auth. von Client entkoppelt Flexibilität durch Token SPA: Kein Cookie: Kein CSRF
  4. 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! • Verschiedene Flows Folie▪ 9
  5. Folie▪ 11 Client Authorization-Server Resource-Server 1. Direkte HTTP-Anfrage mit Credentials

    des Benutzers 2. Antwort mit Access-Token 3. Access-Token Resource Owner Password Credentials Flow
  6. Resource Owner Password Credentials Flow Folie▪ 12 Client Authorization-Server Resource-Server

    1. Direkte HTTP-Anfrage mit Credentials des Benutzers 2. Antwort mit Access-Token 3. Access-Token Voraussetzung: Vertrauensstellung zw. Benutzer und Client
  7. Token (typische Inhalte) • Informationen über Benutzer (Claims) • Rechte,

    die der Client wahrnehmen darf • Aussteller • Audience (für wen wurde Token ausgestellt) • Gültigkeitsdatum • Signatur des Ausstellers Folie▪ 14
  8. Token-Format • OAuth 2 schreibt kein Token-Format vor • Ressource

    Server muss Token validieren können Folie▪ 15
  9. Token-Formate (Auswahl) • GUID (Referenz-Token) • Eigenes Tokenformat • JWT:

    JSON Web Token • JSON-Dokument beschreibt Claims • Kann signiert und/oder verschlüsselt sein Folie▪ 16
  10. SSO mit OAuth Folie▪ 20 Client Authorization-Server Ressource- Server 3.

    /user/profile + Token 1. Token anfordern { "user_name": "susi", "email": "[email protected]", … } 2. Token &scope=profile Nicht durch OAuth 2.0 definiert
  11. OpenId Connect (OIDC) • Erweiterung zu OAuth 2.0 • Standardisiert

    User-Profil-Endpunkt (Service mit Daten zum Benutzer) • Client erhält auch ID-Token • JWT-Token mit Infos zum Benutzer + Audience • JWT-Token kann vom Aussteller signiert sein Folie▪ 21
  12. Implicit Flow mit OIDC Folie▪ 22 Client Authorization-Server Resource-Server 1.

    Umleitung 2. Umleitung mit Access-Token und Id-Token 3. Access-Token
  13. Was sind Guards? • Services • Werden beim Aktivieren bzw.

    Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 27
  14. Guards in der Konfiguration Page ▪ 29 const APP_ROUTES: Routes

    = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
  15. Provider für Guards Page ▪ 30 // app.module.ts @NgModule({ providers:

    [ FlugEditGuard, { provide: AuthGuard, useClass: SpecialCustomer17Guard } ], […] }) export class AppModule { }
  16. Fazit Token: Flexibilität und Cross Origin OAuth 2: Autorisierung OpenId

    Connect: Authentifizierung Implicit Flow: Umleitung Password Flow: Keine Umleitung