Philo's
Repositories
10
 Projects Packages
28

oidc-test-web (0.2.2)

Published 2025-02-25 13:55:47 +00:00 by phil in philorg/oidc-vue-test

Installation

registry=
npm install oidc-test-web@0.2.2
"oidc-test-web": "0.2.2"

About this package

Test app for OIDC, OAuth2 - web app version written with Vue3

Small web app for experimenting a web app with a Keycloak auth server.

It is a sibling of the server version oidc-test, which acts also as a resource server.

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, that web browsers allow only with a secured connection (https).

Configuration

The app expects that a settings.json file is available on the server at the app's base url.

For example:

{
  "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:

pnpm run build

Eventually specify a base url (eg. accessible from https://for.example.com/oidc-test-web):

pnpm run build --base oidc-test-web

Deployment

Examples of deployment are presented below.

  • Using the nginx default container, from the development source tree:
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:
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:
[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:

systemctl --user daemon-reload
systemcrl --user start oidc-vue-test

Frontend

YMMV, easy with Caddy:

handle /oidc-test-web {
  reverse-proxy hostname.domainame:8874
}
redir /oidc-test-web /oidc-test-web/

Dependencies

Dependencies

ID Version
@dsb-norge/vue-keycloak-js ^3.0.1
axios 1.7.9
keycloak-js ^26.1.0
vue 3.5.13

Development dependencies

ID Version
@tsconfig/node22 22.0.0
@types/node 22.10.5
@vitejs/plugin-vue 5.2.1
@vue/tsconfig 0.7.0
npm-run-all2 7.0.2
typescript 5.6.3
vite 6.0.7
vite-plugin-vue-devtools 7.7.0
vue-tsc 2.2.0
Details
npm
philorg/oidc-vue-test
2025-02-25 13:55:47 +00:00
1
latest
7.8 KiB
Assets (1)
oidc-test-web-0.2.2.tgz 7.8 KiB
Versions (2) View all
0.2.2 2025-02-25
0.2.1 2025-02-25
Issues