Add resource provider queries
This commit is contained in:
parent
5b6edf8aa3
commit
025a7da07f
6 changed files with 107 additions and 31 deletions
|
|
@ -4,9 +4,10 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OIDC test web</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -174,3 +174,33 @@ hr {
|
|||
.from-keycloak-vue {
|
||||
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
56
src/App.vue
|
|
@ -1,10 +1,11 @@
|
|||
<style src="./assets/styles.css"></style>
|
||||
<script setup lang="ts">
|
||||
import { HTTP } from '@/main'
|
||||
import type { AxiosResponseHeaders } from 'axios'
|
||||
import { ref } from 'vue'
|
||||
import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
|
||||
import { settings } from '../settings'
|
||||
|
||||
let resource = ref({})
|
||||
const keycloak = useKeycloak()
|
||||
const requestHeaders = ref<AxiosResponseHeaders | Partial<unknown> | undefined>()
|
||||
|
||||
|
|
@ -27,28 +28,49 @@ function logout() {
|
|||
function accountManagemnt() {
|
||||
keycloak.accountManagement && keycloak.accountManagement()
|
||||
}
|
||||
|
||||
async function get_resource(id: string) {
|
||||
await HTTP.get(`${settings.url}/${id}`).then(
|
||||
resp => resource.value = resp['data']
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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.
|
||||
</p>
|
||||
<div v-if="keycloak.authenticated" class="user-info">
|
||||
<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.resourceAccess && keycloak.resourceAccess ['oidc-test-web']">
|
||||
<span>Roles:</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>
|
||||
</p>
|
||||
<div v-if="keycloak.authenticated" class="user-info">
|
||||
<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.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
|
||||
<span>Roles:</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>
|
||||
<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">
|
||||
<button @click="doAuthenticatedRequest">Trigger request</button>
|
||||
<button @click="manuallyRefreshAccessToken">Refresh access token</button>
|
||||
|
|
|
|||
12
src/main.ts
12
src/main.ts
|
|
@ -3,19 +3,21 @@ import Keycloak from "keycloak-js"
|
|||
import VueKeycloakJs, { useKeycloak } from '@dsb-norge/vue-keycloak-js'
|
||||
import axios from 'axios'
|
||||
import App from './App.vue'
|
||||
import { settings as app_settings } from "../settings"
|
||||
|
||||
export const HTTP = axios.create({
|
||||
baseURL: '/',
|
||||
timeout: 10.000
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
function initializeTokenInterceptor() {
|
||||
HTTP.interceptors.request.use(config => {
|
||||
HTTP.interceptors.request.use(settings => {
|
||||
const keycloak = useKeycloak()
|
||||
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 => {
|
||||
return Promise.reject(error)
|
||||
})
|
||||
|
|
@ -28,7 +30,7 @@ createApp(App)
|
|||
realm: 'test',
|
||||
clientId: 'oidc-test-web',
|
||||
},
|
||||
//init: { onLoad: 'check-sso' },
|
||||
init: { onLoad: app_settings.sso ? 'check-sso' : 'login-required' },
|
||||
onReady(keycloak: Keycloak, vkk) {
|
||||
initializeTokenInterceptor()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue",
|
||||
"config.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/__tests__/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig, UserConfig } from 'vite'
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
|
@ -7,8 +7,9 @@ import path from 'path';
|
|||
import vue from '@vitejs/plugin-vue'
|
||||
//import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
import { settings } from "./settings"
|
||||
|
||||
let baseSettings: UserConfig = {
|
||||
plugins: [
|
||||
vue(),
|
||||
//vueDevTools(),
|
||||
|
|
@ -17,5 +18,17 @@ export default defineConfig({
|
|||
alias: {
|
||||
'@': 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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue