Merge pull request #1 from joschuatonn/feature/keycloak

Feature/keycloak
2024-05-01 00:28:46 +02:00
parent 89f757ca98 be77bddb61
commit 39c9b1b83f
17 changed files with 299 additions and 30 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,4 +4,5 @@
 /.quasar
 /node_modules
 .eslintrc.cjs
+/src
 /quasar.config.*.temporary.compiled*
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -46,11 +46,11 @@ module.exports = {
    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
    // required to lint *.vue files
    'vue'
-    
+
    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
-    
+
  ],

  globals: {
@@ -68,10 +68,8 @@ module.exports = {

  // add your custom rules here
  rules: {
-    
-    'prefer-promise-reject-errors': 'off',

-    quotes: ['warn', 'single', { avoidEscape: true }],
+    'prefer-promise-reject-errors': 'off',

    // this rule, if on, would require explicit return type on the `render` function
    '@typescript-eslint/explicit-function-return-type': 'off',
--- a/index.html
+++ b/index.html
@@ -9,13 +9,14 @@
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+<!--    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link rel="icon" type="image/ico" href="favicon.ico">-->
  </head>
  <body>
+    <script type="module" src="/src/main.ts"></script>
    <!-- quasar:entry-point -->
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@quasar/extras": "^1.16.4",
        "axios": "^1.2.1",
+        "keycloak-js": "^24.0.3",
        "pinia": "^2.0.11",
        "quasar": "^2.8.0",
        "vue": "^3.4.18",
@@ -4677,6 +4678,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/js-sha256": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.11.0.tgz",
+      "integrity": "sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q=="
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4785,6 +4791,23 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/keycloak-js": {
+      "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"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10797,6 +10820,11 @@
      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
      "dev": true
    },
+    "js-sha256": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.11.0.tgz",
+      "integrity": "sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10884,6 +10912,20 @@
        "universalify": "^2.0.0"
      }
    },
+    "jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA=="
+    },
+    "keycloak-js": {
+      "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"
+      }
+    },
    "keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
