方式一:keycloak-js
这种方式就像使用QQ登录一样,登录会跳转到 keycloak 给的登录界面。
安装:
npm i keycloak-js
使用:
import Keycloak from 'keycloak-js'
const keycloak: any = Keycloak({
url: 'https://xxx.com/', // 远程地址
realm: 'xxx',
clientId: 'xxx'
})
keycloak.init({onLoad: 'login-required'}).then((auth: boolean) => {
if (!auth) {
window.location.reload();
} else {
new Vue({
el: '#app',
render: h => h(App, { props: { keycloak } })
})
}
})
详细请查看:https://www.keycloak.org/securing-apps/vue
退出登录:
keycloak.logout()
更多方法可以打印 console.log(keycloak)
查看
方式二:vue-keycloak-js
这个是针对 vue 项目封装的 keycloak-js。
安装地址:https://www.npmjs.com/package/@dsb-norge/vue-keycloak-js
安装:
npm i @dsb-norge/vue-keycloak-js
使用:
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js'
Vue.use(VueKeycloakJs, {
init: {
onLoad: 'login-required'
},
config: {
url: 'https://xxx.com/',
realm: 'xxx',
clientId: 'xxx'
},
onReady: (keycloak) => {
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app")
// 获取用户的信息
// keycloak.loadUserProfile().success((data) => {
// console.log(data)
// })
}
})
详细请查看:https://blog.csdn.net/weixin_44326389/article/details/121770219
方式三:RESTful API
这种试可以使用自定义的登录界面。
axios.post(`/keycloak/realms/xxx/protocol/openid-connect/token`, {
client_id: 'xxx',
username: 'xxx',
password: 'xxx',
grant_type: 'password',
}).then(res => {
console.log(res) // 会返回包含 access_token 的信息,access_token 可在线解析成明文数据:https://jwt.io/
})
或者使用 jwt-decode 进行 access_token解析。
接口代理:
server: {
proxy: {
'/keycloak/': {
target: 'https://xxx.com/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/keycloak/, ''),
}
}
},
其他接口请求需要加 token 验证(keycloak 使用的是 JWT):
axios({
url: '/keycloak/user/list',
headers: {
'Authorization': `Bearer ${access_token}`
}
}).then(res => {
console.log(res)
})
最新内容请看原文链接:https://fenxianglu.cn/article/493