keycloak使用与前端keycloak-js

keycloak使用与前端keycloak-js

功能背景

现有的前端密码登录不安全，需用采用授权码模式登录，这里使用keycloak为例

keycloak使用

1：使用前需要配置java环境
2：配置完后可根据该 keycloak使用以及vue连接,git仓库里的只需要跑vue-demo文件夹，启动keycloak时打开keycloak文件点bin/standalone.bat文件
3：连接后可实现登录重定向(注意：10版本连接之后前端页面会连续刷新token，原因是iframe304错误获取不到iframe里的信息，可以自己更改vue里keycloak-js源码,11版本没问题可以直接用，前端keycloak-js需与keycloak版本对应)

解决重定向刷新问题

公司用的keyclock版本10.0.1，以下以10.0.1版本为例

可以在main.js文件里删除iframe

    let iframe = document.getElementsByTagName('iframe')[0]
    iframe.remove()

删除iframe之后会抛错，接下来需改keycloak-js文件，keycloak-js文件可在npm中下载，在dist包里找到keycloak.js文件，在里面找到checkLoginIframe函数

    function checkLoginIframe() {
            var promise = createPromise();
            if (loginIframe.iframe && loginIframe.iframeOrigin ) {
                var msg = kc.clientId + ' ' + (kc.sessionId ? kc.sessionId : '');
                loginIframe.callbackList.push(promise);
                var origin = loginIframe.iframeOrigin;
                console.log(loginIframe.iframe)
                if (loginIframe.callbackList.length == 1) {
                  loginIframe.iframe.contentWindow
                  && loginIframe.iframe.contentWindow.postMessage(msg, origin); // 
                }主要是这段行
            } else {
                promise.setSuccess();
            }
            return promise.promise;
        }

找到keycloak.js700行左右,按下面的来，就不会报错了

    // if (loginIframe.enable) {
    //     var iframePromise = checkLoginIframe();
    //     console.log(iframePromise)
    //     iframePromise.then(function() {
            exec();
    //     }).catch(function() {
    //         promise.setError();
    //     });
    // } else {
    //     exec();
    // }

修改完后的keycloak-js在vue public/index.html里引入，但直接引入是不行的我们需要压缩，这里借助uglify-js工具 ，就不用npm安装引入了

接下来要实现vue自动刷新token

keycloak.token是获取token的，可在axios里设置请求头
需要借助keycloak-js里isTokenExpired函数
例：

  setInterval(() => { // 过期前三秒请求
    if (keycloak.isTokenExpired(13)) { // 马上要过期了，请求
      keycloak.updateToken(-1)
    }
  }, 1000 * 10);

自定义keycloak登录页实现

vue与keycloak连接未登录时会跳转到keycloak登录页
自定义登录页

创建一个my-style文件在ftl文件，themes文件里，将同级目录keyclock文件的里login文件复制进my-style文件

新建自己的样式文件都是基于base文件里的模板，登录页是根据template.ftl文件，themes\base\login，在template.ftl里引入js，例：

<script src="${url.resourcesPath}/js/jquery.min.js" type="text/javascript"></script>
<script src="${url.resourcesPath}/js/js.js" type="text/javascript"></script>

这里引得js为你自定义文件里的js路径，js文件需放在新增文件目录里，完成后就可以改样式和逻辑了，尽量少删除template.ftl文件里的代码，尽量用js去操作，避免影响