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

56
src/App.vue
View file

@ -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>