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

Add resource provider queries

Browse source
This commit is contained in:
phil 2025-01-28 19:50:17 +01:00
parent 5b6edf8aa3
commit 025a7da07f
6 changed files with 107 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -4,9 +4,10 @@
<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>OIDC test web</title> <title>OIDC test web</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="src/main.ts"></script>
</body> </body>
</html> </html>

30
src/assets/styles.css → public/styles.css
View file

@ -174,3 +174,33 @@ hr {
.from-keycloak-vue { .from-keycloak-vue {
display: none; display: none;
} }
.actions {
display: flex;
justify-content: center;
}
.resource {
padding: 0.5em;
display: flex;
gap: 0.5em;
flex-direction: column;
width: fit-content;
align-items: center;
margin: 5px auto;
box-shadow: 0px 0px 10px #90c3ee;
background-color: #90c3ee;
border-radius: 8px;
}
.resources {
display: flex;
}
.resource {
text-align: center;
}
.resource .key {
font-weight: bold;
}

56
src/App.vue
View file

@ -1,10 +1,11 @@
<style src="./assets/styles.css"></style>
<script setup lang="ts"> <script setup lang="ts">
import { HTTP } from '@/main' import { HTTP } from '@/main'
import type { AxiosResponseHeaders } from 'axios' import type { AxiosResponseHeaders } from 'axios'
import { ref } from 'vue' import { ref } from 'vue'
import { useKeycloak } from '@dsb-norge/vue-keycloak-js' import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
import { settings } from '../settings'
let resource = ref({})
const keycloak = useKeycloak() const keycloak = useKeycloak()
const requestHeaders = ref<AxiosResponseHeaders | Partial<unknown> | undefined>() const requestHeaders = ref<AxiosResponseHeaders | Partial<unknown> | undefined>()
@ -27,28 +28,49 @@ function logout() {
function accountManagemnt() { function accountManagemnt() {
keycloak.accountManagement && keycloak.accountManagement() keycloak.accountManagement && keycloak.accountManagement()
} }
async function get_resource(id: string) {
await HTTP.get(`${settings.url}/${id}`).then(
resp => resource.value = resp['data']
)
}
</script> </script>
<template> <template>
<h1>OIDC-test - web client</h1> <h1>OIDC-test - web client</h1>
<p class="center"> <p class="center">
Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider. Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
</p> </p>
<div v-if="keycloak.authenticated" class="user-info"> <div v-if="keycloak.authenticated" class="user-info">
<p>Hey, {{ keycloak.idTokenParsed?.name }}</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 && keycloak.resourceAccess ['oidc-test-web']"> <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
<span>Roles:</span> <span>Roles:</span>
<span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{ role }}</span> <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{
</div> role }}</span>
<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">
<span>Provider:</span>
{{ keycloak.idTokenParsed?.oidc_provider }}
</div>
<button @click="accountManagemnt">Account management</button>
<button @click="logout" class="logout">Logout</button>
</div>
<hr>
<p class="center">Fetch resources from a resource server with the authentication token:</p>
<div class="actions">
<button @click="get_resource('time')">Time</button>
<button @click="get_resource('bs')">BS</button>
</div>
<div class="resources">
<div v-if="Object.entries(resource).length > 0" class="resource">
<div v-for="(value, key) in resource">
<div class="key">{{ key }}</div>
<div class="value">{{ value }}</div>
</div>
</div>
</div>
<div class="from-keycloak-vue"> <div class="from-keycloak-vue">
<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>

12
src/main.ts
View file

@ -3,19 +3,21 @@ import Keycloak from "keycloak-js"
import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js' import VueKeycloakJs, { useKeycloak } 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"
export const HTTP = axios.create({ export const HTTP = axios.create({
baseURL: '/', baseURL: '/',
timeout: 10.000 timeout: 10000
}) })
function initializeTokenInterceptor() { function initializeTokenInterceptor() {
HTTP.interceptors.request.use(config => { HTTP.interceptors.request.use(settings => {
const keycloak = useKeycloak() const keycloak = useKeycloak()
if (keycloak.authenticated) { if (keycloak.authenticated) {
config.headers.Authorization = `Bearer ${keycloak.token}` settings.headers.Authorization = `Bearer ${keycloak.token}`
settings.headers.auth_provider = app_settings.auth_provider
} }
return config return settings
}, error => { }, error => {
return Promise.reject(error) return Promise.reject(error)
}) })
@ -28,7 +30,7 @@ createApp(App)
realm: 'test', realm: 'test',
clientId: 'oidc-test-web', clientId: 'oidc-test-web',
}, },
//init: { onLoad: 'check-sso' }, init: { onLoad: app_settings.sso ? 'check-sso' : 'login-required' },
onReady(keycloak: Keycloak, vkk) { onReady(keycloak: Keycloak, vkk) {
initializeTokenInterceptor() initializeTokenInterceptor()
}, },

16
tsconfig.app.json
View file

@ -1,12 +1,20 @@
{ {
"extends": "@vue/tsconfig/tsconfig.dom.json", "extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "include": [
"exclude": ["src/**/__tests__/*"], "env.d.ts",
"src/**/*",
"src/**/*.vue",
"config.ts"
],
"exclude": [
"src/**/__tests__/*"
],
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": [
"./src/*"
]
} }
} }
} }

21
vite.config.ts
View file

@ -1,5 +1,5 @@
import { fileURLToPath, URL } from 'node:url' import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig, UserConfig } from 'vite'
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
@ -7,8 +7,9 @@ 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/ import { settings } from "./settings"
export default defineConfig({
let baseSettings: UserConfig = {
plugins: [ plugins: [
vue(), vue(),
//vueDevTools(), //vueDevTools(),
@ -17,5 +18,17 @@ export default defineConfig({
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
}, },
},
}
if (settings.key && settings.cert) {
baseSettings['server'] = {
https: {
key: fs.readFileSync(path.resolve(settings.key)),
cert: fs.readFileSync(path.resolve(settings.cert))
}
} }
}) }
// https://vite.dev/config/
export default defineConfig(baseSettings)