Keycloak

Keycloak integration mit Reacjs-App

Diese Doku ist eine Anleitung für die Integration von Keycloak Access Management mit einer Frontend Beispielanwendung (Reactjs app).

Hinweise:

1. Keycloak wird mittels folgender Helm Chart [1] installiert. Es ist in unserer Installation unter http://key.apps.rancher.adartish.de ansprechbar.
2. Beispielanwendungen zu Keycloak findet man in Repo1 [2] oder Repo2 [3]
3. Keycloak configuration für Javascript [4] Projekte mit schon im Code integriertem Keycloak.
4. Die Apps können mithilfe der „devspace“ package [5] dockerisiert werden und dann zum K8s Cluster gepusht werden. (Beispiel [6])
5. Man kann auch Ingresse für die App konfigurieren. Die Ingress dieses Apps ist unter folgender URL ansprechbar: http://react.apps.rancher.adartish.de

Ablauf:

Zuerst muss man als Keycloak Admin einen Realm definieren unter dem die Konfigurationen abgespeichert werden. In diesem Beispiel heißt er „New.

Wenn alles bereit ist, muss man einen „Client“ im Keycloak Realm „New“ erstellen.

Man wählt einen „client-id“ aus und drückt Save. Die andere Felder können wie folgt ausgefüllt werden.

Wichtige Punkte:

• Access Type muss „public“ sein.
• Root-Url, Redirect-URI, Admin-Url und Web-origins müssen entsprechend angepasst werden.
• Wenn die Webseite „http“ ist, dann muss web-origins „*“ sein.

Zunächst muss man zwei Rollen für die App definieren.

Danach muss man ein paar Benutzer definieren. Die Benutzer können entweder manuell in Keycloak eingetragen oder durch LDAP-Integration bezogen werden. Die andere Möglichkeit ist der Bezug durch Soziale Apps, u.a. GitHub, GitLab, Facebook usw. 

Wenn ein Benutzer definiert ist, muss ihm im „Role Mappings“ Tab die passende Rolle übertragen werden. Und zwar:

Wichtiger Punkt: Definieren Sie zwei Benutzer, einer als normal-user und der andere als admin-user. (Hier sind das die User:

a)     User

b)    Admin

Alles ist bereit. Rufen Sie die URL der App auf und testen Sie, ob alles Reibungslos funktioniert: http://react.apps.rancher.adartish.de

LDAP Konfiguration:

 Wählen Sie „User Federation“ in Keycloak Admin Panel aus, dann „ldap“ als Typ und füllen Sie danach die Felder wie folgt aus:

Testen Sie die Konfiguration mit den „Test connection“ und „Test authentication“ Buttons.

Gleichen Sie die Benutzer ab. Fertig!

GitHub-Integration:

Die GitHub-Integration ist unter diesem Link beschrieben. [7]

Anhang

Verwendete URLs:

1. keycloak 15.1.6 · bitnami/bitnami
2. GitHub – dasniko/keycloak-reactjs-demo: Reference example for React.JS and Keycloak SSO integration.
3. keycloak-quickstarts/applications/app-vue at latest · keycloak/keycloak-quickstarts
4. Securing Applications and Services Guide
5. GitHub – devspace-sh/devspace: DevSpace – The Fastest Developer Tool for Kubernetes ⚡ Automate your deployment workflow with DevSpace and develop software directly inside Kubernetes.
6. How to deploy a Vue.js application to Kubernetes
7. Github as Identity Provider in Keyclaok