Keycloak Angular: ein umfassender Überblick!

Bei der Entwicklung von Angular Anwendungen stellt sich die obligatorische Frage des Sicherheitsmanagements. Für diesen Zweck ist Keycloak hervorragend geeignet. In diesem Artikel zeigen wir dir, warum Keycloak Angular eine perfekte Lösung ist, wofür die Keycloak API verwendet wird und was bei der Konfiguration und Verknüpfung mit Anwendungen beachtet werden muss.

Was ist Angular?

Bei Angular handelt es sich um ein populäres Front-End Web Development Framework, das von Google entwickelt wurde. Es ermöglicht Entwickler:innen die Erstellung von leistungsstarken Single Page Applications (SPAs), die reich an Funktionen und interaktiven Elementen sind. Durch die Verwendung von TypeScript bietet Angular eine strukturierte Architektur, die auch für die Entwicklung großer und komplexer Webanwendungen geeignet ist.

Angular auf einen Blick

• Aktuelle Version: 17.3.5 veröffentlicht am 17. April 2024
• Lizenz: MIT-Lizenz
• Entwickler: Google LLC
• Erscheinung: 2016
• Programmiersprache: TypeScript

Was ist Keycloak?

Keycloak ist eine von Red Hat entwickelte Open Source Lösung für das Identity- und Access-Management. Die Software bietet Funktionen wie Single Sign-On (SSO) basierend auf gängigen Protokollen wie OpenID Connect und SAML 2.0. Keycloak ermöglicht Entwickler:innen die einfache Implementierung von Authentifizierung und Autorisierung in Anwendungen. Dies geschieht durch die Zentralisierung der Verwaltung von Benutzeridentitäten, Sicherheitsrichtlinien und Zugriffsberechtigungen.

Keycloak auf einen Blick

• Aktuelle Version: 24.0.4 veröffentlicht am 8. Mai 2024
• Lizenz: Apache-Lizenz 2.0
• Entwickler: WildFly (ein Projekt von Red Hat)
• Erscheinung: 2014
• Programmiersprache: Java

Warum ist Keycloak Angular sinnvoll?

Die Angular Keycloak Kombination bietet eine Reihe von Vorteilen. Die Integration eines robusten Authentifizierungssystems wie Keycloak hilft Entwickler:innen dabei, Webanwendungen effizient und sicher zu gestalten.

Die wesentlichen Keycloak Angular Vorteile sind:

• Sicherheitsmanagement: Angular mit Keycloak erleichtert das zentrale Management von Benutzerzugriffen. Das erhöht die Sicherheit und reduziert die Komplexität.
• Flexibilität: Angular-Anwendungen können sich an diverse Sicherheitsanforderungen anpassen, da Keycloak eine Vielzahl von Authentifizierungsmethoden und -protokollen unterstützt.
• Nutzererfahrung: Durch den Einsatz von SSO können User nahtlos zwischen verschiedenen Diensten navigieren, ohne sich immer wieder neu anzumelden.
• Skalierbarkeit: Ein weiterer Vorteil ist die hohe Skalierbarkeit von Angular und Keycloak. Anwendungen in einem dynamischem Umfeld können somit problemlos mit dem Unternehmen mitwachsen.

Keycloak API

Die Keycloak API bietet eine umfangreiche Schnittstelle zur Interaktion mit Keycloak Serverfunktionen. Sie ist gewissermaßen das Rückgrat der Software. Die Dokumentation für die Keycloak API ist sehr umfangreich und bietet einen guten Einblick in Informationen rund um die Authentifizierung und Verwaltungsprozesse.

Die Voraussetzung: Keycloak-js & Keycloak-Angular

Die Grundvoraussetzung, um Keycloak in Angular Anwendungen zu integrieren, sind Keycloak-js und Keycloak Angular. Wir sehen uns in diesem Abschnitt zunächst beides genauer an und gehen dann im nächsten Teil auf die Konfiguration ein.

Keycloak-js

Dies ist ein zentraler Bestandteil von Keycloak. Es wird häufig verwendet, da es flexibel ist und sich leicht in verschiedene Projekte integrieren lässt. Regelmäßige Updates und eine aktive Community sorgen für die nötige Unterstützung. Keycloak-js wurde speziell dafür entwickelt, Webanwendungen mithilfe des OpenID Connect Protokolls zu schützen. Es handelt sich dabei um eine clientseitige JavaScript Bibliothek, die in Webanwendungen zur Autorisierung und Authentifizierung von Nutzern eingesetzt wird. Keycloak-js eignet sich aufgrund der Cordova Unterstützung auch für mobile Anwendungen.

