Webentwicklung – Page 2 – Webentwicklung und sonstiger Unsinn :)

22. March 202122. March 2021

Mastodon remove github notice

You want to remove the github link and most importantly the freaking version, because it’s no one’s business what version your server runs!
Continue reading “Mastodon remove github notice”

11. March 2021

Telekom Heimanschluss gekündigt

Ich habe heute meinen Telekom Heimanschluss in Deutschland gekündigt.
45€ im Monat für 100/40 Mbit/s.

Der Grund ist, ich habe eine DSL Vergleich Seite und alle außer Telekom Affiliate haben kein Problem mit der Seite, nur Telekom Affiliate lehnt ständig die Partnerschaft ab.

Website ergänzt nicht die Marke des Advertisers.
URL ist für die Advertiser-Marke nicht relevant.
und noch so ein Pseudobullshitgewäsch.
Hätte ich einen Deutschen Namen hätten sie mich nicht abgelehnt.

Mehrere Anfragen nach den Gründen blieben unbeantwortet.

Daraus ziehe ich die Konsequenz und kündige meinen Telekom Vertrag.
Ich sehe nicht ein an jemand Geld zu zahlen der mich nicht als Partner haben will.

5. March 20215. March 2021

Watch out! It’s the Angular Thought Police!

So, yesterday I was visiting Angular’s discord server, because after a little over a month with Vue I was missing Angular’s components and way to express event listeners and 2-way binding of variables as well as the class based approach.
Vue2 is a simple, super productive framework, especially with Quasar, with a rich ecosystem and excellent libraries like vuex-orm, which is really fantastic, mind blowing.
It’s not perfect, nothing in this world is. The same way that Angular isn’t perfect or React or Svelte.
The worst part of Angular is the forced rxjs, if you’re doing anything more complex than a Hello World application anyway.
Continue reading “Watch out! It’s the Angular Thought Police!”

28. February 202128. February 2021

DSL Vergleich relaunch

Das Vergleichsportal für Internetzugangstarife, DSL Tarife, Kabel Tarife, Glasfaser Tarife ist seit heute in neuer Version verfügbar.

Aktuell sind nur wenige Tarife in der Datenbank, doch das wird sich im Laufe der Zeit ändern.

Besuchen Sie folgenden Link: DSL Vergleich

25. February 202113. July 2021

Keycloak-js client with Quasar

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:

<html>
<body>
<script>
  parent.postMessage(location.href, location.origin)
</script>
</body>
</html>

<html>

<body>

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

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()
      }
    })
  })
}

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

// ...
    boot: [
      'i18n',
      'axios',
      'keycloak'
    ],
// ...

// ...

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.