Webentwicklung und sonstiger Unsinn :) Web development and other nonsense :)
Rant mode:
Which idiots name template references “ref” and then name essentially all composition api variables “ref()” as well!?!
YEAH GOOD FUCKING JOB VUE DEVELOPER IDIOTS
It makes searching for answer so much more fucking frustrating! Fucking idiots.
Since Pull Request 116 of dsb-norge/vue-keycloak-js today Keycloak works well with Vue 3.
This is great news because you can now use Quasar v2, which uses vue 3 under the hood for your authentication purposes.
If you missed the post on how to integrate keycloak with Quasar v1 and v2, click the link to read it.
Happy coding.
So you’d like to use openid-connect (oidc), especially keycloak (kc) in your Quasar app.
There’s a package, @dsb-norge/vue-keycloak-js . I’d recommend you fork it and create your own version with the keycloak-js version that matches your Keycloak server. However it also works with just the version used in this git repository.
The git repository is available at
https://github.com/dsb-norge/vue-keycloak-js
This is for Quasar v1
Alright let’s get started.
1. Create a file named silent-check-sso.html with the following content:
|
1 2 3 4 5 6 7 |
<html> <body> <script> parent.postMessage(location.href, location.origin) </script> </body> </html> |
Put that file in the public directory as its path is
public/silent-check-sso.html.
2. Create boot/keycloak.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import VueKeyCloak from '@dsb-norge/vue-keycloak-js' import axios from 'axios' export default async ({ Vue, router, store, app }) => { async function tokenInterceptor () { axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}` return config }, error => { return Promise.reject(error) }) } return new Promise(resolve => { Vue.use(VueKeyCloak, { init: { onLoad: 'login-required', // or 'check-sso' flow: 'standard', pkceMethod: 'S256', silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html', checkLoginIframe: false // otherwise it would reload the window every so seconds }, config: { url: 'https://your.keycloak.installation/auth', realm: 'your-realm-name', clientId: 'your-client-id' }, onReady: (keycloak) => { tokenInterceptor() resolve() } }) }) } |
3. Reference the created boot file in quasar.conf.js
|
1 2 3 4 5 6 7 |
// ... boot: [ 'i18n', 'axios', 'keycloak' ], // ... |
And that’s really all there is to it.
After this is done you can access the keycloak object via $keycloak in your template.
This is for Qusasar v2:
Thanks a bunch to Excel1 and yusufkandemir for figuring it out.
First you have to upgrade or use the v2 branch of @dsb-norge/vue-keycloak-js.
e.g. npm i @dsb-norge/vue-keycloak-js@2
or use your own fork
But essentially you do whatever you would do for v1 only the boot/keycloak.js file is different
The boot/keycloak.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { boot } from 'quasar/wrappers' import VueKeyCloak from '@dsb-norge/vue-keycloak-js' import axios from 'axios' export default boot(async ({ app, router, store }) => { async function tokenInterceptor () { axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}` return config }, error => { return Promise.reject(error) }) } return new Promise(resolve => { app.use(VueKeyCloak, { init: { onLoad: 'login-required', // or 'check-sso' flow: 'standard', pkceMethod: 'S256', silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html', checkLoginIframe: false }, config: { url: 'https://my.keylcoak.domain/auth', realm: 'my.realm', clientId: 'my-client_id' }, onReady: (keycloak) => { tokenInterceptor() resolve() } }) }) }) |
and of course don’t forget to add it to the boot array in quasar.conf.js
The Nginx conf is the same for any sock-js site. It can be used for Vue and Angular and Svelte, not sure about React but I’d guess it uses sock-js as well.
My dev domain is qxdsladmin.local in this example.
/etc/nginx/conf.d/qxdsladmin.local.conf
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
server { listen 80; listen [::]:80; server_name qxdsladmin.local; root /home/darko/WebProjects/qxdsladmin/public/; index index.html; error_log /var/log/nginx/qxdsladmin.local.error; location / { proxy_pass http://localhost:4201; proxy_read_timeout 30; proxy_connect_timeout 30; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /sockjs-node/ { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; rewrite ^/(.*)$ /$1 break; proxy_set_header Host localhost; proxy_pass http://localhost:4201/; } location ~ ^/api/v1/.* { proxy_pass http://unix:/tmp/qxdsl-proxy.sock; proxy_read_timeout 30; proxy_connect_timeout 30; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } |
This location ~ ^/api/v1/.* is a mountpoint for the backend http api, which in my case is a RESTful Go API.
The vue part, create a file named vue.config.js in the project’s root dir.
So if you used vue create vxdsladmin it’s the directory you go to when doing cd vxdsladmin.
|
1 2 3 4 5 6 7 8 |
module.exports = { devServer: { disableHostCheck: true, host: '0.0.0.0', port: 4201, public: 'qxdsladmin.local' } } |
This works for me, but maybe it can be improved. Let me know if that’s the case.