CI: continue if pnpm publish fails (package version already exists)

.forgejo/workflows/build.yaml

@@ -3,7 +3,7 @@ on:
   workflow_dispatch:
     inputs:
       build:
-        description: "Build package"
+        description: "Build package and container"
         required: true
         default: false
         type: boolean
@@ -70,3 +70,40 @@ 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,3 +1,5 @@
 FROM docker.io/nginx:alpine
 
-COPY ./dist /usr/share/nginx/html
+COPY ./dist /usr/share/nginx/html/oidc-test-web
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -2,24 +2,123 @@
 
 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

package.json

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

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