一、下载和安装
下载和安装vue-keycloak-js
cnpm i --save @dsb-norge/vue-keycloak-js
二、引入和使用
1.main.js中引用
首先需要引入vue-keycloak-js
兼容ie 可以安装固定版本号1.0.0 高版本不支持ie
import keycloak from '@dsb-norge/vue-keycloak-js';
生产环境在.env.production配置 开发环境在.env.development配置
例如：
VUE_APP_KEYCLOAK_URL= http://localhost:8080/auth/********
/ ***** 换成自己的key cloak 地址 /***
VUE_APP_KEYCLOAK_REALM= "master"****
VUE_APP_KEYCLOAK_CLIENTID= "demo"****
VUE_APP_KEYCLOAK_ONLOAD='login-required'****
以 VUE_APP_ 开头****
#两个VUE_APP_KEYCLOAK_ONLOAD切换注销 重启尝试****
# check-sso 不是每一页都要登录 需要权限配置****
# login-required 每一页都要登录**** Vue . use(keycloak, {
init: {
onLoad: process . env . VUE_APP_KEYCLOAK_ONLOAD,
checkLoginIframe: false //防止登陆后重复刷新
},
config: {
"realm": process . env . VUE_APP_KEYCLOAK_REALM,
"url": process . env . VUE_APP_KEYCLOAK_URL, //auth-server-url
"clientId": process . env . VUE_APP_KEYCLOAK_CLIENTID, //resource
},
onReady: (keycloak) => {
new Vue({
router,
store,
render: (h) => h(App),
}) . $mount("#app");
}
}); 2. 退出登录和获取用户信息 vue-keycloak-js提供了全局的$keycloak函数，我们可以用下面的方法退出keycloak
//获取用户信息可以使用
this.$keycloak.loadUserProfile()
//退出登录使用
this.$keycloak.logoutFn()
demo
token:{{ $keycloak . token}}
userName:{{ $keycloak . userName}}
<el-button @click=" $keycloak . logoutFn">退出
<el-button @click=" $keycloak . accountManagement">个人信息管理 3.vue.config.js
devServer: {
port: 8088,
更改端口号
三、配置keycloak
下载并安装keycloak和jdk
双击keycloak/bin/standalone.bat
启动 localhost:8080
创建客户端****
创建角色****
创建用户****
Users/editor 增加用户，属性，权限
attributes：avatar、introduction，Keycloak中默认的用户信息比较少，需要扩展用户信息可在attributes中添加
客户端设置attributes mappers****
设置attributes mappers之后，idtoken中会包含对应的attributes信息，方便js客户端直接获取用户信息
四．NUXT使用方式
nuxt.config.js
auth: {
strategies: {
keycloak: {
scheme: 'oauth2',
endpoints: {
authorization: ${env[*process* *.* *env* *.* NODE_ENV] *.* AUTH_API}/auth/realms/${env[*process* *.* *env* *.* NODE_ENV] *.* KEYCLOAK_REALM}/protocol/openid-connect/auth,
token: ${env[*process* *.* *env* *.* NODE_ENV] *.* AUTH_API}/auth/realms/${env[*process* *.* *env* *.* NODE_ENV] *.* KEYCLOAK_REALM}/protocol/openid-connect/token,
userInfo: ${env[*process* *.* *env* *.* NODE_ENV] *.* AUTH_API}/auth/realms/${env[*process* *.* *env* *.* NODE_ENV] *.* KEYCLOAK_REALM}/protocol/openid-connect/userinfo,
logout: ${env[*process* *.* *env* *.* NODE_ENV] *.* AUTH_API}/auth/realms/${env[*process* *.* *env* *.* NODE_ENV] *.* KEYCLOAK_REALM}/protocol/openid-connect/logout?redirect_uri= + encodeURIComponent(String(env[process . env . NODE_ENV] . ENV_API)),
}, logoutRedirectUri: env[process . env . NODE_ENV] . ENV_API,
token: {
property: 'access_token',
type: 'Bearer',
name: 'Authorization',
maxAge: 1800//Canbedynamic?
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30//Canbedynamic?
},
responseType: 'code',
grantType: 'authorization_code',
clientId: env[process . env . NODE_ENV] . KEYCLOAK_CLIENT_ID,
scope: ['openid'],
codeChallengeMethod: 'S256'
},
}
},
env.js
module . exports = {
dev: {
NODE_ENV: 'dev',
ENV_API:'vs-qa.antiy.cn',
AUTH_API:'vs-auth-qa.antiy.cn',
KEYCLOAK_CLIENT_ID:'vs-user',
KEYCLOAK_REALM:'vs'
},
staging: {
NODE_ENV: 'staging',
ENV_API:'vs-qa.antiy.cn',
AUTH_API:'vs-auth-qa.antiy.cn',
KEYCLOAK_CLIENT_ID:'vs-user',
KEYCLOAK_REALM:'vs'
},
production: {
NODE_ENV: 'production',
ENV_API:'vs.antiy.cn',
AUTH_API:'vs-auth.antiy.cn',
KEYCLOAK_CLIENT_ID:'vs-user',
KEYCLOAK_REALM:'vs'
}
}
使用
登录 this . $auth . login()
退出 this . $auth . logout()
获取用户信息
this . $auth . user
this . $auth . fetchUser()
token
this . $auth . strategy . token . get()
