Start app when keycloak is ready; components

src/App.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { resourceServer, settings, Resources } from '@/main'
+import { resourceServer, settings, type Resource, type Resources } from '@/main'
 import { ref } from 'vue'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 import ResourceButton from './ResourceButton.vue'
+import UserInfo from './UserInfo.vue'
+import TokenView from './TokenView.vue'
+import ResourceResponse from './ResourceResponse.vue'
 
-let resourceResponse = ref({})
-let plugins: Resources = ref({})
 const keycloak = useKeycloak()
-let msg = ref("")
+let resourceResponse = ref({})
+let resources = ref<Resources>({})
+let msg = ref<string>("")
 
 function manuallyRefreshAccessToken() {
   // We set a high minValidity to force a token refresh
@@ -18,20 +21,20 @@ function logout() {
   keycloak.logoutFn && keycloak.logoutFn()
 }
 
-function accountManagemnt() {
+function accountManagement() {
   keycloak.accountManagement && keycloak.accountManagement()
 }
 
 async function getResources() {
   await resourceServer.get("").then(
     resp => {
-      plugins = resp.data["plugins"]
+      resources.value = resp.data["plugins"]
     }
   )
 }
 getResources()
 
-async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
+async function getResource(evt: MouseEvent, resourceName: string, resource: Resource) {
   const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName 
   await resourceServer.get(url).then(
     resp => {
@@ -54,96 +57,27 @@ async function getResource(evt: MouseEvent, resourceName: str, resource: {}) {
 <template>
   <div id="app">
     <h1>OIDC-test - web client</h1>
-    <p class="center">
+    <p>
       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, <span :innerText="keycloak.idTokenParsed?.name"></span></p>
-      <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
-      <div :innerText="keycloak.idTokenParsed?.email"></div>
-      <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
-        <span>Roles for oidc-test:</span>
-        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']"
-              class="role" :innerText="role">
-        </span>
-      </div>
-      <div v-if="keycloak.idTokenParsed?.oidc_provider">
-        <span>Provider:</span>
-        <span :innerText="keycloak.idTokenParsed.oidc_provider"></span>
-      </div>
-      <div v-if="keycloak.tokenParsed?.scope">
-        <span>Scopes</span>:
-        <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
-      </div>
-      <button @click="accountManagemnt">Account management</button>
-      <button @click="manuallyRefreshAccessToken">Refresh access token</button>
-      <button @click="logout" class="logout">Logout</button>
-    </div>
+    <UserInfo></UserInfo>
     <hr>
     <div class="content">
-      <p>Resources (at {{ settings.resourceServerUrl }}) validated by role:</p>
+      <p>These resources are available at this authentication provider:</p>
       <div class="links-to-check">
-        <button resource-name="public" @click="getResource($event)">Public</button>
-        <button resource-name="protected" @click="getResource($event)">Auth protected content</button>
-        <button resource-name="protected-by-foorole" @click="getResource($event)">Auth + foorole protected
-          content</button>
-        <button resource-name="protected-by-foorole-or-barrole" @click="getResource($event)">Auth + foorole or barrole
-          protected
-          content</button>
-        <button resource-name="protected-by-barrole" @click="getResource($event)">Auth + barrole protected
-          content</button>
-        <button resource-name="protected-by-foorole-and-barrole" @click="getResource($event)">Auth + foorole and barrole
-          protected
-          content</button>
-        <button resource-name="fast_api_depends" @click="getResource($event)" class="hidden">Using FastAPI
-          Depends</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 v-for="(resource, name) in resources"
+                :resourceName="name as any"
+                :resourceId="resource.default_resource_id"
+                :innerText="resource.name"
+                @getResource="getResource($event, name as string, resource)"
                 >
         </ResourceButton>
       </div>
-      <div class="resources">
-        <div v-if="Object.entries(resourceResponse).length > 0" class="resource">
-          <div v-for="(value, key) in resourceResponse">
-            <div class="key" :innetText="key"></div>
-            <div class="value" :innerText="value"></div>
-          </div>
-        </div>
-      </div>
-      <div v-if="msg" class="msg resource error" :innetText="msg"></div>
+      <ResourceResponse :resourceResponse="resourceResponse" :err="msg"></ResourceResponse>
     </div>
     <div v-if="settings.tokenSandbox" class="token-info">
       <hr>
-      <div>
-        <h2>id token</h2>
-        <div class="token">
-          <div v-for="(value, key) in keycloak.idTokenParsed">
-            <div class="key" :innetText="key"></div>
-            <div class="value" :innerText="value"></div>
-          </div>
-        </div>
-        <h2>access token</h2>
-        <div class="token">
-          <div v-for="(value, key) in keycloak.tokenParsed">
-            <div class="key" :innetText="key"></div>
-            <div class="value" :innerText="value"></div>
-          </div>
-        </div>
-        <h2>refresh token</h2>
-        <div class="token">
-          <div v-for="(value, key) in keycloak.refreshTokenParsed">
-            <div class="key" :innetText="key"></div>
-            <div class="value" :innerText="value"></div>
-          </div>
-        </div>
-      </div>
+      <TokenView></TokenView>
     </div>
   </div>
 </template>

src/ResourceButton.vue

@@ -1,16 +1,28 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { ref, type PropType, type ComponentObjectPropsOptions } from 'vue'
 import { resourceServer } from '@/main'
 
-const props = defineProps({
-  resourceName: String,
-  resourceId: String,
+interface Props {
+  resourceName: string,
+  resourceId?: string,
+}
+
+const props = defineProps<Props>()
+
+/*
+const props = defineProps<ComponentObjectPropsOptions<Props>>({
+  resourceName: {
+    type: String,
+    required: true
+  },
+  resourceId: { type: String},
 })
+*/
+let _class = ref<string>("")
+let _title = ref<string>("")
 
-let _class: String = ref("")
-let _title: String = ref("")
-
-const init = async (props) => {
+const init = async (props: any) => {
+  // Get code at component boot time
   const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
   await resourceServer.get(url).then(
     resp => {

src/ResourceResponse.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import { ref, type ComponentObjectPropsOptions } from 'vue'
+
+interface Props {
+  resourceResponse: {}
+  err: string
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+  <div class="resources">
+    <div v-if="Object.entries(resourceResponse).length > 0" class="resource">
+      <div v-for="(value, key) in resourceResponse">
+        <div class="key" :innerText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+  </div>
+  <div v-if="err" class="msg resource error" :innerText="err"></div>
+</template>

src/TokenView.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+
+const keycloak = useKeycloak()
+</script>
+
+<template>
+    <h2>id token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.idTokenParsed">
+        <div class="key" :innetText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+    <h2>access token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.tokenParsed">
+        <div class="key" :innetText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+    <h2>refresh token</h2>
+    <div class="token">
+      <div v-for="(value, key) in keycloak.refreshTokenParsed">
+        <div class="key" :innetText="key"></div>
+        <div class="value" :innerText="value"></div>
+      </div>
+    </div>
+</template>

src/UserInfo.vue

@@ -0,0 +1,45 @@
+<script setup lang='ts'>
+import { ref, type ComponentObjectPropsOptions } from 'vue'
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+
+const keycloak = useKeycloak()
+
+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()
+}
+
+</script>
+
+<template>
+  <div v-if="keycloak.authenticated" class="user-info">
+    <p>Hey, <span :innerText="keycloak.idTokenParsed?.name"></span></p>
+    <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
+    <div :innerText="keycloak.idTokenParsed?.email"></div>
+    <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
+      <span>Roles for oidc-test:</span>
+      <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']"
+            class="role" :innerText="role">
+      </span>
+    </div>
+    <div v-if="keycloak.idTokenParsed?.oidc_provider">
+      <span>Provider:</span>
+      <span :innerText="keycloak.idTokenParsed.oidc_provider"></span>
+    </div>
+    <div v-if="keycloak.tokenParsed?.scope">
+      <span>Scopes</span>:
+      <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope" :innerText="scope"></span>
+    </div>
+    <button @click="accountManagement">Account management</button>
+    <button @click="manuallyRefreshAccessToken">Refresh access token</button>
+    <button @click="logout" class="logout">Logout</button>
+  </div>
+</template>

src/main.ts

@@ -1,8 +1,8 @@
-import { createApp, ref } from 'vue'
+import { createApp } from 'vue'
 import Keycloak from "keycloak-js"
 import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
 import axios, { type AxiosInstance } from 'axios'
-import App from './App.vue'
+import App from '@/App.vue'
 
 interface Settings {
   keycloakUri: string
@@ -17,6 +17,9 @@ interface Settings {
 
 export interface Resource {
   name: string
+  default_resource_id: string
+  role_required: string
+  scope_required: string
 }
 
 export interface Resources {
@@ -51,14 +54,12 @@ axios.get("settings.json").then().then(
       },
       onReady(keycloak: Keycloak) {
         initializeTokenInterceptor(keycloak)
-        checkPerms('links-to-check')
+        app.mount("#app")
       },
     })
-    app.mount("#app")
   }
 )
 
-
 function initializeTokenInterceptor(keycloak: Keycloak) {
   authServer.interceptors.request.use(axiosSettings => {
     if (keycloak.authenticated) {
@@ -80,27 +81,4 @@ function initializeTokenInterceptor(keycloak: Keycloak) {
   })
 }
 
-export async function checkResource(elem: HTMLLinkElement) {
-  const url = elem.getAttribute("resource-name")
-  if (!url) return
-  await resourceServer.get(url).then(
-    resp => {
-      elem.classList.add("hasResponseStatus")
-      elem.classList.add("status-" + resp.status)
-      elem.title = "Response code: " + resp.status + " - " + resp.statusText
-    }).catch(err => {
-      elem.classList.add("hasResponseStatus")
-      elem.classList.add("status-" + err.response.status)
-      elem.title = "Response code: " + err.response.status + " - " + err.response.statusText
-    })
-}
-
-function checkPerms(className: string) {
-  // Scan elements with className and check the respose
-  var rootElems = document.getElementsByClassName(className)
-  Array.from(rootElems).forEach(elem =>
-    Array.from(elem.children).forEach(elem => checkResource(<HTMLLinkElement>elem))
-  )
-}
-
 const app = createApp(App)