KeyCloak实战|Vue项目集成Keycloak

https://github.com/keycloak/keycloak/tree/master

keycloak是一个面向现代应用和服务的开源身份和访问管理解决方案。它使得针对应用程序和服务的保护变得容易，几乎不需要代码。简而言之，Keycloak的主要是为Web应用或者RESTful API提供SSO。

关于Keycloak的基础知识，你可以自己下载。网上有很多入门的教程，本篇直接从JavaScript Adapter着手，使用Vue框架进行keycloak的集成。

我们这里用的是Vue中的keycloak插件vue-keycloak-js。原本我打算用原生的JavaScript Adapter来实现，但是频繁遇到了跨域的问题。所以换成了vue-keycloak-js。插件的官方文档vue-keycloak-js

一、下载和安装

下载和安装vue-keycloak-js，推荐使用cnpm，npm下载速度略慢。

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

二、引入和使用

首先需要引入vue-keycloak-js，如果你不是在App.vue中引入的话，那么还需要引入Vue。

import Vue from 'vue';

然后再引入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);
            });
        }
    });