一：KEYCLOAK配置部分：
1，下載keycloak，官網地址：https://www.keycloak.org/downloads.html。下載第一個就行
2，下載完畢之后，打開文件，訪問 bin 路徑，點擊 standalone.bat 打開，打開之后大概如下：
3，然后訪問：http://localhost:8080/auth/ ，下面也有一個本地路徑，在瀏覽器訪問會告訴你啟動成功。
4，點擊進入控制台，添加realm（與master管理員區分開，建議添加此項個人域），之后按照步驟點擊。
1）創建client
2）創建完realm之后，再創建client，點擊左側client，然后create。
3）填寫client信息，此處的Client ID是集成layui或vue的時候需要用到的，這里我設置成dianli，root URL是集成前端項目集成keycloak之后訪問程序的地址。這個地址在建成client之后可以修改增加或者刪除，這里可以先填寫或不填寫。
4）填寫完畢之后保存save，然后來進行配置，點擊clients 選擇自己剛剛創建的。
5）如圖，我們配置了Access Type為public，普通用戶登錄選擇publi即可；配置Valid Redirect URLS，這是認證成功后跳轉到的頁面地址，這里用的通配符*。
6）接下來，創建用戶角色，點擊user，然后add user
設置密碼，保存即可
7）到此，簡單的單點認證就配置完畢，接下來就是集成layui或者vue。
二：layui集成keycloak
1，下載keycloak.js。百度搜索下載即可
2，script引入js
3，layui集成：
layui.use(['element','keycloak'], function () {
var keycloak = layui.keycloak;
var $ = layui.jquery, element = layui.element;
keycloak.init({ onLoad: 'login-required',checkLoginIframe: false}).success(function () {
console.log(keycloak.tokenParsed);
console.log('用戶名：'+keycloak.tokenParsed.preferred_username);
//如需要以下可以調用ajax方法將keycloak用戶名傳入后台獲取用戶詳細信息
}).error(function () {
console.log("failed to login");
});
$('#logOut').on('click', function () {
//退出程序
keycloak.logout();
})
});
4，keycloak.json 配置
{
"realm": "electricity", //Realm名稱
"auth-server-url": "http://localhost:8080/auth/", //Keycloak server地址，通常為http://{host}:{port}/auth。
"ssl-required": "electricity", // 與Keycloak server通信的協議，目前值為none，即使用HTTP。
"resource": "dianli", // 應用的Client ID。需要將受保護的應用注冊在Keycloak Clients中，Client ID即為注冊時所填寫的應用的唯一標識。
"public-client": true, // 值為true時，應用不需要向Keycloak server提供credentials。
"verify-token-audience": true,
"use-resource-role-mappings": true,
"confidential-port": 0
}
三：VUE 集成keycloak
前端代碼部分：
1，安裝 keycloak ==> cnpm i --save @dsb-norge/vue-keycloak-js
2，在 main.js里面引入keycloak模塊 ==> import keycloak from '@dsb-norge/vue-keycloak-js'
3，在main.js添加對應的代碼
Vue.use(keycloak, {
init: {
onLoad: 'login-required',
checkLoginIframe: false // 防止登陸之后無限刷新
},
config: {
url: window.SITE_CONFIG['keycloakURL'], //keycloak的client配置地址: (http:ip地址或localhost:端口號/auth)
realm: 'electricity', // keycloak的client名稱
clientId: 'dianli' // keycloak的clientid
},
onReady: (keycloak) => {
//console.log(keycloak);//這里打印看看keycloak有哪些屬性或方法。登入登出初始化方法都有。
keycloak.loadUserProfile().success((data) => {
http.post(window.SITE_CONFIG['apiURL'] + `/login`, { username: data.username }).then(({ data: res }) => {
Cookies.set('token', res.data.token)；
router.replace({ name: 'home' }}
})
})
}
})
至此，kaycloak集成完畢。開啟本地項目，訪問之前配置的http://。。。登陸用戶，認證成功即可訪問項目。
PS：若有錯誤，歡迎指正，謝謝！！