Keycloak Angular

Keycloak Angular dient als Erweiterung von Keycloak-js für den Einsatz in Angular Anwendungen. Es erleichtert die Nutzung durch zusätzliche Funktionen und neue Methoden, die speziell auf Angular zugeschnitten sind. Keycloak Angular bietet eine Grundimplementierung eines AuthGuard. Außerdem beinhaltet es einen Http Client Interceptor, der einen Autorisierung-Header zu ausgewählten HTTP-Anfragen hinzufügt.

Konfiguration von Keycloak Angular

Sobald die Keycloak Angular Bibliothek erfolgreich installiert wurde, kann man mit der Konfiguration, für die Angular Anwendung beginnen. Wir werden die wichtigsten Informationen dazu in diesem Abschnitt mit Codeschnipseln erklären. Wichtig: Voraussetzung für die nachfolgenden Schritte, ist eine bereits konfigurierte Instanz von Keycloak.

Initialisierung (URL, Realm, Clientid)

Zunächst erstellen wir eine init-Datei. In dieser Datei werden die notwendigen Variablen definiert. Die Datei enthält weiterhin eine Funktion zur Initialisierung von Keycloak um es mit unserer Angular Anwendung zu verbinden. Folgende Paramter werden konfiguriert:

• url: Das bezeichnet den Pfad zum Keycloak Server, welcher standardmäßig localhost:8080 ist.
• realm: Das ist der Name des Realm welchen wir für Keycloak erstellt haben.
• clientid: Das ist die Bezeichnung des Clients, der der Anwendung in Keycloak zugewiesen wurde. Dieser führt die Abfragen der Useridentifizierung durch.

APP_INITIALIZER

Damit gewährleistet ist, dass Keycloak beim Starten der Anwendung initialisiert wird, muss der APP_INITIALIZER Provider mit der zuvor angelegten Keycloak-Factory Funktion hinzugefügt werden. Außerdem importieren wir noch das KeycloakAngularModule.

Weitere Optionen festlegen

Mit dem Parameter initOptions können weitere Parameter zur Initialisierung von Keycloak mitgegeben werden. In unserem Beispiel haben wir Keycloak so konfiguriert, dass ein Silent SSO Check verwendet wird. Wird diese Funktion genutzt, erfolgt die Kommunikation mit dem Keycloak-Server in einem versteckten Iframe. Dadurch werden die Assets der App nur einmal beim Initialisieren geladen und geparst, ohne dass ein vollständiger Redirect vom Browser zu Keycloak und zurück zur App notwendig ist.

Um sicherzustellen, dass Keycloak über das Iframe kommunizieren kann, müssen wir eine statische HTML-Datei in unserer Anwendung bereitstellen.

Wir erstellen also eine Datei mit dem Namen silent-check-sso.html im Verzeichnis assets unserer Anwendung und fügen den Inhalt wie unten gezeigt ein.

• onLoad: Diese Option teilt dem Adapter mit, welche Methode Keycloak für die Authentifizierung verwenden soll. Die Werte können check-sso oder login-required sein. Wenn man login-required festlegt, ist eine sofortige Authentifizierung beim Start der Anwendung erforderlich. Check-sso ist eine Methode, um den Status der Authentifizierung und die entsprechenden Redirects manuell zu verwalten.
• silentCheckSsoRedirectUri: Das ist eine Option, die es ermöglicht den SSO-Status im Hintergrund zu prüfen, ohne den Browser zum Keycloak Server und dann zurück zur Anwendung umzuleiten. Die Prüfung erfolgt in einem versteckten iFrame. Mit window.location.origin legt man den Speicherort der statischen HTML Datei fest, die für die SSO Prüfung verwendet wird.

Fazit

Es gibt eine Vielzahl von Varianten, um eine Angular Anwendung abzusichern, Keycloak ist allerdings eine der besten Lösungen auf dem Markt. Es gibt keine Gründe, die wirklich gegen die Verwendung von Keycloak sprechen, allein die Komplexität bei der initialen Einrichtung mag manche etwas abschrecken.

Benötigst du Hilfe bei Angular & Keycloak? Wir unterstützen dich dabei gerne. Unsere Entwickler:innen haben langjährige Erfahrung sowohl mit Keycloak als auch mit Angular. Kontaktiere uns gerne für ein unverbindliches Angebot für dein Projekt!