How can I use keycloak to protect my vue js pages and spring boot rest api?

Question

Recently I use jhipster to create a spring boot project which select keycloak to protect my rest api, and the application.properties like this:

  security:
    oauth2:
      client:
        provider:
          oidc:
            issuer-uri: http://localhost:9080/auth/realms/jhipster
        registration:
          oidc:
            client-id: web_app
            client-secret: web_app

also, I create a vue project which select keycloak js to protect pages, the config like this:

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

Vue.use(VueKeyCloak, {
  config: {
    realm: 'jhipster',
    url: 'http://127.0.0.1:9080/auth',
    clientId: 'web_app'
  },
  onReady: (keycloak) => {
    console.log(keycloak.token)
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  }
})

And we can see the vue project and spring project use the same keycloak client id, the Access Type is public in keycloak. In vue project, I need to use username and password to log in, after log in I can get a token through keycloak.token, and I also set

config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`

when I call spring boot rest api. But not working, always return 401. After several days hard working, I can not find the reason. Someone can help me?

Thank you very much.

Answer 1

You should close the "Client authentication" of the client "web-app" you created, due to the vue app can only access public through username password