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);
});
}
});因为我的项目中使用了Facade（门面模式），所以我需要在登录界面中引入keycloak。因此就不在App.vue中引入了。
三、配置keycloak
通常来说，你看这篇文章之前应该已经配置好了keycloak。不过我在配置完js之后遇到了跨域问题。因此我在此处顺带说下。
首先需要添加一个域realm
然后在刚才添加的域下面添加一个客户端Client
编辑客户端，解决跨域问题。此处你应该在Web起源(Web origin)中填入你客户端的URL地址。我这里因为是测试效果，所以填了*，但是这是不安全的，建议你按需要配置。
