apps/ptpchat-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from joschuatonn/feature/keycloak

Browse Source 
Feature/keycloak
This commit is contained in:
JonaKl
2024-05-01 00:28:46 +02:00
committed by GitHub
parent 89f757ca98 be77bddb61
commit 39c9b1b83f
17 changed files with 299 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -4,4 +4,5 @@
/.quasar /.quasar
/node_modules /node_modules
.eslintrc.cjs .eslintrc.cjs
/src
/quasar.config.*.temporary.compiled* /quasar.config.*.temporary.compiled*

8
.eslintrc.cjs
View File

@@ -46,11 +46,11 @@ module.exports = {
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
// required to lint *.vue files // required to lint *.vue files
'vue' 'vue'
// https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
// Prettier has not been included as plugin to avoid performance impact // Prettier has not been included as plugin to avoid performance impact
// add it as an extension for your IDE // add it as an extension for your IDE
], ],
globals: { globals: {
@@ -68,10 +68,8 @@ module.exports = {
// add your custom rules here // add your custom rules here
rules: { 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 // this rule, if on, would require explicit return type on the `render` function
'@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-function-return-type': 'off',

5
index.html
View File

@@ -9,13 +9,14 @@
<meta name="msapplication-tap-highlight" content="no"> <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<% } %>"> <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="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="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.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> </head>
<body> <body>
<script type="module" src="/src/main.ts"></script>
<!-- quasar:entry-point --> <!-- quasar:entry-point -->
</body> </body>
</html> </html>

42
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@quasar/extras": "^1.16.4", "@quasar/extras": "^1.16.4",
"axios": "^1.2.1", "axios": "^1.2.1",
"keycloak-js": "^24.0.3",
"pinia": "^2.0.11", "pinia": "^2.0.11",
"quasar": "^2.8.0", "quasar": "^2.8.0",
"vue": "^3.4.18", "vue": "^3.4.18",
@@ -4677,6 +4678,11 @@
"node": ">=0.10.0" "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": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4785,6 +4791,23 @@
"graceful-fs": "^4.1.6" "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": { "node_modules/keyv": {
"version": "4.5.4", "version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10797,6 +10820,11 @@
"integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
"dev": true "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": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10884,6 +10912,20 @@
"universalify": "^2.0.0" "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": { "keyv": {
"version": "4.5.4", "version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",

27
package.json
View File

@@ -13,29 +13,30 @@
"build": "quasar build" "build": "quasar build"
}, },
"dependencies": { "dependencies": {
"axios": "^1.2.1",
"vue-i18n": "^9.2.2",
"pinia": "^2.0.11",
"@quasar/extras": "^1.16.4", "@quasar/extras": "^1.16.4",
"axios": "^1.2.1",
"keycloak-js": "^24.0.3",
"pinia": "^2.0.11",
"quasar": "^2.8.0", "quasar": "^2.8.0",
"vue": "^3.4.18", "vue": "^3.4.18",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.12" "vue-router": "^4.0.12"
}, },
"devDependencies": { "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", "@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@quasar/app-vite": "^1.8.0", "@quasar/app-vite": "^1.8.0",
"@quasar/cli": "^2.4.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", "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": { "engines": {
"node": "^20 || ^18 || ^16", "node": "^20 || ^18 || ^16",

23
quasar.config.js
View File

@@ -60,7 +60,16 @@ module.exports = configure(function (/* ctx */) {
// publicPath: '/', // publicPath: '/',
// analyze: true, // 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: {} // rawDefine: {}
// ignorePublicFolder: true, // ignorePublicFolder: true,
// minify: false, // 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 // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: { devServer: {
// https: true // https: true
port: 8081, // default: 3000; changed to 8081 to match keycloak settings port: 8080, // default: 3000; changed to 8080 to match keycloak settings
open: true // opens browser window automatically 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 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework

26
src/App.vue
View File

@@ -1,9 +1,27 @@
<template>
<router-view />
</template>
<script setup lang="ts"> <script setup lang="ts">
import { RouterView } from 'vue-router';
import ProtectedData from './components/ProtectedData.vue';
defineOptions({ defineOptions({
name: 'App' name: 'App'
}); });
</script> </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>

2
src/boot/axios.ts
View File

@@ -14,7 +14,7 @@ declare module '@vue/runtime-core' {
// good idea to move this instance creation inside of the // good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually // "export default () => {}" function below (which runs individually
// for each client) // 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 }) => { export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api // for use inside Vue files (Options API) through this.$axios and this.$api

59
src/components/ProtectedData.vue Normal file
View File

@@ -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>

1
src/layouts/MainLayout.vue
View File

@@ -21,7 +21,6 @@
<q-drawer <q-drawer
v-model="leftDrawerOpen" v-model="leftDrawerOpen"
show-if-above
bordered bordered
> >
<q-list> <q-list>

62
src/main.ts Normal file
View File

@@ -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");
}

12
src/models.ts Normal file
View File

@@ -0,0 +1,12 @@
export interface ptpUser {
keycloakID: string;
firstName: string;
lastName: string;
username: string;
}
export interface responseModel {
success: boolean;
message: string;
response: any;
}

2
src/pages/IndexPage.vue
View File

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

11
src/pages/TestPage.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
<h1>Hallloooooooooo</h1>
</template>
<style scoped>
</style>

4
src/router/routes.ts
View File

@@ -6,6 +6,10 @@ const routes: RouteRecordRaw[] = [
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/IndexPage.vue') }], children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
}, },
{
path: '/test',
component: () => import('pages/TestPage.vue')
},
// Always leave this as last one, // Always leave this as last one,
// but you can also remove it // but you can also remove it

18
src/stores/keycloakStore.ts Normal file
View File

@@ -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;
},
},
});

26
src/stores/user-store.ts Normal file
View File

@@ -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;
},
},
});