© Matej Kotula/Shutterstock.com
JavaScript Kompendium
Angular-2.0-Security-Architektur in der Praxis

Aber sicher!

Sicherheit ist ein wichtiges Thema. Aber die Umsetzung auch im Kontext clientseitiger Webanwendungen muss nicht schwierig sein. Das zeigt das praktische Beispiel einer Angular-2.0-Frontend-Anwendung, die auf ein Spring Boot Backend zugreift. Die Absicherung erfolgt mittels OAuth 2.0 und OpenID Connect. Als OpenID-Connect-Provider kommt Keycloak in Version 2.3 zum Einsatz.

Karsten Sitterberg


Es gibt vier typische Anforderungen zur Absicherung von Anwendungen: Erstens müssen Nutzer identifiziert werden (Authentifizierung), zweitens dürfen Aktionen nur durch berechtigte Nutzer ausgeführt werden (Autorisierung). Deswegen sollten drittens Nutzern lediglich Aktionen zur Auswahl angezeigt werden, die sie auch ausführen können. Und viertens sollen Nutzer nur die Daten abrufen können, für die sie eine Berechtigung besitzen. Bei Webseiten, die durch serverseitiges Rendering ihre Benutzungsoberfläche erhalten und bei denen der gesamte auszuführende Code zur Request-Zeit zur Verfügung steht, sind alle Anforderungen im gleichen Kontext realisiert: Die Anwendung ist gleichzeitig für Darstellung, Steuerung und Absicherung zuständig und kann damit alle Entscheidungen an einer Stelle treffen. Eine Anmeldung kann direkt an der Anwendung erfolgen und der Zustand z. B. durch eine HTTP-Session auf Basis eines Cookies gehalten werden. AngularJS vs. Angular 2.0 Angular 2.0 ist ein SPA-Framework, das zwar als Nachfolger von AngularJS gedacht ist, jedoch als komplette Neuentwicklung ausgeführt wurde. Lediglich einige Konzepte, wie etwa das der Komponenten, gingen in das neue Framework über. Das Anpassen der Anwendung an bestimmte Benutzerrechte hat sich in Angular 2.0 unter anderem in Hinblick auf das Routing verbessert. Möchte man einen Routingvorgang aufgrund bestimmter Nutzerberechtigungen abbrechen und den Benutzer gegebenenfalls auf ein Log-in-Formular umleiten, bietet AngularJS dafür lediglich umständliche, zumindest aber wenig explizite Lösungsansätze. Ein Ansatz besteht darin, ein Angular-Routing-Event abzufangen und anschließend im Event Handler zu überprüfen, ob der Benutzer angemeldet ist und über die erforderlichen Rechte verfügt. Eine zweite Möglichkeit nutzt die routerbasierte Resolve-Logik. Ein solcher Resolve dient eigentlich zum Beschaffen von Remotedaten, daher wirkt sich dieser Ansatz negativ auf Wartbarkeit und Verständlichkeit der Software aus. Angular 2.0 sieht ein eigenes, explizites Konzept vor, das es erlaubt, Benutzer mit unzureichenden Berechtigungen abzufangen. Die notwendige Logik heißt Route Guard und bietet ein sauberes, ausdrucksstarkes API, das Lesbarkeit und Wartbarkeit des Codes deutlich erhöht. Im Grundsatz lässt sich das in diesem Artikel vorgestellte Autorisierungs- und Authentifizierungskonzept nicht nur mit Angular 2.0 verwenden, sondern bietet sich für andere Single-Page-Apps an. Angular 2.0 ist ein SPA-Frame...

JavaScript Kompendium
Angular-2.0-Security-Architektur in der Praxis

Aber sicher!

Sicherheit ist ein wichtiges Thema. Aber die Umsetzung auch im Kontext clientseitiger Webanwendungen muss nicht schwierig sein. Das zeigt das praktische Beispiel einer Angular-2.0-Frontend-Anwendung, die auf ein Spring Boot Backend zugreift. Die Absicherung erfolgt mittels OAuth 2.0 und OpenID Connect. Als OpenID-Connect-Provider kommt Keycloak in Version 2.3 zum Einsatz.

Karsten Sitterberg


Es gibt vier typische Anforderungen zur Absicherung von Anwendungen: Erstens müssen Nutzer identifiziert werden (Authentifizierung), zweitens dürfen Aktionen nur durch berechtigte Nutzer ausgeführt werden (Autorisierung). Deswegen sollten drittens Nutzern lediglich Aktionen zur Auswahl angezeigt werden, die sie auch ausführen können. Und viertens sollen Nutzer nur die Daten abrufen können, für die sie eine Berechtigung besitzen. Bei Webseiten, die durch serverseitiges Rendering ihre Benutzungsoberfläche erhalten und bei denen der gesamte auszuführende Code zur Request-Zeit zur Verfügung steht, sind alle Anforderungen im gleichen Kontext realisiert: Die Anwendung ist gleichzeitig für Darstellung, Steuerung und Absicherung zuständig und kann damit alle Entscheidungen an einer Stelle treffen. Eine Anmeldung kann direkt an der Anwendung erfolgen und der Zustand z. B. durch eine HTTP-Session auf Basis eines Cookies gehalten werden. AngularJS vs. Angular 2.0 Angular 2.0 ist ein SPA-Framework, das zwar als Nachfolger von AngularJS gedacht ist, jedoch als komplette Neuentwicklung ausgeführt wurde. Lediglich einige Konzepte, wie etwa das der Komponenten, gingen in das neue Framework über. Das Anpassen der Anwendung an bestimmte Benutzerrechte hat sich in Angular 2.0 unter anderem in Hinblick auf das Routing verbessert. Möchte man einen Routingvorgang aufgrund bestimmter Nutzerberechtigungen abbrechen und den Benutzer gegebenenfalls auf ein Log-in-Formular umleiten, bietet AngularJS dafür lediglich umständliche, zumindest aber wenig explizite Lösungsansätze. Ein Ansatz besteht darin, ein Angular-Routing-Event abzufangen und anschließend im Event Handler zu überprüfen, ob der Benutzer angemeldet ist und über die erforderlichen Rechte verfügt. Eine zweite Möglichkeit nutzt die routerbasierte Resolve-Logik. Ein solcher Resolve dient eigentlich zum Beschaffen von Remotedaten, daher wirkt sich dieser Ansatz negativ auf Wartbarkeit und Verständlichkeit der Software aus. Angular 2.0 sieht ein eigenes, explizites Konzept vor, das es erlaubt, Benutzer mit unzureichenden Berechtigungen abzufangen. Die notwendige Logik heißt Route Guard und bietet ein sauberes, ausdrucksstarkes API, das Lesbarkeit und Wartbarkeit des Codes deutlich erhöht. Im Grundsatz lässt sich das in diesem Artikel vorgestellte Autorisierungs- und Authentifizierungskonzept nicht nur mit Angular 2.0 verwenden, sondern bietet sich für andere Single-Page-Apps an. Angular 2.0 ist ein SPA-Frame...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang