KeyCloak combat | Vue project integration Keycloak

keycloak is a modern applications and services for open source identity and access management solutions. It makes easier for the protection of applications and services, almost no code. In short, Keycloak mainly for Web applications or RESTful API provides SSO.

Keycloak on the basics, you can download yourself. There are many online introductory tutorial herein, this started directly from JavaScript Adapter, using Vue framework of integrated keycloak.

We used here is keycloak Vue plug-in vue-keycloak-js. I originally intended to use JavaScript Adapter native to achieve, but cross-domain frequently encountered problems. It replaced vue-keycloak-js. The official document plug- vue-keycloak-js

First, download and install

Download and install vue-keycloak-jsrecommended cnpm, npm slightly slower download speeds.

cnpm i --save @dsb-norge/vue-keycloak-js 

Second, the introduction and use of

First need to introduce vue-keycloak-js, if you are not introduced in App.vue in it, it also needs to introduce Vue.

import Vue from 'vue';

Then reintroduced vue-keycloak-js

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

    Vue.use(keycloak , {
        init: {
            onLoad: 'login-required'
        },
        config: {
            url: 'http://localhost:8080/auth',
            realm: 'test',
            clientId: 'test-realm'
        },
        onReady: (keycloak) => {
            keycloak.loadUserProfile().success((data) => {
                requestAuth;
                console.log(data);
            });
        }
    });

Because my project using the Facade (facades mode), so I need to introduce keycloak the login interface. So we not introduced in App.vue in.

Third, the configuration keycloak

In general, before you see the article should have configured keycloak. But I ran into problems after completion of cross-domain configuration js. So I must say that under here.

First, we need to add a domain realm

Then add the following domain in a client-side Client just added

Edit the client, to solve cross-domain problems. Here you should fill in the URL in your Web client origin (Web origin) in. I am here because it is the test results, so fill up *, but this is not safe, it is recommended that you configure as needed.

Reference article

vue sso log in using the login VueKeycloak

Keycloak doc：JavaScript Adapter

StackOverFlow：keycloak CORS Headers in 401