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

Cleanup

Browse source
This commit is contained in:
phil 2025-01-30 20:34:22 +01:00
parent 889c62f51e
commit 14c9091e77
4 changed files with 83 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -11,7 +11,7 @@
"type-check": "vue-tsc --build" "type-check": "vue-tsc --build"
}, },
"dependencies": { "dependencies": {
"@dsb-norge/vue-keycloak-js": "3.0.1", "@dsb-norge/vue-keycloak-js": "^3.0.1",
"axios": "1.7.9", "axios": "1.7.9",
"keycloak-js": "^26.1.0", "keycloak-js": "^26.1.0",
"vue": "3.5.13" "vue": "3.5.13"

2
pnpm-lock.yaml generated
View file

@ -9,7 +9,7 @@ importers:
.: .:
dependencies: dependencies:
'@dsb-norge/vue-keycloak-js': '@dsb-norge/vue-keycloak-js':
specifier: 3.0.1 specifier: ^3.0.1
version: 3.0.1(vue@3.5.13(typescript@5.6.3)) version: 3.0.1(vue@3.5.13(typescript@5.6.3))
axios: axios:
specifier: 1.7.9 specifier: 1.7.9

81
src/App.vue
View file

@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { HTTP } from '@/main' import { authServer, resourceServer } from '@/main'
import type { AxiosResponseHeaders } from 'axios' import type { AxiosResponseHeaders } from 'axios'
import { ref } from 'vue' import { ref } from 'vue'
import Keycloak from "keycloak-js"
import { useKeycloak } from '@dsb-norge/vue-keycloak-js' import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
import { settings } from '../settings' import { settings } from '../settings'
@ -17,7 +18,7 @@ function manuallyRefreshAccessToken() {
async function doAuthenticatedRequest() { async function doAuthenticatedRequest() {
// Doesn't really go anywhere, but as you see from the headers in the request // Doesn't really go anywhere, but as you see from the headers in the request
// it contains the latest access token at all times // it contains the latest access token at all times
const response = await HTTP.get('/oidc-test-web') const response = await authServer.get('/oidc-test-web')
requestHeaders.value = response.config.headers requestHeaders.value = response.config.headers
} }
@ -30,51 +31,55 @@ function accountManagemnt() {
} }
async function get_resource(id: string) { async function get_resource(id: string) {
await HTTP.get(`${settings.url}/${id}`).then( if (!keycloak.keycloak) { return }
await keycloak.keycloak.updateToken(5000)
await resourceServer.get(id).then(
resp => resource.value = resp['data'] resp => resource.value = resp['data']
) )
} }
</script> </script>
<template> <template>
<h1>OIDC-test - web client</h1> <div id="app">
<p class="center"> <h1>OIDC-test - web client</h1>
Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider. <p class="center">
</p> Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
<div v-if="keycloak.authenticated" class="user-info"> </p>
<p>Hey, {{ keycloak.idTokenParsed?.name }}</p> <div v-if="keycloak.authenticated" class="user-info">
<img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img> <p>Hey, {{ keycloak.idTokenParsed?.name }}</p>
<div>{{ keycloak.idTokenParsed?.email }}</div> <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
<div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']"> <div>{{ keycloak.idTokenParsed?.email }}</div>
<span>Roles:</span> <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
<span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{ <span>Roles:</span>
role }}</span> <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{
role }}</span>
</div>
<div v-if="keycloak.idTokenParsed?.oidc_provider">
<span>Provider:</span>
{{ keycloak.idTokenParsed?.oidc_provider }}
</div>
<button @click="accountManagemnt">Account management</button>
<button @click="logout" class="logout">Logout</button>
</div> </div>
<div v-if="keycloak.idTokenParsed?.oidc_provider"> <hr>
<span>Provider:</span> <p class="center">Fetch resources from a resource server (at {{ settings.url }}) with the authentication token:</p>
{{ keycloak.idTokenParsed?.oidc_provider }} <div class="actions">
<button @click="get_resource('time')">Time</button>
<button @click="get_resource('bs')">BS</button>
</div> </div>
<button @click="accountManagemnt">Account management</button> <div class="resources">
<button @click="logout" class="logout">Logout</button> <div v-if="Object.entries(resource).length > 0" class="resource">
</div> <div v-for="(value, key) in resource">
<hr> <div class="key">{{ key }}</div>
<p class="center">Fetch resources from a resource server (at {{ settings.url }}) with the authentication token:</p> <div class="value">{{ value }}</div>
<div class="actions"> </div>
<button @click="get_resource('time')">Time</button> </div>
<button @click="get_resource('bs')">BS</button> </div>
</div> <div class="from-keycloak-vue">
<div class="resources"> <button @click="doAuthenticatedRequest">Trigger request</button>
<div v-if="Object.entries(resource).length > 0" class="resource"> <button @click="manuallyRefreshAccessToken">Refresh access token</button>
<div v-for="(value, key) in resource"> <div class="token" :innerText="requestHeaders?.toString()">
<div class="key">{{ key }}</div>
<div class="value">{{ value }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="from-keycloak-vue">
<button @click="doAuthenticatedRequest">Trigger request</button>
<button @click="manuallyRefreshAccessToken">Refresh access token</button>
<div class="token" :innerText="requestHeaders?.toString()">
</div>
</div>
</template> </template>

60
src/main.ts
View file

@ -1,38 +1,54 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import Keycloak from "keycloak-js" import Keycloak from "keycloak-js"
import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js' import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
import axios from 'axios' import axios from 'axios'
import App from './App.vue' import App from './App.vue'
import { settings as app_settings } from "../settings" import { settings } from "../settings"
export const HTTP = axios.create({ export const authServer = axios.create({
baseURL: '/', baseURL: '/',
timeout: 10000 timeout: 10000
}) })
function initializeTokenInterceptor() { export const resourceServer = axios.create({
HTTP.interceptors.request.use(settings => { baseURL: settings.url,
const keycloak = useKeycloak() timeout: 10000
})
function initializeTokenInterceptor(keycloak: Keycloak) {
authServer.interceptors.request.use(axiosSettings => {
if (keycloak.authenticated) { if (keycloak.authenticated) {
settings.headers.Authorization = `Bearer ${keycloak.token}` axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
settings.headers.auth_provider = app_settings.auth_provider axiosSettings.headers.auth_provider = settings.auth_provider
} }
return settings return axiosSettings
}, error => {
return Promise.reject(error)
})
resourceServer.interceptors.request.use(axiosSettings => {
if (keycloak.authenticated) {
axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
axiosSettings.headers.auth_provider = settings.auth_provider
}
return axiosSettings
}, error => { }, error => {
return Promise.reject(error) return Promise.reject(error)
}) })
} }
createApp(App) const app = createApp(App)
.use(VueKeycloakJs, { app.mount('#app')
config: { app.use(VueKeycloakJs, {
url: 'https://philo.ydns.eu/auth/', config: {
realm: 'test', url: 'https://philo.ydns.eu/auth/',
clientId: 'oidc-test-web', realm: 'test',
}, clientId: 'oidc-test-web',
init: { onLoad: app_settings.sso ? 'check-sso' : 'login-required' }, },
onReady(keycloak: Keycloak, vkk) { init: {
initializeTokenInterceptor() onLoad: settings.sso ? 'check-sso' : 'login-required',
}, scope: "openid email profile get:time get:bs"
}) },
.mount('#app') onReady(keycloak: Keycloak) {
initializeTokenInterceptor(keycloak)
},
})