implemented first keycloak stuff, still needs some config on keycloak and backend side to work

2024-04-14 18:36:34 +02:00
parent 2afdee807e
commit ceac1855f3
11 changed files with 237 additions and 29 deletions
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,76 @@
+import {createApp} from 'vue';
+import {createPinia} from 'pinia';
+
+import App from './App.vue';
+
+import Keycloak, {type KeycloakConfig, type KeycloakInitOptions} from 'keycloak-js';
+import { useKeycloakStore } from 'stores/keycloakStore';
+
+const app = createApp(App);
+app.use(createPinia());
+
+/**
+ * Initialisierungsoptionen für Keycloak.
+ * @param url URL zu Keycloak, Port definiert in keycloak_init.sh und quasar.config.js-Datei. Müssen identisch sein!
+ * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
+ * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
+ * @param onLoad = 'login-required': Hierdurch wird zum Aufrufen der ganzen Applikation ein login benötigt.
+ * @param redirectUri: URL, zu der nach dem Login weitergeleitet wird. Hierbei wird die Port des Frontends aus der .env-Datei verwendet.
+ */
+
+console.log("Keycloak Client ID: "+process.env.KEYCLOAK_CLIENT_ID);
+
+const keycloakConfig: KeycloakConfig = {
+  url: 'http://localhost:'+ process.env.PORT_KEYCLOAK as string+'/auth',
+  realm: process.env.KEYCLOAK_REALM as string,
+  clientId: process.env.KEYCLOAK_CLIENT_ID as string,
+};
+const initOptions: KeycloakInitOptions = {
+  onLoad: 'login-required',
+  redirectUri: 'http://localhost:8080/'//+ import.meta.env.PORT_FRONTEND as string +'/',
+};
+console.log(keycloakConfig);
+console.log(initOptions);
+const keycloak: Keycloak = new Keycloak(keycloakConfig);
+
+const keycloakStore = useKeycloakStore();
+keycloakStore.setKeycloak(keycloak);
+
+/**
+ * Initialisierung von Keycloak.
+ * Beginnt authentifizierungsprozess und lädt die Applikation neu, falls Authentifizierung fehlschlägt.
+ * Weiterhin wird ein Tokenrefresh alle 70 Sekunden initialisiert.
+ */
+keycloak.init(initOptions).then((auth: boolean) => {
+  if (!auth) {
+    window.location.reload(); //Falls Authentifizierung fehlschlägt, wird die Seite neu geladen.
+  } else {
+    console.log('Authenticated'); //Loggt, dass Authentifizierung erfolgreich war.
+    app.mount('#app'); //App wird geladen.
+    if(keycloak.token) { //Überprüft, ob Token vorhanden ist.
+      localStorage.setItem('vue-keycloak-token', keycloak.token); //Token wird in localStorage gespeichert, um es später auswerten zu können.
+    }
+    if(keycloak.refreshToken) { //Überprüft, ob Refresh-Token vorhanden ist.
+      localStorage.setItem('vue-keycloak-refresh-token', keycloak.refreshToken); //Refresh-Token wird in localStorage gespeichert, um bei Ablauf des Tokens ein neues Token ohne erneute Authentifizierung zu erhalten.
+    }
+  }
+
+  //Token Refresh
+  setInterval(() => {
+    keycloak.updateToken(70).then((refreshed: boolean) => { //Token wird alle 70 Sekunden aktualisiert.
+      if (refreshed) {
+        console.log('Token refreshed');
+      } else {
+        console.warn('Token not refreshed');
+        if(keycloak.tokenParsed && keycloak.tokenParsed.exp && keycloak.timeSkew){ //Fängt Probleme mit undefined Variablen ab
+          console.log('Token is still valid for '
+            + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds'); //Loggt, wie lange das Token noch gültig ist.
+        }
+      }
+    }).catch(() => {
+      console.error('Failed to refresh token'); //Loggt, dass Token nicht aktualisiert werden konnte.
+    });
+  }, 60000);
+}).catch((e) => {
+  console.error('Authenticated Failed', e);
+});