Support third party resource providers

public/styles.css

@@ -178,6 +178,9 @@ hr {
   border: none;
   cursor: pointer;
 }
+.content .links-to-check span {
+  margin: auto;
+}
 
 .token {
   overflow-wrap: anywhere;

src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { resourceServer, settings, type Resource, type Resources } from '@/main'
 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'
@@ -34,9 +36,10 @@ async function getResources() {
 }
 getResources()
 
-async function getResource(evt: MouseEvent, resourceName: string, resource: Resource) {
+async function getResource(evt: MouseEvent, resourceName: string, resource: Resource, resourceProviderId?: string) {
   const url = resource.default_resource_id ? `${resourceName}/${resource.default_resource_id}` : resourceName 
-  await resourceServer.get(url).then(
+  const axiosClient: AxiosInstance = resourceProviderId ? axiosResourceProviders[resourceProviderId] : resourceServer
+  await axiosClient.get(url).then(
     resp => {
       resourceResponse.value = resp['data']
       msg.value = ""
@@ -66,13 +69,27 @@ async function getResource(evt: MouseEvent, resourceName: string, resource: Reso
       <p>These resources are available at this authentication provider:</p>
       <div class="links-to-check">
         <ResourceButton v-for="(resource, name) in resources"
-                :resourceName="name as any"
+                :resourceName="name.toString()"
                 :resourceId="resource.default_resource_id"
                 :innerText="resource.name"
-                @getResource="getResource($event, name as string, resource)"
+                @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">

src/ResourceButton.vue

@@ -1,10 +1,13 @@
 <script setup lang='ts'>
 import { ref, type PropType, type ComponentObjectPropsOptions } from 'vue'
-import { resourceServer } from '@/main'
+import { type AxiosInstance } from 'axios'
+
+import { resourceServer, axiosResourceProviders } from '@/main'
 
 interface Props {
   resourceName: string,
-  resourceId?: string,
+  resourceProviderId?: string | number,
+  resourceId?: string | null,
 }
 
 const props = defineProps<Props>()
@@ -23,8 +26,9 @@ let _title = ref<string>("")
 
 const init = async (props: any) => {
   // Get code at component boot time
+  const axiosResourceProvider: AxiosInstance = props.resourceProviderId ? axiosResourceProviders[props.resourceProviderId] : resourceServer
   const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
-  await resourceServer.get(url).then(
+  await axiosResourceProvider.get(url).then(
     resp => {
       _class.value = `hasResponseStatus status-${resp.status}`
       _title.value = `Response code: ${resp.status} - ${resp.statusText}`

src/main.ts

@@ -1,20 +1,9 @@
 import { createApp } from 'vue'
 import Keycloak from "keycloak-js"
 import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
-import axios, { type AxiosInstance } from 'axios'
+import axios, { Axios, type AxiosInstance } from 'axios'
 import App from '@/App.vue'
 
-interface Settings {
-  keycloakUri: string
-  realm: string
-  clientId: string
-  sso: boolean
-  resourceServerUrl: string
-  resourceScopes: string[]
-  authProvider: string
-  tokenSandbox: boolean
-}
-
 export interface Resource {
   name: string
   default_resource_id: string
@@ -26,9 +15,38 @@ export interface Resources {
   [name: string]: Resource
 }
 
+interface ResourceProvider {
+  id: string
+  name: string
+  baseUrl: string
+  verifySSL: boolean
+  resources: Resources
+}
+
+export interface ResourceProviders {
+  [name: string]: ResourceProvider
+}
+
+interface Settings {
+  keycloakUri: string
+  realm: string
+  clientId: string
+  sso: boolean
+  resourceServerUrl: string
+  resourceScopes: string[]
+  authProvider: string
+  tokenSandbox: boolean
+  resourceProviders: ResourceProviders
+}
+
+interface AxiosResourceProviders {
+  [name: string]: AxiosInstance
+}
+
 export let settings: Settings
 export let authServer: AxiosInstance
 export let resourceServer: AxiosInstance
+export let axiosResourceProviders: AxiosResourceProviders = {}
 
 // The settings.json file is expected at the server's base url
 axios.get("settings.json").then().then(
@@ -61,6 +79,24 @@ axios.get("settings.json").then().then(
 )
 
 function initializeTokenInterceptor(keycloak: Keycloak) {
+  Object.entries(settings.resourceProviders).forEach(
+    ([id, resourceProvider]) => {
+      const rp = axios.create({
+        baseURL: resourceProvider.baseUrl,
+        timeout: 10000
+      })
+      rp.interceptors.request.use(axiosSettings => {
+        if (keycloak.authenticated) {
+          axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`
+          axiosSettings.headers.auth_provider = settings.authProvider
+        }
+        return axiosSettings
+      }, error => {
+        return Promise.reject(error)
+      })
+      axiosResourceProviders[id] = rp
+    }
+  )
   authServer.interceptors.request.use(axiosSettings => {
     if (keycloak.authenticated) {
       axiosSettings.headers.Authorization = `Bearer ${keycloak.token}`