This commit is contained in:
parent
532c2f1f6f
commit
d3943fc0b2
3 changed files with 101 additions and 57 deletions
106
src/App.vue
106
src/App.vue
|
@ -1,9 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { resourceServer, settings } from '@/main'
|
import { resourceServer, settings, Resources } from '@/main'
|
||||||
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 ResourceButton from './ResourceButton.vue'
|
||||||
|
|
||||||
let resource = ref({})
|
let resourceResponse = ref({})
|
||||||
|
let plugins: Resources = ref({})
|
||||||
const keycloak = useKeycloak()
|
const keycloak = useKeycloak()
|
||||||
let msg = ref("")
|
let msg = ref("")
|
||||||
|
|
||||||
|
@ -12,18 +14,6 @@ function manuallyRefreshAccessToken() {
|
||||||
keycloak.keycloak && keycloak.keycloak.updateToken(5000)
|
keycloak.keycloak && keycloak.keycloak.updateToken(5000)
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
async function doAuthenticatedRequest() {
|
|
||||||
// Doesn't really go anywhere, but as you see from the headers in the request
|
|
||||||
// it contains the latest access token at all times
|
|
||||||
const response = await authServer.get('/oidc-test-web')
|
|
||||||
}
|
|
||||||
|
|
||||||
function getResourceUrl(url: string): string {
|
|
||||||
return settings.resourceServerUrl + "/" + url
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
function logout() {
|
function logout() {
|
||||||
keycloak.logoutFn && keycloak.logoutFn()
|
keycloak.logoutFn && keycloak.logoutFn()
|
||||||
}
|
}
|
||||||
|
@ -32,19 +22,25 @@ function accountManagemnt() {
|
||||||
keycloak.accountManagement && keycloak.accountManagement()
|
keycloak.accountManagement && keycloak.accountManagement()
|
||||||
}
|
}
|
||||||
|
|
||||||
async function get_resource(evt: MouseEvent) {
|
async function getResources() {
|
||||||
if (!keycloak.keycloak) return
|
await resourceServer.get("").then(
|
||||||
if (!evt.target) return
|
|
||||||
const id: string | null = (<Element>evt.target).getAttribute("resource-id")
|
|
||||||
if (!id) return
|
|
||||||
await resourceServer.get(id).then(
|
|
||||||
resp => {
|
resp => {
|
||||||
resource.value = resp['data']
|
plugins = resp.data["plugins"]
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
getResources()
|
||||||
|
|
||||||
|
async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
|
||||||
|
const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName
|
||||||
|
await resourceServer.get(url).then(
|
||||||
|
resp => {
|
||||||
|
resourceResponse.value = resp['data']
|
||||||
msg.value = ""
|
msg.value = ""
|
||||||
}
|
}
|
||||||
).catch(
|
).catch(
|
||||||
err => {
|
err => {
|
||||||
resource.value = []
|
resourceResponse.value = []
|
||||||
if (err.response) {
|
if (err.response) {
|
||||||
msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
|
msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
|
||||||
} else {
|
} else {
|
||||||
|
@ -62,21 +58,22 @@ async function get_resource(evt: MouseEvent) {
|
||||||
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, <span :innerText="keycloak.idTokenParsed?.name"></span></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 :innerText="keycloak.idTokenParsed?.email"></div>
|
||||||
<div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
|
<div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
|
||||||
<span>Roles for oidc-test:</span>
|
<span>Roles for oidc-test:</span>
|
||||||
<span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']" class="role">{{
|
<span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']"
|
||||||
role }}</span>
|
class="role" :innerText="role">
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="keycloak.idTokenParsed?.oidc_provider">
|
<div v-if="keycloak.idTokenParsed?.oidc_provider">
|
||||||
<span>Provider:</span>
|
<span>Provider:</span>
|
||||||
{{ keycloak.idTokenParsed.oidc_provider }}
|
<span :innerText="keycloak.idTokenParsed.oidc_provider"></span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="keycloak.tokenParsed?.scope">
|
<div v-if="keycloak.tokenParsed?.scope">
|
||||||
<span>Scopes</span>:
|
<span>Scopes</span>:
|
||||||
<span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope">{{ scope }}</span>
|
<span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
|
||||||
</div>
|
</div>
|
||||||
<button @click="accountManagemnt">Account management</button>
|
<button @click="accountManagemnt">Account management</button>
|
||||||
<button @click="manuallyRefreshAccessToken">Refresh access token</button>
|
<button @click="manuallyRefreshAccessToken">Refresh access token</button>
|
||||||
|
@ -84,38 +81,43 @@ async function get_resource(evt: MouseEvent) {
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Resources (at {{ settings.resourceServerUrl }}) validated by scope:</p>
|
|
||||||
<div class="links-to-check">
|
|
||||||
<button resource-id="time" @click="get_resource($event)">Time</button>
|
|
||||||
<button resource-id="bs" @click="get_resource($event)">BS</button>
|
|
||||||
</div>
|
|
||||||
<p>Resources (at {{ settings.resourceServerUrl }}) validated by role:</p>
|
<p>Resources (at {{ settings.resourceServerUrl }}) validated by role:</p>
|
||||||
<div class="links-to-check">
|
<div class="links-to-check">
|
||||||
<button resource-id="public" @click="get_resource($event)">Public</button>
|
<button resource-name="public" @click="getResource($event)">Public</button>
|
||||||
<button resource-id="protected" @click="get_resource($event)">Auth protected content</button>
|
<button resource-name="protected" @click="getResource($event)">Auth protected content</button>
|
||||||
<button resource-id="protected-by-foorole" @click="get_resource($event)">Auth + foorole protected
|
<button resource-name="protected-by-foorole" @click="getResource($event)">Auth + foorole protected
|
||||||
content</button>
|
content</button>
|
||||||
<button resource-id="protected-by-foorole-or-barrole" @click="get_resource($event)">Auth + foorole or barrole
|
<button resource-name="protected-by-foorole-or-barrole" @click="getResource($event)">Auth + foorole or barrole
|
||||||
protected
|
protected
|
||||||
content</button>
|
content</button>
|
||||||
<button resource-id="protected-by-barrole" @click="get_resource($event)">Auth + barrole protected
|
<button resource-name="protected-by-barrole" @click="getResource($event)">Auth + barrole protected
|
||||||
content</button>
|
content</button>
|
||||||
<button resource-id="protected-by-foorole-and-barrole" @click="get_resource($event)">Auth + foorole and barrole
|
<button resource-name="protected-by-foorole-and-barrole" @click="getResource($event)">Auth + foorole and barrole
|
||||||
protected
|
protected
|
||||||
content</button>
|
content</button>
|
||||||
<button resource-id="fast_api_depends" @click="get_resource($event)" class="hidden">Using FastAPI
|
<button resource-name="fast_api_depends" @click="getResource($event)" class="hidden">Using FastAPI
|
||||||
Depends</button>
|
Depends</button>
|
||||||
<!--<button resource-id="introspect" @click="get_resource($event)">Introspect token (401 expected)</button>-->
|
<!--<button resource-id="introspect" @click="getResource($event)">Introspect token (401 expected)</button>-->
|
||||||
|
</div>
|
||||||
|
<p>Resource providers (validated by scope):</p>
|
||||||
|
<div class="links-to-check">
|
||||||
|
<ResourceButton v-for="(value, key) in plugins"
|
||||||
|
:resourceName="key"
|
||||||
|
:resourceId="value.default_resource_id"
|
||||||
|
:innerText="key"
|
||||||
|
@getResource="getResource($event, key, value)"
|
||||||
|
>
|
||||||
|
</ResourceButton>
|
||||||
</div>
|
</div>
|
||||||
<div class="resources">
|
<div class="resources">
|
||||||
<div v-if="Object.entries(resource).length > 0" class="resource">
|
<div v-if="Object.entries(resourceResponse).length > 0" class="resource">
|
||||||
<div v-for="(value, key) in resource">
|
<div v-for="(value, key) in resourceResponse">
|
||||||
<div class="key">{{ key }}</div>
|
<div class="key" :innetText="key"></div>
|
||||||
<div class="value">{{ value }}</div>
|
<div class="value" :innerText="value"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="msg" class="msg resource error">{{ msg }}</div>
|
<div v-if="msg" class="msg resource error" :innetText="msg"></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="settings.tokenSandbox" class="token-info">
|
<div v-if="settings.tokenSandbox" class="token-info">
|
||||||
<hr>
|
<hr>
|
||||||
|
@ -123,22 +125,22 @@ async function get_resource(evt: MouseEvent) {
|
||||||
<h2>id token</h2>
|
<h2>id token</h2>
|
||||||
<div class="token">
|
<div class="token">
|
||||||
<div v-for="(value, key) in keycloak.idTokenParsed">
|
<div v-for="(value, key) in keycloak.idTokenParsed">
|
||||||
<div class="key">{{ key }}</div>
|
<div class="key" :innetText="key"></div>
|
||||||
<div class="value">{{ value }}</div>
|
<div class="value" :innerText="value"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2>access token</h2>
|
<h2>access token</h2>
|
||||||
<div class="token">
|
<div class="token">
|
||||||
<div v-for="(value, key) in keycloak.tokenParsed">
|
<div v-for="(value, key) in keycloak.tokenParsed">
|
||||||
<div class="key">{{ key }}</div>
|
<div class="key" :innetText="key"></div>
|
||||||
<div class="value">{{ value }}</div>
|
<div class="value" :innerText="value"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2>refresh token</h2>
|
<h2>refresh token</h2>
|
||||||
<div class="token">
|
<div class="token">
|
||||||
<div v-for="(value, key) in keycloak.refreshTokenParsed">
|
<div v-for="(value, key) in keycloak.refreshTokenParsed">
|
||||||
<div class="key">{{ key }}</div>
|
<div class="key" :innetText="key"></div>
|
||||||
<div class="value">{{ value }}</div>
|
<div class="value" :innerText="value"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
34
src/ResourceButton.vue
Normal file
34
src/ResourceButton.vue
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { resourceServer } from '@/main'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
resourceName: String,
|
||||||
|
resourceId: String,
|
||||||
|
})
|
||||||
|
|
||||||
|
let _class: String = ref("")
|
||||||
|
let _title: String = ref("")
|
||||||
|
|
||||||
|
const init = async (props) => {
|
||||||
|
const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName
|
||||||
|
await resourceServer.get(url).then(
|
||||||
|
resp => {
|
||||||
|
_class.value = `hasResponseStatus status-${resp.status}`
|
||||||
|
_title.value = `Response code: ${resp.status} - ${resp.statusText}`
|
||||||
|
}
|
||||||
|
).catch(
|
||||||
|
err => {
|
||||||
|
_class.value = `hasResponseStatus status-${err.response.status}`
|
||||||
|
_title.value = `Response code: ${err.response.status} - ${err.response.statusText}`
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
init(props);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button :class="_class" :title="_title" @click="$emit('getResource', $event)"></button>
|
||||||
|
</template>
|
18
src/main.ts
18
src/main.ts
|
@ -1,4 +1,4 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp, ref } from 'vue'
|
||||||
import Keycloak from "keycloak-js"
|
import Keycloak from "keycloak-js"
|
||||||
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
|
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
|
||||||
import axios, { type AxiosInstance } from 'axios'
|
import axios, { type AxiosInstance } from 'axios'
|
||||||
|
@ -15,6 +15,14 @@ interface Settings {
|
||||||
tokenSandbox: boolean
|
tokenSandbox: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Resource {
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Resources {
|
||||||
|
[name: string]: Resource
|
||||||
|
}
|
||||||
|
|
||||||
export let settings: Settings
|
export let settings: Settings
|
||||||
export let authServer: AxiosInstance
|
export let authServer: AxiosInstance
|
||||||
export let resourceServer: AxiosInstance
|
export let resourceServer: AxiosInstance
|
||||||
|
@ -72,8 +80,8 @@ function initializeTokenInterceptor(keycloak: Keycloak) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async function checkHref(elem: HTMLLinkElement) {
|
export async function checkResource(elem: HTMLLinkElement) {
|
||||||
const url = elem.getAttribute("resource-id")
|
const url = elem.getAttribute("resource-name")
|
||||||
if (!url) return
|
if (!url) return
|
||||||
await resourceServer.get(url).then(
|
await resourceServer.get(url).then(
|
||||||
resp => {
|
resp => {
|
||||||
|
@ -88,11 +96,11 @@ async function checkHref(elem: HTMLLinkElement) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkPerms(className: string) {
|
function checkPerms(className: string) {
|
||||||
|
// Scan elements with className and check the respose
|
||||||
var rootElems = document.getElementsByClassName(className)
|
var rootElems = document.getElementsByClassName(className)
|
||||||
Array.from(rootElems).forEach(elem =>
|
Array.from(rootElems).forEach(elem =>
|
||||||
Array.from(elem.children).forEach(elem => checkHref(<HTMLLinkElement>elem))
|
Array.from(elem.children).forEach(elem => checkResource(<HTMLLinkElement>elem))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue