.forgejo/workflows/build.yaml

@@ -3,7 +3,7 @@ on:
   workflow_dispatch:
     inputs:
       build:
-        description: "Build package and container"
+        description: "Build package"
         required: true
         default: false
         type: boolean
@@ -70,40 +70,3 @@ jobs:
       - name: Publish
         if: fromJSON(steps.builder.outputs.run)
         run: pnpm publish --no-git-checks
-        continue-on-error: true
-
-      - name: Build container
-        if: fromJSON(steps.builder.outputs.run)
-        uses: actions/buildah-build@v1
-        with:
-          image: oidc-vue-test
-          oci: true
-          labels: oidc-vue-test
-          tags: latest ${{ steps.version.outputs.version }}
-          containerfiles: |
-            ./Containerfile
-          build-args: |
-            APP_VERSION=${{ steps.version.outputs.version }}
-
-      - name: Workaround for bug of podman-login
-        if: fromJSON(steps.builder.outputs.run)
-        run: |
-          mkdir -p $HOME/.docker
-          echo "{ \"auths\": {} }" > $HOME/.docker/config.json
-
-      - name: Log in to container registry (with another workaround)
-        if: fromJSON(steps.builder.outputs.run)
-        uses: actions/podman-login@v1
-        with:
-          registry: ${{ vars.REGISTRY }}
-          username: ${{ secrets.REGISTRY_USER }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
-          auth_file_path: /tmp/auth.json
-
-      - name: Push the image to the registry
-        if: fromJSON(steps.builder.outputs.run)
-        uses: actions/push-to-registry@v2
-        with:
-          registry: "docker://${{ vars.REGISTRY }}/${{ vars.ORGANISATION }}"
-          image: oidc-vue-test
-          tags: latest ${{ steps.version.outputs.version }}

Containerfile

@@ -1,5 +1,3 @@
 FROM docker.io/nginx:alpine
 
-COPY ./dist /usr/share/nginx/html/oidc-test-web
+COPY ./dist /usr/share/nginx/html
-
-CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -2,123 +2,24 @@
 
 Small web app for experimenting a web app with a Keycloak auth server.
 
-It is a sibling of the server version [oidc-test](philorg/oidc-fastapi-test),
+It is a sibbling of the server version (oidc-test)[philorg/oidc-fastapi-test],
 which acts also as a resource server.
 
-Live demo: <https://philo.ydns.eu/oidc-test-web>:
+Live demo: https://philo.ydns.eu/oidc-test-web:
-
 - configured with a test realm on a private Keycloak instance
 - 2 users are defined: foo (foofoo) and bar (barbar).
 
-**Note**: decoding tokens requires the use of cryto extension,
+## Deployment
-that web browsers allow only with a secured connection (https).
 
-## Configuration
+In a container:
-
-The app expects that a `settings.json` file is available on the server
-at the app's base url.
-
-For example:
-
-```json
-{
-  "keycloakUri": "https://keycloak.your.domain",
-  "realm": "test",
-  "authProvider": "keycloak",
-  "sso": false,
-  "clientId": "oidc-test-web",
-  "tokenSandbox": true,
-  "resourceServerUrl": "https://someserver.your.domain/resourceBaseUrl",
-  "resourceScopes": [
-    "get:time",
-    "get:bs"
-  ],
-  "resourceProviders": {
-    "resourceProvider1": {
-      "name": "Third party 1",
-      "baseUrl": "https://otherserver.your.domain/resources/",
-      "verifySSL": true,
-      "resources": {
-        "public": {
-          "name": "A public resource",
-          "url": "resource/public"
-        },
-        "bs": {
-          "name": "A secured resource, eg by scope",
-          "url": "resource/secured1"
-        },
-        "time": {
-          "name": "Another secured resource, eg by role",
-          "url": "resource/secured2"
-        }
-      }
-    }
-  }
-}
-```
-
-## Build
-
-For generating a `dist` directory ready to be copied to a web server
-static data tree, it's a straightforward:
-
-```sh
-pnpm run build
-```
-
-Eventually specify a `base url` (eg. accessible from `https://for.example.com/oidc-test-web`):
 
 ```sh
 pnpm run build --base oidc-test-web
-```
+podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web docker.io/nginx:alpine
-
-## Deployment
-
-Examples of deployment are presented below.
-
-- Using the nginx default container, from the development source tree:
-
-```sh
-podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json docker.io/nginx:alpine
-```
-
-- The build is packaged in a provided container (see *pakcages*), serving with the `/oidc-test-web` base url:
-
-```sh
-podman run -it --rm -p 8874:80 -v ./settings.json:/usr/share/nginx/html/oidc-test-web/settings.json code.philo.ydns.eu/philorg/oidc-vue-test:latest
-```
-
-- A *quadlet* *systemd* service, in `~/.config/containers/systemd/oidc-vue-test.container`:
-
-```systemd
-[Container]
-ContainerName=oidc-vue-test
-Image=code.philo.ydns.eu/philorg/oidc-vue-test:latest
-Mount=type=bind,source=/path/to/settings.json,destination=/usr/share/nginx/html/oidc-test-web/settings.json
-PublishPort=8874:80
-
-[Service]
-Restart=always
-RestartSec=5
-
-[Unit]
-After=podman-user-wait-network-online.service
-
-[Install]
-WantedBy=default.target
-```
-
-Run with:
-
-```sh
-systemctl --user daemon-reload
-systemcrl --user start oidc-vue-test
 ```
 
 ## Frontend
 
-YMMV, easy with *Caddy*:
-
 ```Caddyfile
 handle /oidc-test-web {
   reverse-proxy hostname.domainame:8874

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "oidc-test-web",
+  "name": "oidc-text-web",
   "version": "0.0.0",
   "type": "module",
   "scripts": {

public/styles.css

@@ -2,15 +2,11 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: floralwhite;
   margin: 0;
-  font-family: system-ui;
-  text-align: center;
 }
 h1 {
+  text-align: center;
   background-color: #f786867d;
   margin: 0 0 0.2em 0;
-  box-shadow: 0px 0.2em 0.2em #f786867d;
-  text-shadow: 0 0 2px #00000080;
-  font-weight: 200;
 }
 p {
   margin: 0.2em;
@@ -24,9 +20,6 @@ hr {
 .center {
   text-align: center;
 }
-.error {
-  color: darkred;
-}
 .content {
   width: 100%;
   display: flex;
@@ -58,6 +51,7 @@ hr {
   border: 2px solid darkkhaki;
   padding: 3px 6px;
   text-decoration: none;
+  text-align: center;
   color: black;
 }
 .user-info a.logout:hover {
@@ -72,6 +66,7 @@ hr {
   margin: 0;
 }
 .debug-auth p {
+  text-align: center;
   border-bottom: 1px solid black;
 }
 .debug-auth ul {
@@ -102,25 +97,15 @@ hr {
 .hasResponseStatus.status-503 {
   background-color: #ffA88050;
 }
-
-.role, .scope {
-  padding: 3px 6px;
-  margin: 3px;
-  border-radius: 6px;
-}
-
 .role {
+  padding: 3px 6px;
   background-color: #44228840;
 }
 
-.scope {
-  background-color: #8888FF80;
-}
-
-
 /* For home */
 
 .login-box {
+  text-align: center;
   background-color: antiquewhite;
   margin: 0.5em auto;
   width: fit-content;
@@ -147,6 +132,7 @@ hr {
   max-height: 2em;
 }
 .providers .provider .link div {
+  text-align: center;
   background-color: #f7c7867d;
   border-radius: 8px;
   padding: 6px;
@@ -161,25 +147,22 @@ hr {
 }
 .providers .error {
   padding: 3px 6px;
+  text-align: center;
   font-weight: bold;
   flex: 1 1 auto;
 }
 .content .links-to-check {
   display: flex;
+  text-align: center;
   justify-content: center;
   gap: 0.5em;
   flex-flow: wrap;
 }
-.content .links-to-check button {
+.content .links-to-check a {
   color: black;
   padding: 5px 10px;
   text-decoration: none;
   border-radius: 8px;
-  border: none;
-  cursor: pointer;
-}
-.content .links-to-check span {
-  margin: auto;
 }
 
 .token {
@@ -187,6 +170,12 @@ hr {
   font-family: monospace;
 }
 
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+}
+
 .resource {
   padding: 0.5em;
   display: flex;
@@ -195,8 +184,8 @@ hr {
   width: fit-content;
   align-items: center;
   margin: 5px auto;
-  box-shadow: 0px 0px 10px #90c3eeA0;
+  box-shadow: 0px 0px 10px #90c3ee;
-  background-color: #90c3eeA0;
+  background-color: #90c3ee;
   border-radius: 8px;
 }
 
@@ -208,7 +197,11 @@ hr {
   text-align: center;
 }
 
-.token-info {
+.error {
+  color: darkred;
+}
+
+.from-keycloak-vue {
   margin: 0 1em;
 }
 

src/App.vue

@@ -1,58 +1,40 @@
 <script setup lang="ts">
+import { authServer, resourceServer, settings } 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'
+let resource = ref({})
-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 msg = 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)
 }
 
+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 logout() {
   keycloak.logoutFn && keycloak.logoutFn()
 }
 
-function accountManagement() {
+function accountManagemnt() {
   keycloak.accountManagement && keycloak.accountManagement()
 }
 
-async function getResources() {
+async function get_resource(id: string) {
-  await resourceServer.get("").then(
+  if (!keycloak.keycloak) { return }
+  await resourceServer.get(id).then(
     resp => {
-      resources.value = resp.data["plugins"]
+      resource.value = resp['data']
-    }
-  )
-}
-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 => {
+    err => msg.value = 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>
@@ -60,41 +42,70 @@ async function getResource(evt: MouseEvent, resourceName: string, resource: Reso
 <template>
   <div id="app">
     <h1>OIDC-test - web client</h1>
-    <p>
+    <p class="center">
       Test the authentication and authorization, with OpenID Connect and OAuth2 with a Keycloak provider.
     </p>
-    <UserInfo></UserInfo>
+    <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>
-    <div class="content">
+    <p class="center">
-      <p>These resources are available at this authentication provider:</p>
+      Fetch resources from a resource server (at {{ settings.resourceServerUrl }})
-      <div class="links-to-check">
+      with your authentication token:
-        <ResourceButton v-for="(resource, name) in resources"
+    </p>
-                :resourceName="name.toString()"
+    <div class="actions">
-                :resourceId="resource.default_resource_id"
+      <button @click="get_resource('time')">Time</button>
-                :innerText="resource.name"
+      <button @click="get_resource('bs')">BS</button>
-                @getResource="getResource($event, name.toString(), resource)"
-                >
-        </ResourceButton>
     </div>
-        <p>These resoures are available from third party resource providers:</p>
+    <div class="resources">
-          <div v-for="(resourceProvider, resourceProviderId) in settings.resourceProviders">
+      <div v-if="Object.entries(resource).length > 0" class="resource">
-            <div class="links-to-check">
+        <div v-for="(value, key) in resource">
-              <span :innerText="`${resourceProvider.name}: `"></span>
+          <div class="key">{{ key }}</div>
-              <ResourceButton v-for="(resource, name) in resourceProvider.resources"
+          <div v-if="key == 'sorry' || key == 'error'" class="error">{{ value }}</div>
-                              :resourceName="name.toString()"
+          <div v-else class="value">{{ value }}</div>
-                              :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">
+    <div v-if="msg" class="msg resource">{{ msg }}</div>
+    <div v-if="settings.tokenSandbox" class="from-keycloak-vue">
       <hr>
-      <TokenView></TokenView>
+      <button @click="manuallyRefreshAccessToken">Refresh access token</button>
+      <div>
+        <h2>idToken</h2>
+        <div class="token">
+          <div v-for="(value, key) in keycloak.idTokenParsed">
+            <div class="key">{{ key }}</div>
+            <div class="value">{{ value }}</div>
+          </div>
+        </div>
+        <h2>access token</h2>
+        <div class="token">
+          <div v-for="(value, key) in keycloak.tokenParsed">
+            <div class=" key">{{ key }}</div>
+            <div class="value">{{ value }}</div>
+          </div>
+        </div>
+        <h2>refresh token</h2>
+        <div class="token">
+          <div v-for="(value, key) in keycloak.refreshTokenParsed">
+            <div class=" key">{{ key }}</div>
+            <div class="value">{{ value }}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/ResourceButton.vue

@@ -1,50 +0,0 @@
-<script setup lang='ts'>
-import { ref, type PropType, type ComponentObjectPropsOptions } from 'vue'
-import { type AxiosInstance } from 'axios'
-
-import { resourceServer, axiosResourceProviders } from '@/main'
-
-interface Props {
-  resourceName: string,
-  resourceProviderId?: string | number,
-  resourceId?: string | null,
-}
-
-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>("")
-
-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 axiosResourceProvider.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>

src/ResourceResponse.vue

@@ -1,23 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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" :innerText="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" :innerText="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" :innerText="key"></div>
-        <div class="value" :innerText="value"></div>
-      </div>
-    </div>
-</template>

src/UserInfo.vue

@@ -1,45 +0,0 @@
-<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,31 +1,8 @@
 import { createApp } from 'vue'
 import Keycloak from "keycloak-js"
 import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
-import axios, { Axios, type AxiosInstance } from 'axios'
+import axios, { type AxiosInstance } from 'axios'
-import App from '@/App.vue'
+import App from './App.vue'
-
-export interface Resource {
-  name: string
-  default_resource_id: string
-  role_required: string
-  scope_required: string
-}
-
-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
@@ -36,17 +13,12 @@ interface Settings {
   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(
@@ -72,31 +44,14 @@ axios.get("settings.json").then().then(
       },
       onReady(keycloak: Keycloak) {
         initializeTokenInterceptor(keycloak)
-        app.mount("#app")
       },
     })
+    app.mount("#app")
   }
 )
 
+
 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}`