127 lines
3.1 KiB
Markdown
127 lines
3.1 KiB
Markdown
# 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](philorg/oidc-fastapi-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:
|
|
|
|
```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
|
|
```
|
|
|
|
## 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/
|
|
```
|