- Connected keycloak

- changed backend-api port - started to work with the keycloak token to receive userdata - connected backend-api
2024-04-29 10:30:25 +02:00
parent 12bc0a3733
commit ab1c4d0705
11 changed files with 127 additions and 82 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,4 +4,5 @@
 /.quasar
 /node_modules
 .eslintrc.cjs
+/src
 /quasar.config.*.temporary.compiled*
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
      "dependencies": {
        "@quasar/extras": "^1.16.4",
        "axios": "^1.2.1",
-        "keycloak-js": "^24.0.2",
+        "keycloak-js": "^24.0.3",
        "pinia": "^2.0.11",
        "quasar": "^2.8.0",
        "vue": "^3.4.18",
@@ -4800,9 +4800,9 @@
      }
    },
    "node_modules/keycloak-js": {
-      "version": "24.0.2",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-24.0.2.tgz",
-      "integrity": "sha512-V2N8cSz3NfON98XHp+DCzvrb1WW35JalL5Zphe/uoVWOxcof7v522Yz9Q2O3BqXqXP3V/H9ml6o24BwwtXUTGA==",
+      "version": "24.0.3",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-24.0.3.tgz",
+      "integrity": "sha512-4L0zTiQATKZiGQ6WM5qjjUIrN7pntzHDy4JebvgWA+im3oUDQ8UmQhIU0wnhONKrUK8pM4chyE/vDNStBNcR8w==",
      "dependencies": {
        "js-sha256": "^0.11.0",
        "jwt-decode": "^4.0.0"
@@ -10918,9 +10918,9 @@
      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA=="
    },
    "keycloak-js": {
-      "version": "24.0.2",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-24.0.2.tgz",
-      "integrity": "sha512-V2N8cSz3NfON98XHp+DCzvrb1WW35JalL5Zphe/uoVWOxcof7v522Yz9Q2O3BqXqXP3V/H9ml6o24BwwtXUTGA==",
+      "version": "24.0.3",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-24.0.3.tgz",
+      "integrity": "sha512-4L0zTiQATKZiGQ6WM5qjjUIrN7pntzHDy4JebvgWA+im3oUDQ8UmQhIU0wnhONKrUK8pM4chyE/vDNStBNcR8w==",
      "requires": {
        "js-sha256": "^0.11.0",
        "jwt-decode": "^4.0.0"
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
  "dependencies": {
    "@quasar/extras": "^1.16.4",
    "axios": "^1.2.1",
-    "keycloak-js": "^24.0.2",
+    "keycloak-js": "^24.0.3",
    "pinia": "^2.0.11",
    "quasar": "^2.8.0",
    "vue": "^3.4.18",
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -68,7 +68,7 @@ module.exports = configure(function (/* ctx */) {
        //Defined in realm_export.json, initialize_keycloak.sh and quasar.config.js
        PORT_KEYCLOAK:8083,
        PORT_FRONTEND:8080,
-        PORT_BACKEND:8181,
+        PORT_BACKEND:8081,
      },
      // rawDefine: {}
      // ignorePublicFolder: true,
@@ -102,6 +102,7 @@ module.exports = configure(function (/* ctx */) {
      ]
    },

+
    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
    devServer: {
      // https: true
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -14,7 +14,7 @@ declare module '@vue/runtime-core' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' });
+const api = axios.create({ baseURL: 'http://localhost:'+ process.env.PORT_BACKEND });

 export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api
--- a/src/components/ProtectedData.vue
+++ b/src/components/ProtectedData.vue
@@ -1,8 +1,9 @@
-<script setup lang="ts">
+<script lang="ts">
 import { useKeycloakStore } from '../stores/keycloakStore';
-import { onMounted, ref } from 'vue';
+import {defineComponent, onMounted, ref} from 'vue';
+import {useUserStore} from 'stores/user-store';

-const protectedData = ref("");
+/*const protectedData = ref("");
 const keycloakStore = useKeycloakStore();

 function fetchProtectedData() {
@@ -28,11 +29,29 @@ function fetchProtectedData() {
 onMounted(() => {
  console.info("Protected component mounted");
  fetchProtectedData();
-});
+});*/
+
+export default defineComponent({
+  name: 'ProtectedData',
+  components: {},
+
+  setup() {
+    const userStore = useUserStore();
+
+    return userStore;
+  }
+})
+
 </script>

 <template>
-  <h3>Data: {{ protectedData }}</h3>
+  <h3>Nutzerdaten</h3>
+  <div v-if="userLoaded">
+    <p>{{ user.firstName }}</p>
+    <p>{{ user.lastName }}</p>
+    <p>{{ user.username }}</p>
+    <p>{{ user.keycloakID }}</p>
+  </div>
 </template>

 <style scoped>
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue';

 import Keycloak, {type KeycloakConfig, type KeycloakInitOptions} from 'keycloak-js';
 import { useKeycloakStore } from 'stores/keycloakStore';
+import {useUserStore} from 'stores/user-store';

 const app = createApp(App);
 app.use(createPinia());
@@ -18,74 +19,44 @@ app.use(createPinia());
 * @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 keycloak = new Keycloak({
+  url: 'http://localhost:8083/',
+  realm: 'PraxistransferKeycloak',
+  clientId: 'praxistransfer'
+});

-const keycloakConfig: KeycloakConfig = {
-  url: 'http://localhost:'+ process.env.PORT_KEYCLOAK as string+'/',
-  realm: process.env.KEYCLOAK_REALM as string,
-  clientId: process.env.KEYCLOAK_CLIENT_ID as string,
-};
-const initOptions: KeycloakInitOptions = {
+console.log("ICH WAR HIER");
+
+try {
+  const authenticated = await keycloak.init({
    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.
- */
-if(keycloakStore.keycloak) {
-  await keycloakStore.keycloak.init(initOptions).then((auth: boolean) => {
-    if(keycloakStore.keycloak) {
-      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 (keycloakStore.keycloak.token) { //Überprüft, ob Token vorhanden ist.
-          console.log('Token: ' + keycloakStore.keycloak.token); //Loggt Token.
-          localStorage.setItem('vue-keycloak-token', keycloakStore.keycloak.token); //Token wird in localStorage gespeichert, um es später auswerten zu können.
-        } else console.log('No Token'); //Loggt, dass kein Token vorhanden ist.
-        if (keycloakStore.keycloak.refreshToken) { //Überprüft, ob Refresh-Token vorhanden ist.
-          console.log('Refresh-Token: ' + keycloakStore.keycloak.refreshToken); //Loggt Refresh-Token.
-          localStorage.setItem('vue-keycloak-refresh-token', keycloakStore.keycloak.refreshToken); //Refresh-Token wird in localStorage gespeichert, um bei Ablauf des Tokens ein neues Token ohne erneute Authentifizierung zu erhalten.
-        } else console.log('No Refresh-Token'); //Loggt, dass kein Refresh-Token vorhanden ist.
-        if (keycloakStore.keycloak.userInfo){ //Überprüft, ob User-Informationen vorhanden sind.
-          console.log('User: ' + keycloakStore.keycloak.userInfo); //Loggt User-Informationen.
-          localStorage.setItem('vue-keycloak-user', JSON.stringify(keycloakStore.keycloak.userInfo)); //User-Informationen werden in localStorage gespeichert, um sie später auswerten zu können.
-        } else console.log('No User'); //Loggt, dass keine User-Informationen vorhanden sind.
-      }
-
-      //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);
+    redirectUri: 'http://localhost:8080/test/'
+  }).then( (auth) => {
+    console.log("Authenticated :" + authenticated);
  });
+
+} catch (error) {
+  console.error(error);
 }
-if(keycloakStore.keycloak){
-  if(keycloakStore.keycloak.userInfo){
-    console.log('User: ' + keycloakStore.keycloak.userInfo);
-  } else console.log('No User');
-} else console.log('Keycloak not initialized');
+
+console.log(keycloak);
+console.log(keycloak.subject);
+
+// Anfrage ans Backend
+const userStore = useUserStore();
+
+if (keycloak.subject != null) {
+  //userStore.loadPtpUsersByKeycloakID(keycloak.subject);
+  userStore.getPtpUserByKeycloakID(keycloak.subject);
+  /*console.log(userStore.userLoaded);
+  if(userStore.userLoaded) {
+    console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
+  }*/
+  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
+    console.log(JSON.stringify(user));
+  })
+} else {
+  console.log("hier ist was schlimmes passiert menno");
+}
+
+
--- a/src/models.ts
+++ b/src/models.ts
@@ -0,0 +1,12 @@
+export interface ptpUser {
+  keycloakID: string;
+  firstName: string;
+  lastName: string;
+  username: string;
+}
+
+export interface responseModel {
+  success: boolean;
+  message: string;
+  response: any;
+}
--- a/src/pages/TestPage.vue
+++ b/src/pages/TestPage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h1>Hallloooooooooo</h1>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -6,6 +6,10 @@ const routes: RouteRecordRaw[] = [
    component: () => import('layouts/MainLayout.vue'),
    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
  },
+  {
+    path: '/test',
+    component: () => import('pages/TestPage.vue')
+  },

  // Always leave this as last one,
  // but you can also remove it
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import {api} from 'boot/axios';
+import {ptpUser, responseModel} from 'src/models';
+import Keycloak from 'keycloak-js';
+
+export const useUserStore = defineStore('userStore', {
+  state: () => ({
+    user: {"keycloakID":null,"firstName":null,"lastName":null,"username":null},
+    userLoaded: false,
+  }),
+  getters: {
+
+  },
+  actions: {
+    getPtpUserByKeycloakID(keycloakID : string) {
+      this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
+        this.user = response.response;
+        this.userLoaded = true;
+        console.log("ich habe das gesetzt: " + JSON.stringify(this.user) + " / " + this.userLoaded);
+      });
+    },
+    async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
+      return (await api.get("/users/login/"+keycloakID)).data;
+    },
+  },
+});