Mobile-Menu

Das JavaScript-Framework Vue.js, Teil 16 Sichere Vue-Anwendungen mit Keycloak

Von Dr. Dirk Koller 5 min Lesedauer

Anbieter zum Thema

Kentix GmbH

Web-Anwendungen lassen sich mit Standards wie OAuth 2.0, OpenID Connect, JWT oder SAML 2.0 absichern. Produktionsreife Anwendungen wie Keycloak von Red Hat sind allerdings einfacher zu implementieren. Dieser Beitrag zeigt, wie sich Vue-Anwendungen damit absichern lassen.

Login mit dem per Keycloak angelegten User.(Bild: Koller / Keycloak)
Login mit dem per Keycloak angelegten User.
(Bild: Koller / Keycloak)

Keycloak ist wahlweise als Docker-Image oder als Stand-Alone-Java-Anwendung erhältlich. Wer Docker nutzt, ist mit dem folgenden Aufruf im Nu im Besitz eines laufenden Containers (hier in der Version 16.1.0):

docker run -p 8081:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:16.1.0 start-dev

Der Port 8080 des Containers wird hier auf den Port 8081 der lokalen Maschine gemappt, um Port 8080 für die Vue-App freizuhalten. Die Installation der Java-Variante, die derzeit OpenJDK 11 voraussetzt, ist in der Dokumentation beschrieben.

Anlegen eines neuen Realms.(Bild: Koller / Keycloak)
Anlegen eines neuen Realms.
(Bild: Koller / Keycloak)

Nach Installation und Start von Keycloak ist die Administrationskonsole unter der URL http://localhost:8081/admin erreichbar. Im Docker-Befehl oben wurde der erforderlich Admin-Benutzer „admin“ (mit gleichnamigen Passwort) gleich angelegt, so dass man sich direkt einloggen kann.

Keycloak teilt Anwendungen und Benutzer in sogenannte Realms (deutsch: Bereiche, Gebiete) auf. Dabei handelt es sich um so etwas wie Mandanten mit getrennten Benutzer- und Anwendungskreisen. Das können gänzlich verschiedene Unternehmen, aber auch verschiedene Umgebungen für Test und Produktion sein. Wir legen hier einen Realm mit Namen „test“ an (Select realm > Add realm).

Anlegen eines Clients mit dem Protokoll openid-connect.(Bild: Koller / Keycloak)
Anlegen eines Clients mit dem Protokoll openid-connect.
(Bild: Koller / Keycloak)

Um den Realm nutzen zu können, wird ein Client benötigt, der die Konfiguration für die zugreifende Anwendung darstellt (Configure > Clients > Create). Die zu vergebende Client ID lautet hier „vue-app“. Nach dem Anlegen des Clients lassen sich zahlreiche Eigenschaften konfigurieren.

Wichtig sind hier Valid Redirect URIs (http://localhost:8080/*), womit verhindert wird, dass Hacker auf unseriöse Seiten weiterleiten, und Web Origins (http://localhost:8080), um Cross-Origin Resource-Sharing zwischen Vue-App (Port 8080) und Keycloak (Port 8081) zu gestatten.

Anlegen eines Users.(Bild: Koller / Keycloak)
Anlegen eines Users.
(Bild: Koller / Keycloak)

Schließlich wird ein User benötigt (Users > Add User). Sein Passwort wird (nach dem Speichern) im Reiter Credentials festgelegt und dabei der Schalter Temporary auf „Off“ gestellt. Mit Realm, Client und User ist die für dieses Beispiel erforderliche Minimal-Konfiguration von Keycloak abgeschlossen.

Vue-Client mit Keycloak-Adapter

Als Client wird eine einfache Vue-2-Anwendung mit dem CLI generiert:

vue create vue-keycloak

Die Anwendung lässt sich mit …

npm run serve

… auf dem Entwicklungsserver starten und dann im Browser unter der URL http://localhost:8080 aufrufen. Zu sehen ist wie erwartet die Webseite der frisch erzeugten Vue-Anwendung. Zur Anbindung an Keycloak wird der JavaScript-Adapter von Keykloak verwendet. Er wird mit dem folgenden Kommando, ausgeführt im Projektordner, installiert:

npm i keycloak-js --save

Außerdem wird gleich noch der http-Client Axios installiert, mit dem auf Ressourcen wie etwa eine REST-Schnittstelle zugegriffen werden kann:

npm i axios

Anschließend wird der Inhalt von main.js mit dem folgenden Code überschrieben. Im Objekt initOptions finden sich die Keycloak-relevanten Daten:

import Vue from 'vue'
import App from './App.vue'
import Keycloak from 'keycloak-js'let initOptions = {
  url: 'http://127.0.0.1:8081/auth', realm: 'test', clientId: 'vue-app', onLoad: 'login-required'
  }let keycloak = Keycloak(initOptions);keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  if (!auth) {
    window.location.reload();
  } else {
    console.log("Authenticated");    new Vue({
      el: '#app',
      render: h => h(App, { props: { keycloak: keycloak } })
    })
  }  //Token Refresh
  setInterval(() => {
    keycloak.updateToken(70).then((refreshed) => {
      if (refreshed) {
        console.log('Token refreshed' + refreshed);
      } else {
        console.log('Token not refreshed, valid for '
          + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
      }
    }).catch(() => {
      console.log('Failed to refresh token');
    });
  }, 6000)}).catch(() => {
  console.log("Authenticated Failed");
});

