这几天改进的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 方法