VUE集成keycloak和Layui集成keycloak
阅读原文时间:2023年07月09日阅读:3

一: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:若有错误,欢迎指正,谢谢!!

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章