Startet man nun die Anwendung mit …

npm run serve

… und öffnet im Browser die Anwendungs-URL (http://localhost:8080), dann landet man nicht mehr wie zuvor auf der Startseite, sondern wird auf die Keycloak-Login-Seite weitergeleitet.

Login mit dem zuvor angelegten User.(Bild: Koller / Keycloak)
Login mit dem zuvor angelegten User.
(Bild: Koller / Keycloak)

Dort kann man sich nun mit dem angelegten Benutzer und Passwort authentifizieren und wird danach von Keycloak auf die eigentlich angeforderte Seite weitergeleitet. Die Authentifizierung ist damit abgeschlossen. Erwähnenswert dabei ist, dass die Vue-App als Client die Nutzerdaten nicht kennt. Nach dem Einloggen erhält die App einen Autorisierungs-Code von Keycloak, das Verfahren wird deshalb auch als Authorization Code-Flow bezeichnet.

Sicherer Backend-Zugriff mit Access-Token

Den Autorisierungscode tauscht die Anwendung in einem Keycloak-Request gegen ein ID-Token und ein Access-Token. Mit Letzterem lässt sich auf geschützte Ressourcen wie etwa eine REST-Schnittstelle zugreifen. Das Backend entscheidet anhand der Informationen im Token, ob der Zugriff gestattet ist. Um das besser zu verstehen, kann man den Access-Token in der Konsole ausgeben:

…
new Vue({
  el: '#app',
  render: h => h(App, { props: { keycloak: keycloak } })
})
...localStorage.setItem("access-token", keycloak.token);
console.log(keycloak.token);

Im Folgenden ist ein kleiner Teil des Tokens wiedergegeben:

eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICItS01

Bei der Zeichenkette handelt es sich um signiertes JWT-Token, dessen Signatur die Backend-Anwendung mithilfe eines von Keycloak angeforderten Public-Keys validiert. Es ist deshalb nicht möglich, die Daten zu ändern. Man kann sie aber zum Beispiel mit der Webseite jwt.io in eine lesbare Form bringen. Im Token finden sich in sogenannten Claims Daten wie Ablaufzeitpunkt (exp), Ausstellungszeitpunkt (iat), Aussteller des Tokens (iss) sowie Informationen über den angemeldeten Benutzer und seine Zugriffsrechte in Form von Realm-Rollen, Client-Rollen und Scopes:

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu RZ- und Server-Technik

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung
{
  "exp": 1659790382,
  "iat": 1659790082,
  "auth_time": 1659790082,
  "jti": "f9f2ef19-5d1f-45d3-9b72-84e4ee4434b2",
  "iss": "http://192.168.178.110:8081/auth/realms/test",
  "aud": "account",
  "sub": "afbf2bdf-44c7-44db-a869-ed998076cf6e",
  "typ": "Bearer",
  "azp": "vue-app",
  "nonce": "5e55faa4-7ad8-4124-877f-f9dd233982cb",
  "session_state": "54df0d6f-ead3-4cd7-910e-99c95ff7fb61",
  "acr": "1",
  "allowed-origins": [
    "http://localhost:8080"
  ],
  "realm_access": {
    "roles": [
      "default-roles-test",
      "offline_access",
      "uma_authorization"
    ]
  },
  "resource_access": {
    "account": {
      "roles": [
        "manage-account",
        "manage-account-links",
        "view-profile"
      ]
    }
  },
  "scope": "openid profile email",
  "sid": "54d06d6f-ead3-4cd7-910e-99c95ff7fb61",
  "email_verified": false,
  "name": "Max Mustermann",
  "preferred_username": "max",
  "given_name": "Max",
  "family_name": "Mustermann"
}

Für den Zugriff auf ein geschütztes Backend wird das Access-Token im Authorization-Header des Requests, beginnend mit der Kennung ‘Bearer’ mitgegeben. Das folgende Codestück zeigt das exemplarisch auf:

const token = localStorage.getItem('access-token');
axios.get("http://localhost:8081", {
  headers: {"Authorization" : 'Bearer ${token} '} })
    .then(response => console.log(response.data));
}

Das Backend „kennt“ den Keycloak-Server, holt sich von dort den Public-Key zur Entschlüsselung und wird den Zugriff nur gestatten, wenn das Token von der passenden Keycloak-Instanz ausgestellt wurde, die Signatur gültig ist und die aufgeführten Rechte den im Backend formulierten Anforderungen (zum Beispiel hasRole(“ADMIN”)) genügen.

(ID:48540769)

Weiterführende Inhalte