0.2.9

.forgejo/workflows/build.yaml

@@ -1,72 +0,0 @@
-on:
-  push:
-  workflow_dispatch:
-    inputs:
-      build:
-        description: "Build package"
-        required: true
-        default: false
-        type: boolean
-
-jobs:
-  build:
-    runs-on: container
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Get the version from git
-        id: version
-        run: echo "version=$(git describe --dirty --tags)" >> $GITHUB_OUTPUT
-
-      - name: Check if the package should be built
-        id: builder
-        env:
-          RUN: ${{ toJSON(inputs.build || !contains(steps.version.outputs.version, '-')) }}
-        run: |
-          echo "run=$RUN" >> $GITHUB_OUTPUT
-          echo "Run build: $RUN"
-
-      - name: Info - version and if the image container should be built
-        env:
-          VERSION: ${{ steps.version.outputs.version }}
-          RUN: ${{ steps.builder.outputs.run }}
-          FORCE: ${{ toJSON(inputs.build) }}
-        run: |
-          echo "Version $VERSION, force (manual input): $FORCE, run the build: $RUN"
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          run_install: false
-          version: 10
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Update version.json from git describe
-        run: pnpm run version
-
-      - name: Set the version in package.json
-        env:
-          VERSION: ${{ steps.version.outputs.version }}
-        run: sed "s/0.0.0/${VERSION}/" -i package.json
-
-      - name: Build package (transpile ts => js)
-        run: pnpm run build --base /oidc-test-web
-
-      - name: Set registry token for pnpm"
-        env:
-          LOCAL_NPM_TOKEN: ${{ secrets.LOCAL_NPM_TOKEN }}
-        run: pnpm set "//code.philo.ydns.eu/api/packages/philorg/npm/:_authToken=${LOCAL_NPM_TOKEN}"
-
-      - name: Publish
-        if: fromJSON(steps.builder.outputs.run)
-        run: pnpm publish --no-git-checks

.woodpecker/build.yaml

@@ -0,0 +1,45 @@
+when:
+  - event: manual
+  - event: tag
+
+#depends_on:
+  #- test
+
+steps:
+  npm:
+    image: code.philo.ydns.eu/philorg/pnpm
+    environment:
+      ORG: philorg
+      REGISTRY_TOKEN:
+        from_secret: registry_token
+    volumes:
+      - pnpm:/root/.local/share/pnpm
+    commands:
+      - pnpm install --frozen-lockfile
+      - pnpm set "//code.philo.ydns.eu/api/packages/$ORG/npm/:_authToken=$REGISTRY_TOKEN"
+      - pnpm publish --no-git-checks
+    failure: ignore
+
+  build_publish:
+    image: quay.io/podman/stable:latest
+    # Caution: This image is built daily. It might fill up your image store quickly.
+    #pull: true
+    volumes:
+      - containers:/var/lib/containers
+      - pnpm:/root/.local/share/pnpm
+    # Fill in the trusted checkbox in Woodpecker's settings as well
+    privileged: true
+    environment:
+      registry: code.philo.ydns.eu
+      org: philorg
+      container_name: oidc-vue-test
+      registry_token:
+        from_secret: registry_token
+    commands:
+      # Login at the registry
+      - podman login -u __token__ --password $registry_token $registry
+      # Build the container image
+      - podman build --volume=/var/lib/containers:/var/lib/containers --tag $registry/$org/$container_name:latest --tag $registry/$org/$container_name:$CI_COMMIT_TAG  .
+      # Push the image
+      - podman push $registry/$org/$container_name:latest
+      - podman push $registry/$org/$container_name:$CI_COMMIT_TAG

Containerfile

@@ -1,3 +1,20 @@
-FROM docker.io/nginx:alpine
+FROM docker.io/node:alpine as base
 
-COPY ./dist /usr/share/nginx/html
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+
+FROM base as build-stage
+
+WORKDIR /app
+COPY pnpm-lock.yaml .
+RUN pnpm fetch --prod
+COPY . .
+RUN pnpm run build
+
+FROM docker.io/library/nginx:alpine as production-stage
+RUN mkdir /app
+COPY --from=build-stage /app/dist /usr/share/nginx/html/oidc-test-web
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -2,27 +2,128 @@
 
 Small web app for experimenting a web app with a Keycloak auth server.
 
-It is a sibbling of the server version (oidc-test)[philorg/oidc-fastapi-test],
+It is a sibling 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).
 
-## Deployment
+**Note**: decoding tokens requires the use of cryto extension,
+that web browsers allow only with a secured connection (https).
 
-In a container:
+## Configuration
+
+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
 }
 redir /oidc-test-web /oidc-test-web/
 ```
+
+[![status-badge](https://code.philo.ydns.eu/woodpecker/api/badges/18/status.svg)](https://code.philo.ydns.eu/woodpecker/repos/18)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "typescript",
-  "version": "0.0.0",
+  "version": "0.2.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "typescript",
-      "version": "0.0.0",
+      "version": "0.2.9",
       "dependencies": {
         "axios": "^1.7.9",
         "vue": "3.5.13"

package.json

@@ -1,14 +1,13 @@
 {
-  "name": "oidc-text-web",
+  "name": "oidc-test-web",
-  "version": "0.0.0",
+  "version": "0.2.9",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build",
+    "type-check": "vue-tsc --build"
-    "version": "echo \"{\\\"version\\\":\\\"$(git describe --tags --dirty --always)\\\"}\" > src/version.json"
   },
   "dependencies": {
     "@dsb-norge/vue-keycloak-js": "^3.0.1",
@@ -27,6 +26,7 @@
     "vite-plugin-vue-devtools": "7.7.0",
     "vue-tsc": "2.2.0"
   },
+  "packageManager": "pnpm@10.12.1",
   "publishConfig": {
     "registry": "http://code.philo.ydns.eu/api/packages/philorg/npm/"
   }

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/TokenView.vue

@@ -9,21 +9,21 @@ const keycloak = useKeycloak()
     <h2>id token</h2>
     <div class="token">
       <div v-for="(value, key) in keycloak.idTokenParsed">
-        <div class="key" :innetText="key"></div>
+        <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" :innetText="key"></div>
+        <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" :innetText="key"></div>
+        <div class="key" :innerText="key"></div>
         <div class="value" :innerText="value"></div>
       </div>
     </div>

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}`