Seite 3: OpenID Connect, Fazit

Inhaltsverzeichnis

Nutzer richtig leiten

Sofern der zusammen mit dem Access-Token erhaltene Zustand neben dem Zufallswert weitere Informationen enthält, geht die Anwendung davon aus, dass es sich dabei um die URL der Route handelt, die der Benutzer ursprünglich ansteuern wollte. In dem Fall leitet sie den Benutzer mit dem $location-Service auf diese URL um.

Um Routen oder Optionen in Hinblick auf die tatsächlichen Rechte des Benutzers zu aktivieren beziehungsweise zu deaktivieren, könnte sich die Single-Page-Anwendung unter Angabe des Access-Tokens an einen Service wenden, der Profilinformationen für den Benutzer liefert. Anhand dieser könnte die Anwendung entscheiden, welche Möglichkeiten sie dem Benutzer bietet. Der für den Zustand login zuständige Controller hat lediglich die Aufgabe, den Benutzer auf die Log-in-Seite des Autorisierungsservers umzuleiten.

app.controller("LoginCtrl", function ($scope, $stateParams, 
oauthService, $http) { 

    location.href =
    oauthService.createLoginUrl($stateParams.requestedUrl);

});

Der obige Quelltextauszug nimmt sich der Aufgabe auf einfache Weise an, indem er mit der Funktion createLoginUrl die URL der Log-in-Seite samt der nötigen Parameter ermittelt. Durch das Zuweisen der URL an location.href veranlasst der Browser die gewünschte Umleitung. Damit der Anwendung nach dem Anmelden die ursprünglich angefragte Route vorliegt, übergibt sie ihre URL an createLoginUrl, die sie als Teil des state-Parameters übersendet.

Obwohl die gezeigte Implementierung geradlinig und folglich vergleichsweise einfach ist, sollte vor dem Hintergrund der Testbarkeit das Umleiten des Benutzers in einen eigenen Service ausgelagert werden. Alternativ dazu könnte die Anwendung eine Direktive zum Rendern einer Schaltfläche nutzen, die den Benutzer auf die Log-in-Seite umleitet. Eine Umsetzung dieser Ideen findet man im vom Autor zur Verfügung gestellten Repository.

Überlegungen zu OpenID Connect

Mehr Infos

Tipps und Tricks für AngularJS

Teil 1: Internationalisierung
Teil 2: ES2015
Teil 3: OAuth 2.0
Teil 4: Animationen
Teil 5: Transformationen und Interceptors
Teil 6: Backend-lose Entwicklung mit ngMockE2E
Teil 7: GUIs mit @ngrx/store (I)
Teil 8: GUIs mit @ngrx/store (II)

Außerdem: AngularJS 1.x und 2.0 mit dem Component Router parallel betreiben

Die OAuth-2-Erweiterung OpenID Connect wurde geschaffen, um Authentifizierungszenarien mit OAuth 2.0 zu standardisieren. Sie sieht vor, dass der Client ein ID-Token bekommt, das Informationen über den Benutzer enthält. Daneben umfasst sie zusätzliche Sicherheitsmerkmale wie die Möglichkeit, das ID-Token zu signieren. Um einen Missbrauch zu verhindern, listet das Token den Aussteller sowie den Client, für den es ausgestellt wurde. Eine Erweiterung des hier betrachteten Beispiels für die Nutzung des aufstrebenden Protokolls steht in einem eigenen Repository bereit.

Fazit

Während AngularJS keine Bordmittel für Log-in-Szenarien via OAuth 2.0 beziehungsweise OpenID Connect bietet, lassen sie sich durch entsprechende Umleitungen selbst schreiben. Auf die Weise kann der Benutzer ein bei einem Log-in-Provider hinterlegtes Konto zur Anmeldung nutzen. Um zu verhindern, dass Benutzer Routen verwenden, für die sie nicht autorisiert sind, kann eine Single-Page-Anwendung die von UI-Route angebotenen Ereignisse nutzen. Das dient jedoch in erster Linie der Benutzerfreundlichkeit, denn Sicherheitsprüfungen haben am Server zu erfolgen.

Manfred Steyer
ist Trainer und Berater bei IT-Visions und an der FH CAMPUS 02 tätig. In seinem aktuellen Buch "AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript" behandelt er die vielen Seiten von Googles SPA-Framework. (jul)