上次我们说了,keycloak的login-status-iframe页面的作用,并解决了跨域情况下,iframe与主页面数据传递的方法,这一次,我们主要分析login-status-iframe.html这个文件的源码,然后分析在我们系统中如何与这个页面对接。

login-status-iframe.html源码

    var init;    function checkState(clientId, origin, sessionState, callback) {        var cookie = getCookie();        var checkCookie = function() {            if (clientId === init.clientId && origin === init.origin) {                var c = cookie.split('/');                if (sessionState === c[2]) {                    callback('unchanged');                } else {                    callback('changed');                }            } else {                callback('error');            }        }        if (!init) {            var req = new XMLHttpRequest();            var url = location.href.split("?")[0] + "/init";            url += "?client_id=" + encodeURIComponent(clientId);            url += "&origin=" + encodeURIComponent(origin);            req.open('GET', url, true);            req.onreadystatechange = function () {                if (req.readyState === 4) {                    if (req.status === 204 || req.status === 1223) {                        init = {                            clientId: clientId,                            origin: origin                        }                        if (!cookie) {                            if (sessionState != '') {                                callback('changed');                            } else {                                callback('unchanged');                            }                        } else {                            checkCookie();                        }                    } else {                        callback('error');                    }                }            };            req.send();        } else  if (!cookie) {            if (sessionState != '') {                callback('changed');            } else {                callback('unchanged');            }        } else {            checkCookie();        }    }    function getCookie()    {        var cookie = getCookieByName('KEYCLOAK_SESSION');        if (cookie === null) {            return getCookieByName('KEYCLOAK_SESSION_LEGACY');        }        return cookie;    }    function getCookieByName(name)    {        name = name + '=';        var ca = document.cookie.split(';');        for(var i=0; i<ca.length; i++)        {            var c = ca[i].trim();            if (c.indexOf(name)===0) return c.substring(name.length,c.length);        }        return null;    }    function receiveMessage(event)    {        if (typeof event.data !== 'string') {            return        }        var origin = event.origin;        var data = event.data.split(' ');        if (data.length != 2) {            return;        }        var clientId = data[0];        var sessionState = data[1];        checkState(clientId, event.origin, sessionState, function(result) {            event.source.postMessage(result, origin);        });    }    window.addEventListener("message", receiveMessage, false);

具体方法说明

这个页面主要由以下4个方法组成,下面分别去介绍

  1. checkState(clientId, origin, sessionState, callback) 检查当前浏览器上,用户在keycloak登录的状态
  2. getCookie() 获取cookie中存储的用户状态
  3. getCookieByName(name) 获取指定key的cookie值
  4. receiveMessage(event) 接收从父页面通过postMessage传过来的消息

getCookieByName方法

按着指定向名称,从浏览器的cookie中获取,这是所有可见cookie的字符串,每对使用分号分开,咱们这个方法是返回了某个key对应的具体value.

getCookie方法

获取KEYCLOAK_SESSION的值,如果它不存在,就获取KEYCLOAK_SESSION_LEGACY的值,之所以有KEYCLOAK_SESSION_LEGACY,主要是考虑到了浏览器的兼容性问题。

receiveMessage方法

这个方法主要是用来接收主页面发过来的数据,然后进行状态检查的,子页面通过window.addEventListener("message", receiveMessage, false);来进行事件监听,主页面会提供client_id和sesssion_state,并使用空格将两个参数分开,然后在回调方法里,会向主页面进行通知,通过event.source.postMessage(result, origin);实现,result表示通知的内容,origin表示主页面的域名,其实这是为了安全考虑的,在主页面收到消息后,也会判断这个origin,会判断是否从子页面的域名;所以这个origin其实是事件的发起者的域名。

checkState方法

这是整个login-status-iframe.html页面的核心方法,主要用来判断登录状态,下面分步骤说一下:

  1. 它首先会从浏览器cookie中拿出KEYCLOAK_SESSION的值,它和主页面传过来的值做对比,如果相同状态就没改变(可能已登录或者未登录),如果不相同,如果说明状态改变了;
  2. 判断init是否初始化,如果没有,就从login-status-iframe.html/init?client_id=…这个keycloak的接口中,异步获取登录状态写入浏览器cookie,然后再用步骤1做状态判断;
  3. 如果init已经完成初始化,就直接检查cookie中的用户状态

主页面对接login-status-iframe.html页面

 function getQueryVariable(variable) {      var query = window.location.search.substring(1);      var vars = query.split("&");      for (var i = 0; i < vars.length; i++) {          var pair = vars[i].split("=");          if (pair[0] == variable) {              return pair[1];          }      }      return (false);  }  var iframe = document.getElementById('keycloak-status-iframe');  iframe.onload = function () {      var val = "democlient ";      if (getQueryVariable("code")!="" && getQueryVariable("code").split(".").length == 3) {          val = "democlient " + getQueryVariable("code").split(".")[1];//这里向iframe传的参数是"client_id session_state"      }      iframe.contentWindow.postMessage(val, 'https://kc.com');      window.addEventListener('message', function (event) {          if (event.origin !== 'https://kc.com') {              return;          }          if (event.data === 'unchanged') {              alert('用户会话未发生变化');          } else if (event.data === 'changed') {              alert('用户会话状态发生变化,可能已经注销');          }      }, false);  }

作者:仓储大叔,张占岭,
荣誉:微软MVP
QQ:853066980

支付宝扫一扫,为大叔打赏!