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);
});
}
});
這里的on-load的參數有兩個，一個是login-required，另一個是check-sso。login-required會檢查你是否登錄到了keycloak以及判斷你登錄的客戶端是否正確，如果沒有登錄就跳轉到keycloak的登錄頁面；check-sso只會判斷你登錄的客戶端是否正確，如果沒有登錄就會保持未登錄的狀態。
因為我的項目中使用了Facade（門面模式），所以我需要在登錄界面中引入keycloak。因此就不在App.vue中引入了。
1.全局刷新的token
我們知道引入keycloak之后token是會刷新的，幾分鍾就刷新一次。在Vue中發送HTTP請求都需要token，這個token通常是設置在axios的攔截器中。那么我們如何保證每次向后台發送HTTP請求的時候這個token都是最新的呢？這個問題我們可以使用vue-keycloak-js中內置的全局變量Vue.prototype.$keycloak.token。
在axios攔截器中我們可以這樣寫。
import Vue from 'vue';
......
config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`
這樣就能夠保證每次發送請求中的token是最新的。注意千萬不要在登錄成功之后把token保存在瀏覽器當中，然后每次都獲取這個瀏覽器中的token。在token失效之后這樣的操作將無法刷新token。一點要按照上面的方法設置token。
2. 如何退出登錄和獲取用戶信息
vue-keycloak-js提供了全局的$keycloak函數，我們可以用下面的方法退出keycloak
//獲取用戶信息可以使用
this.$keycloak.loadUserProfile()
//退出登錄使用
this.$keycloak.logoutFn()
三、配置keycloak
通常來說，你看這篇文章之前應該已經配置好了keycloak。不過我在配置完js之后遇到了跨域問題。因此我在此處順帶說下。
首先需要添加一個域realm，這里的realm名稱就是vue-keycloak-js的option中填寫的realm。
然后在剛才添加的域下面添加一個客戶端Client，這里的客戶端ID名稱就是vue-keycloak-js的option中填寫的realm
編輯客戶端，解決跨域問題。此處你應該在Web起源(Web origin)中填入你客戶端的URL地址。我這里因為是測試效果，所以填了*，但是這是不安全的，建議你按需要配置。