--- a/package.json
+++ b/package.json
@@ -13,29 +13,30 @@
    "build": "quasar build"
  },
  "dependencies": {
-    "axios": "^1.2.1",
-    "vue-i18n": "^9.2.2",
-    "pinia": "^2.0.11",
    "@quasar/extras": "^1.16.4",
+    "axios": "^1.2.1",
+    "keycloak-js": "^24.0.3",
+    "pinia": "^2.0.11",
    "quasar": "^2.8.0",
    "vue": "^3.4.18",
+    "vue-i18n": "^9.2.2",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "vite-plugin-checker": "^0.6.4",
-    "vue-tsc": "^1.8.22",
-    "eslint": "^8.11.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "eslint-config-prettier": "^8.1.0",
-    "prettier": "^2.5.1",
-    "@types/node": "^12.20.21",
    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
    "@quasar/app-vite": "^1.8.0",
    "@quasar/cli": "^2.4.0",
+    "@types/node": "^12.20.21",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
-    "typescript": "^4.5.4"
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.4",
+    "vite-plugin-checker": "^0.6.4",
+    "vue-tsc": "^1.8.22"
  },
  "engines": {
    "node": "^20 || ^18 || ^16",
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -60,7 +60,16 @@ module.exports = configure(function (/* ctx */) {

      // publicPath: '/',
      // analyze: true,
-      // env: {},
+      env: {
+        //Defined in realm_export.json
+        KEYCLOAK_REALM:'PraxistransferKeycloak',
+        KEYCLOAK_CLIENT_ID:'praxistransfer',
+
+        //Defined in realm_export.json, initialize_keycloak.sh and quasar.config.js
+        PORT_KEYCLOAK:8083,
+        PORT_FRONTEND:8080,
+        PORT_BACKEND:8081,
+      },
      // rawDefine: {}
      // ignorePublicFolder: true,
      // minify: false,
@@ -93,11 +102,19 @@ module.exports = configure(function (/* ctx */) {
      ]
    },

+
    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
    devServer: {
      // https: true
-      port: 8081, // default: 3000; changed to 8081 to match keycloak settings
-      open: true // opens browser window automatically
+      port: 8080, // default: 3000; changed to 8080 to match keycloak settings
+      open: true, // opens browser window automatically
+      proxy: {
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true
+        }
+      },
+
    },

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,27 @@
-<template>
-  <router-view />
-</template>
-
 <script setup lang="ts">
+import { RouterView } from 'vue-router';
+import ProtectedData from './components/ProtectedData.vue';
 defineOptions({
  name: 'App'
 });
 </script>
+
+<template>
+  <header>
+    <img alt="Quasar logo" src="./assets/quasar-logo-vertical.svg" width="200vw"/>
+
+    <ProtectedData />
+  </header>
+  <router-view />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 7vh;
+}
+</style>
--- 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
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { useKeycloakStore } from '../stores/keycloakStore';
+import {defineComponent, onMounted, ref} from 'vue';
+import {useUserStore} from 'stores/user-store';
+
+/*const protectedData = ref("");
+const keycloakStore = useKeycloakStore();
+
+function fetchProtectedData() {
+  const keycloak = keycloakStore.getKeycloak;
+  if(!keycloak){
+    return;
+  }
+  let myHeaders = new Headers();
+  if(!keycloak.token){
+    return;
+  }
+  myHeaders.append("Authorization", "Bearer " + keycloak.token);
+  let requestOptons = {
+    headers: myHeaders,
+  };
+  fetch("localhost:"+ import.meta.env.PORT_BACKEND + "/api/protected", requestOptons)
+    .then((response) => response.text())
+    .then((data) => {
+      protectedData.value = data;
+      console.info("Protected data: ", data);
+    }).catch((e)=>console.error("Error fetching protected data: ", e));
+}
+onMounted(() => {
+  console.info("Protected component mounted");
+  fetchProtectedData();
+});*/
+
+export default defineComponent({
+  name: 'ProtectedData',
+  components: {},
+
+  setup() {
+    const userStore = useUserStore();
+
+    return userStore;
+  }
+})
+
+</script>
+
+<template>
+  <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>
+
+</style>
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -21,7 +21,6 @@

    <q-drawer
      v-model="leftDrawerOpen"
-      show-if-above
      bordered
    >
      <q-list>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,62 @@
+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';
+import {useUserStore} from 'stores/user-store';
+
+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.
+ */
+
+const keycloak = new Keycloak({
+  url: 'http://localhost:8083/',
+  realm: 'PraxistransferKeycloak',
+  clientId: 'praxistransfer'
+});
+
+console.log("ICH WAR HIER");
+
+try {
+  const authenticated = await keycloak.init({
+    onLoad: 'login-required',
+    redirectUri: 'http://localhost:8080/test/'
+  }).then( (auth) => {
+    console.log("Authenticated :" + authenticated);
+  });
+
+} catch (error) {
+  console.error(error);
+}
+
+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/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -11,7 +11,7 @@

 <script setup lang="ts">
 import { ref } from 'vue';
-import { Todo, Meta } from 'components/models';
+import { Todo, Meta } from '../components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';

 defineOptions({
--- 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/keycloakStore.ts
+++ b/src/stores/keycloakStore.ts
@@ -0,0 +1,18 @@
+import type Keycloak from 'keycloak-js';
+import { defineStore } from 'pinia';
+//import api from 'axios';
+
+export const useKeycloakStore = defineStore('keycloakStore', {
+  state: ()=>({
+    keycloak: null as Keycloak| null,
+  }),
+  getters: {
+    getKeycloak: (state) => state.keycloak,
+  },
+  actions:{
+    setKeycloak(keycloak: Keycloak): void {
+      this.keycloak = keycloak;
+    },
+
+  },
+});
--- 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;
+    },
+  },
+});