Compare commits
No commits in common. "main" and "0.1.5" have entirely different histories.
11 changed files with 108 additions and 435 deletions
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
FROM docker.io/nginx:alpine
|
||||
|
||||
COPY ./dist /usr/share/nginx/html/oidc-test-web
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
COPY ./dist /usr/share/nginx/html
|
||||
|
|
|
|||
109
README.md
109
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,
|
||||
that web browsers allow only with a secured connection (https).
|
||||
## Deployment
|
||||
|
||||
## 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`):
|
||||
In a container:
|
||||
|
||||
```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
|
||||
podman run -it --rm -p 8874:80 -v ./dist:/usr/share/nginx/html/oidc-test-web docker.io/nginx:alpine
|
||||
```
|
||||
|
||||
## Frontend
|
||||
|
||||
YMMV, easy with *Caddy*:
|
||||
|
||||
```Caddyfile
|
||||
handle /oidc-test-web {
|
||||
reverse-proxy hostname.domainame:8874
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "oidc-test-web",
|
||||
"name": "oidc-text-web",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
background-color: #90c3eeA0;
|
||||
box-shadow: 0px 0px 10px #90c3ee;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
137
src/App.vue
137
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'
|
||||
import ResourceButton from './ResourceButton.vue'
|
||||
import UserInfo from './UserInfo.vue'
|
||||
import TokenView from './TokenView.vue'
|
||||
import ResourceResponse from './ResourceResponse.vue'
|
||||
|
||||
let resource = ref({})
|
||||
const keycloak = useKeycloak()
|
||||
let resourceResponse = ref({})
|
||||
let resources = ref<Resources>({})
|
||||
let msg = ref<string>("")
|
||||
let msg = ref("")
|
||||
|
||||
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() {
|
||||
await resourceServer.get("").then(
|
||||
async function get_resource(id: string) {
|
||||
if (!keycloak.keycloak) { return }
|
||||
await resourceServer.get(id).then(
|
||||
resp => {
|
||||
resources.value = resp.data["plugins"]
|
||||
}
|
||||
)
|
||||
}
|
||||
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']
|
||||
resource.value = resp['data']
|
||||
msg.value = ""
|
||||
}
|
||||
).catch(
|
||||
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)`
|
||||
}
|
||||
}
|
||||
err => msg.value = err
|
||||
)
|
||||
}
|
||||
</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>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>These resources are available at this authentication provider:</p>
|
||||
<div class="links-to-check">
|
||||
<ResourceButton v-for="(resource, name) in resources"
|
||||
:resourceName="name.toString()"
|
||||
:resourceId="resource.default_resource_id"
|
||||
:innerText="resource.name"
|
||||
@getResource="getResource($event, name.toString(), resource)"
|
||||
>
|
||||
</ResourceButton>
|
||||
<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>
|
||||
<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 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>
|
||||
<div v-if="settings.tokenSandbox" class="token-info">
|
||||
<hr>
|
||||
<p class="center">
|
||||
Fetch resources from a resource server (at {{ settings.resourceServerUrl }})
|
||||
with your authentication token:
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button @click="get_resource('time')">Time</button>
|
||||
<button @click="get_resource('bs')">BS</button>
|
||||
</div>
|
||||
<div class="resources">
|
||||
<div v-if="Object.entries(resource).length > 0" class="resource">
|
||||
<div v-for="(value, key) in resource">
|
||||
<div class="key">{{ key }}</div>
|
||||
<div v-if="key == 'sorry' || key == 'error'" class="error">{{ value }}</div>
|
||||
<div v-else class="value">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
53
src/main.ts
53
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 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
|
||||
}
|
||||
import axios, { type AxiosInstance } from 'axios'
|
||||
import App from './App.vue'
|
||||
|
||||
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}`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue