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

46
src/App.vue
View file

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

7
src/assets/styles.css
View file

@ -166,4 +166,11 @@ hr {
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({
baseURL: '/',
timeout: 10_000
timeout: 10.000
})
function initializeTokenInterceptor() {
@ -28,9 +28,8 @@ createApp(App)
realm: 'test',
clientId: 'oidc-test-web',
},
onReady(kk: Keycloak, vkk) {
//console.log(kk, vkk)
console.log(kk.idTokenParsed)
init: { onLoad: 'check-sso' },
onReady(keycloak: Keycloak, vkk) {
initializeTokenInterceptor()
},
})

12
vite.config.ts
View file

@ -5,25 +5,17 @@ import fs from 'fs';
import path from 'path';
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
//import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
//vueDevTools(),
],
resolve: {
alias: {
'@': 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')),
},
}
})