philorg/oidc-vue-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add roles, logout, cleanup

Browse source
This commit is contained in:
phil 2025-01-26 03:52:08 +01:00
parent da2751d7a9
commit c4cc6f71f1
5 changed files with 26 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios interceptor example</title> <title>OIDC test web</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

46
src/App.vue
View file

@ -20,56 +20,36 @@ async function doAuthenticatedRequest() {
requestHeaders.value = response.config.headers requestHeaders.value = response.config.headers
} }
/* function logout() {
class User { keycloak.logoutFn()
public sub: string
public name: string
public picture: string
public email: string
} }
function createUser(): User { function accountManagemnt() {
return new User( keycloak.accountManagement()
keycloak.sub,
keycloak.fullName,
keycloak.picture,
keycloak.email,
)
} }
let user: User
keycloak.onAuthSuccess = () => {
user: User = createUser()
}
*/
</script> </script>
<template> <template>
<h1>OIDC pure web client test</h1> <h1>OIDC pure web client test</h1>
<div v-if="keycloak.authenticated" class="user-info"> <div v-if="keycloak.authenticated" class="user-info">
<p>Hey, {{ keycloak.idTokenParsed.fullName }}</p> <p>Hey, {{ keycloak.idTokenParsed.name }}</p>
<img v-if="keycloak.idTokenParsed.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img> <img v-if="keycloak.idTokenParsed.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
<div>{{ keycloak.idTokenParsed.email }}</div> <div>{{ keycloak.idTokenParsed.email }}</div>
<!-- <div v-if="keycloak.resourceAccess['oidc-test-web']">
<div v-if="keycloak.idTokenParsed.roles">
<span>Roles:</span> <span>Roles:</span>
{% for role in user.roles %} <span v-for="role in keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{ role }}</span>
<span class="role">{{ .name }}</span>
{% endfor %}
</div> </div>
--> <div v-if="keycloak.idTokenParsed.oidc_provider">
<div v-if="keycloak.idTokenParsed.oidc_provider">>
<span>Provider:</span> <span>Provider:</span>
{{ keycloak.idTokenParsed.oidc_provider }} {{ keycloak.idTokenParsed.oidc_provider }}
</div> </div>
<a href="logout" class="logout">Logout</a> <button @click="logout" class="logout">Logout</button>
<button @click="accountManagemnt">Account management</button>
</div> </div>
<div> <div class="from-keycloak-vue">
<div>Hey {{ keycloak?.fullName }}</div>
<button @click="doAuthenticatedRequest">Trigger request</button> <button @click="doAuthenticatedRequest">Trigger request</button>
<button @click="manuallyRefreshAccessToken">Refresh access token</button> <button @click="manuallyRefreshAccessToken">Refresh access token</button>
<div> <div class="token" :innerText="requestHeaders?.toString()">
<textarea :value="requestHeaders?.toString()" readonly></textarea>
</div> </div>
</div> </div>
</template> </template>

7
src/assets/styles.css
View file

@ -166,4 +166,11 @@ hr {
border-radius: 8px; border-radius: 8px;
} }
.token {
overflow-wrap: anywhere;
font-family: monospace;
}
.from-keycloak-vue {
display: none;
}

7
src/main.ts
View file

@ -6,7 +6,7 @@ import App from './App.vue'
export const HTTP = axios.create({ export const HTTP = axios.create({
baseURL: '/', baseURL: '/',
timeout: 10_000 timeout: 10.000
}) })
function initializeTokenInterceptor() { function initializeTokenInterceptor() {
@ -28,9 +28,8 @@ createApp(App)
realm: 'test', realm: 'test',
clientId: 'oidc-test-web', clientId: 'oidc-test-web',
}, },
onReady(kk: Keycloak, vkk) { init: { onLoad: 'check-sso' },
//console.log(kk, vkk) onReady(keycloak: Keycloak, vkk) {
console.log(kk.idTokenParsed)
initializeTokenInterceptor() initializeTokenInterceptor()
}, },
}) })

12
vite.config.ts
View file

@ -5,25 +5,17 @@ import fs from 'fs';
import path from 'path'; import path from 'path';
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools' //import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), //vueDevTools(),
], ],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
}, },
},
server: {
https: {
// key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
// cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
key: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4-key.pem')),
cert: fs.readFileSync(path.resolve("/home/phil", 'tiptop+4.pem')),
},
} }
}) })