zum Inhalt

Der lise Blog:
Einsichten, Ansichten, Aussichten

Single-Sign-On in Angular 5: Einmal anmelden reicht!

04. Juni 2018 von Avatar of Marius B.Marius B.

Einer unserer Kunden wünschte sich eine Lösung dafür, dass sich seine Nutzer in mehreren Web-Anwendungen mit den gleichen Zugangsdaten einloggen können. Dadurch müssen sich die Nutzer nicht in jeder Anwendung neu registrieren. Für die Erfüllung dieses Wunsches bietet sich eine Single-Sign-On-Lösung an.

Dabei registriert sich der Benutzer bei einem zentralen Authorization Server und kann damit alle unterstützten Web-Anwendungen benutzen. Eine Anwendung kann mit Hilfe von sogenannten Scopes festlegen, auf welche spezifischen Ressourcen (Claims), wie zum Beispiel eine Nutzer-Rolle (Administrator), sie zugreifen möchte. Einige Claims, wie die Benutzer-ID (Subject), sind standardmäßig immer enthalten. Jede Anwendung besitzt eine Client-ID. Das eingesetzte Protokoll für die Authentifizierung ist OAuth mit der Authentifizierungsschicht OpenID Connect (OIDC). Bevor eine Anwendung den Dienst verwenden kann, lädt sich diese das Discovery Document vom Authorization Server herunter. In diesem Dokument sind wichtige Konfigurationsparameter, wie die unterstützten Scopes und Claims, enthalten. Wenn sich ein Benutzer beim Authentifizierungssystem anmeldet, bekommt er zwei Token zugewiesen:

  • ID Token: Dieses Token bescheinigt die Identität eines Benutzers und ist mit einem Personalausweis vergleichbar. Es enthält die ID des angemeldeten Benutzers.
  • Access Token: Dieses Token wird für Zugriffe auf APIs benutzt, welche die Authentifizierung des Benutzers erfordern. Dabei wird das Token bei jeder API-Anfrage im HTTP-Header mitgeschickt. Außerdem enthält es die benutzerdefinierten Claims des Benutzers.

Die Token werden nach dem Standard JSON Web Token erzeugt. Diese Base64-kodierten JSON Token enthalten einen Header, einen Payload-Bereich (Nutzdaten) und eine Signatur zur Validierung. Beide Token haben einen Ablaufzeitpunkt. Wenn dieser Zeitpunkt erreicht ist, ist der Nutzer nicht mehr eingeloggt. In der Konfiguration des Authorization Servers müssen die Scopes, die Client-ID und die Claims konfiguriert werden. Bekannte OIDC-Anbieter sind Microsoft, Google und PayPal. In unserem Fall stellt der Kunde einen eigenen Authorization Server für seine Anwendungen zur Verfügung.

Lösung

Für die Web-Anwendung wird im Front-End Angular 5 eingesetzt. Dafür verwenden wir die Bibliothek angular-oauth2-oidc. In den Umgebungsvariablen der Anwendung werden die für die Authentifizierung notwendigen Konfigurationsparameter eingetragen. Dazu zählen die URL des Authorization Servers, die ClientID der Anwendung, die Rücksprungadresse und die verwendeten Scopes. Bei OIDC gibt es verschiedene Flows zur Authentifizierung. Für eine Single-Page-Webanwendung eignet sich der Implicit Flow. Dabei wird der Benutzer zum Einloggen auf eine Webseite vom Authorization Server weitergeleitet. Dies geschieht durch den Aufruf der Methode initImplicitFlow(). Dort gibt der Benutzer seine Zugangsdaten ein, erhält bei erfolgreicher Anmeldung die oben genannten Token und wird wieder zu der Anwendung zurückgeschickt. Die Anwendung wertet nun die Nutzerinformationen aus:

 

this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      if (this.oauthService.hasValidAccessToken()) {
            this.oauthService.loadUserProfile().then((info) => {
                  let user: User = new User();
                  user.id = info['sub'];
                  user.name = info['name'];
            });
      }
});

 

Das hier gezeigte User-Objekt wird weiterverwendet, um unter anderem den Benutzernamen auf der Internetseite anzuzeigen. Wenn die Anwendung Aufrufe an das Back-End tätigt, für die ein Benutzer angemeldet sein muss, wird das Access-Token im HTTP-Header eingefügt. Dies erfolgt bei Angular über einen HttpInterceptor:

 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const authRequest = req.clone(
      {
            headers: req.headers.append('Authorization', `Bearer
${oauthService.getAccessToken()}`)
      });

      return next.handle(authRequest);
}

 

Das Back-End prüft bei solchen Aufrufen über die API des Authorization Servers, ob das Token gültig ist und bearbeitet dann die Anfrage.

Fazit

Zusammenfassend lässt sich sagen, dass der Einsatz einer Single-Sign-On-Lösung durchaus sinnvoll ist, wenn ein Unternehmen mehrere Web-Anwendungen anbietet. Die Nutzer müssen sich nur einmal bei dem Anbieter registrieren und können anschließend alle Dienste nutzen. Außerdem sehen sie für alle Logins die gleiche vertraute Benutzeroberfläche. Weiterhin erhalten die einzelnen Anwendungen die Passwörter der Benutzer nicht. Die Benutzer müssen ihre Daten nur an einer Stelle eingeben. Letztlich muss sich auch der Benutzer weniger Passwörter merken.

Rufen Sie uns an: 0221 222 812 - 12
Kommen Sie vorbei!
lise GmbH
Butzweilerhof-Allee 2
50829 Köln