Add resource provider queries
This commit is contained in:
parent
5b6edf8aa3
commit
025a7da07f
6 changed files with 107 additions and 31 deletions
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>
|
||||
|
|
|
|||
|
|
@ -1,176 +0,0 @@
|
|||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: floralwhite;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: #f786867d;
|
||||
margin: 0 0 0.2em 0;
|
||||
}
|
||||
p {
|
||||
margin: 0.2em;
|
||||
}
|
||||
hr {
|
||||
margin: 0.2em;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.user-info {
|
||||
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 lightgreen;
|
||||
background-color: lightgreen;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.user-info * {
|
||||
flex: 2 1 auto;
|
||||
margin: 0;
|
||||
}
|
||||
.user-info .picture {
|
||||
max-width: 3em;
|
||||
max-height: 3em
|
||||
}
|
||||
.user-info a.logout {
|
||||
border: 2px solid darkkhaki;
|
||||
padding: 3px 6px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
.user-info a.logout:hover {
|
||||
background-color: orange;
|
||||
}
|
||||
.debug-auth {
|
||||
font-size: 90%;
|
||||
background-color: #d8bebc75;
|
||||
padding: 6px;
|
||||
}
|
||||
.debug-auth * {
|
||||
margin: 0;
|
||||
}
|
||||
.debug-auth p {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.debug-auth ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.debug-auth p, .debug-auth .key {
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
text-align: left;
|
||||
}
|
||||
.hasResponseStatus {
|
||||
background-color: #88888840;
|
||||
}
|
||||
.hasResponseStatus.status-200 {
|
||||
background-color: #00ff0040;
|
||||
}
|
||||
.hasResponseStatus.status-401 {
|
||||
background-color: #ff000040;
|
||||
}
|
||||
.hasResponseStatus.status-403 {
|
||||
background-color: #ff990040;
|
||||
}
|
||||
.hasResponseStatus.status-404 {
|
||||
background-color: #ffCC0040;
|
||||
}
|
||||
.hasResponseStatus.status-503 {
|
||||
background-color: #ffA88050;
|
||||
}
|
||||
.role {
|
||||
padding: 3px 6px;
|
||||
background-color: #44228840;
|
||||
}
|
||||
|
||||
/* For home */
|
||||
|
||||
.login-box {
|
||||
text-align: center;
|
||||
background-color: antiquewhite;
|
||||
margin: 0.5em auto;
|
||||
width: fit-content;
|
||||
box-shadow: 0 0 10px #49759b88;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.login-box .description {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
background-color: #f7c7867d;
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.providers {
|
||||
justify-content: center;
|
||||
padding: 0.8em;
|
||||
}
|
||||
.providers .provider {
|
||||
min-height: 2em;
|
||||
}
|
||||
.providers .provider a.link {
|
||||
text-decoration: none;
|
||||
max-height: 2em;
|
||||
}
|
||||
.providers .provider .link div {
|
||||
text-align: center;
|
||||
background-color: #f7c7867d;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.providers .provider .hint {
|
||||
font-size: 80%;
|
||||
max-width: 13em;
|
||||
}
|
||||
.providers .error {
|
||||
color: darkred;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.content .links-to-check {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
.content .links-to-check a {
|
||||
color: black;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.token {
|
||||
overflow-wrap: anywhere;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.from-keycloak-vue {
|
||||
display: none;
|
||||
}
|
||||
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()
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue