这几天改进的VUE一个项目,需要增加单点登录功能,后端把需要的都给写好了,其中包括keycloak的服务配置,按照要求写好了之后发现有问题,晚上查阅了很多资料,都没有遇见类似的,最后没办法,自己本地配置服务,连接自己的keycloak才没有问题
查阅过程中发现部分文章不是很全面,就打算借花献佛,一套流程走一遍,这里就不给大家介绍了,直接上过程吧

keycloak 官网入口

https://www.keycloak.org/downloads

按照你的需求下载你需要的安装包(我下载的10.0.2版本)
然后按照你个人喜好解压文件,然后找到该文件目录下bin中的standalone.bat运行就好了
(本人属于前端小白,就更别提后端了,使用keycloak的前提是你已经安装好了Java,也配置好了环境变量就可以使用,所以没有的小伙伴可以去下载配置了)

Java下载的官网入口

https://www.java.com/zh_CN/

keycloak账号密码注册登录

等运行结束之后你直接访问本地 http://localhost:8080 进入keycloak页面 然后注册你的账号
(后面就用这个账号密码登录就好了)
在这里插入图片描述

keycloak 创建领域

登录进入keycloak的页面,创建Realm:dome 后续的客户端、角色、用户都是在这个里面
在这里插入图片描述
进入直接输入你创建的名称,然后点击回车就好了,就会出现下面这个页面
在这里插入图片描述

keycloak 创建客户端

点击Clients 进行新建客户端
创建一个新的客户端:vue-dome,Access Type选择public
在这里插入图片描述
Access Type有三个值分别对应不同的访问类型

  1. confidential:适用于服务端应用,且需要浏览器登录以及需要通过密钥获取access token的场景。典型的使用场景就是服务端渲染的web系统。
  2. public:适用于客户端应用,且需要浏览器登录的场景。典型的使用场景就是前端web系统,包括采用vue、react实现的前端项目等。
  3. bearer-only:适用于服务端应用,不需要浏览器登录,只允许使用bearer token请求的场景。典型的使用场景就是restful api

Valid Redirect URIs 就是你允许访问你 keycloak 的地址

编辑客户端,解决跨域问题。此处你应该在Web起源(Web origin)中填入你客户端的URL地址。我这里因为是测试效果,所以填了*,但是这是不安全的,建议你按需要配置

创建角色和用户

点击Roles 创建2个角色:ROLE_ADMIN、ROLE_CUSTOMER
在这里插入图片描述

点击 Users 创建2个用户:admin、customer
创建过后 需要点击 View all users 才看的见你创建的用户
在这里插入图片描述

给创建用户配置密码

点击需要配置的用户过后 再点击 Credentials 进去配置当前用户的密码
在这里插入图片描述

绑定用户和角色

给admin用户分配角色ROLE_ADMIN 点击admin用户 然后点击Role Mappings
在这里插入图片描述
给customer用户分配角色ROLE_CUSTOMER
在这里插入图片描述

开始在VUE项目中集成

创建VUE项目

首先需要创建VUE项目 本人这里使用的vue-cil脚手架去搭建的,就不展示代码了

@dsb-norge/vue-keycloak-js 下载

@dsb-norge/vue-keycloak-js npm 下载地址

// 需要在mian.js中引入
import keycloak from '@dsb-norge/vue-keycloak-js';   // 第一种方法

Vue.use(keycloak , {   // 第一种方法
  init: {
      onLoad: 'login-required'
  },
  config: {
      url: 'http://localhost:8080/auth',    // 这里需要写你链接的地址
      realm: 'dome',                              // 链接的领域
      clientId: 'vue-dome'                     // 链接的客户端
  },
  onReady: (keycloak) => {
      keycloak.loadUserProfile().success((data) => {
          new Vue({ 
            router,
            store,
            render: h => h(App)
          }).$mount('#app')
          console.log(data);
      });
  }
});

运行项目然后就进入到登录界面
在这里插入图片描述按照你刚刚注册账号和你配置的密码进行登录,登录成功后会返回页面
在这里插入图片描述

获取用户token

一般情况下,都会给你返回一个用户token 你通过下面代码获取

this.$keycloak.token   // 在你需要获取的地方

退出登录

this.$keycloak.logoutFn()

官网文档中还有很多属性,大家可以去看看

到这里就结束了,之前看文章还有其他的方法在下面给大家放链接了
npm i keycloak-js --save 方法

Logo

前往低代码交流专区

更多推荐