100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { type AxiosInstance } from 'axios'
|
|
import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
|
|
|
|
import { resourceServer, settings, axiosResourceProviders, type Resource, type Resources } from '@/main'
|
|
import ResourceButton from './ResourceButton.vue'
|
|
import UserInfo from './UserInfo.vue'
|
|
import TokenView from './TokenView.vue'
|
|
import ResourceResponse from './ResourceResponse.vue'
|
|
|
|
const keycloak = useKeycloak()
|
|
let resourceResponse = ref({})
|
|
let resources = ref<Resources>({})
|
|
let msg = ref<string>("")
|
|
|
|
function manuallyRefreshAccessToken() {
|
|
// We set a high minValidity to force a token refresh
|
|
keycloak.keycloak && keycloak.keycloak.updateToken(5000)
|
|
}
|
|
|
|
function logout() {
|
|
keycloak.logoutFn && keycloak.logoutFn()
|
|
}
|
|
|
|
function accountManagement() {
|
|
keycloak.accountManagement && keycloak.accountManagement()
|
|
}
|
|
|
|
async function getResources() {
|
|
await resourceServer.get("").then(
|
|
resp => {
|
|
resources.value = resp.data["plugins"]
|
|
}
|
|
)
|
|
}
|
|
getResources()
|
|
|
|
async function getResource(evt: MouseEvent, resourceName: string, resource: Resource, resourceProviderId?: string) {
|
|
const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName
|
|
const axiosClient: AxiosInstance = resourceProviderId ? axiosResourceProviders[resourceProviderId] : resourceServer
|
|
await axiosClient.get(url).then(
|
|
resp => {
|
|
resourceResponse.value = resp['data']
|
|
msg.value = ""
|
|
}
|
|
).catch(
|
|
err => {
|
|
resourceResponse.value = []
|
|
if (err.response) {
|
|
msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
|
|
} else {
|
|
msg.value = `${err.message} (cannot reach the resource server)`
|
|
}
|
|
}
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="app">
|
|
<h1>OIDC-test - web client</h1>
|
|
<p>
|
|
Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
|
|
</p>
|
|
<UserInfo></UserInfo>
|
|
<hr>
|
|
<div class="content">
|
|
<p>These resources are available at this authentication provider:</p>
|
|
<div class="links-to-check">
|
|
<ResourceButton v-for="(resource, name) in resources"
|
|
:resourceName="name.toString()"
|
|
:resourceId="resource.default_resource_id"
|
|
:innerText="resource.name"
|
|
@getResource="getResource($event, name.toString(), resource)"
|
|
>
|
|
</ResourceButton>
|
|
</div>
|
|
<p>These resoures are available from third party resource providers:</p>
|
|
<div v-for="(resourceProvider, resourceProviderId) in settings.resourceProviders">
|
|
<div class="links-to-check">
|
|
<span :innerText="`${resourceProvider.name}: `"></span>
|
|
<ResourceButton v-for="(resource, name) in resourceProvider.resources"
|
|
:resourceName="name.toString()"
|
|
:resourceId="resource.default_resource_id"
|
|
:innerText="resource.name"
|
|
:resourceProviderId="resourceProviderId"
|
|
@getResource="getResource($event, name.toString(), resource, resourceProviderId.toString())"
|
|
>
|
|
</ResourceButton>
|
|
</div>
|
|
</div>
|
|
<ResourceResponse :resourceResponse="resourceResponse" :err="msg"></ResourceResponse>
|
|
</div>
|
|
<div v-if="settings.tokenSandbox" class="token-info">
|
|
<hr>
|
|
<TokenView></TokenView>
|
|
</div>
|
|
</div>
|
|
</template>
|