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地址。我這里因為是測試效果，所以填了*，但是這是不安全的，建議你按需要配置。