keycloak~对接login-status-iframe页面判断用户状态变更

与欣偕老

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

1. [/code][size=6]具体方法说明[/size]
3. 这个页面主要由以下4个方法组成，下面分别去介绍
4. [list=1]
5. [*]checkState(clientId, origin, sessionState, callback)  检查当前浏览器上，用户在keycloak登录的状态
6. [*]getCookie()  获取cookie中存储的用户状态
7. [*]getCookieByName(name)  获取指定key的cookie值
8. [*]receiveMessage(event)  接收从父页面通过postMessage传过来的消息
9. [/list][size=5]getCookieByName方法[/size]
11. 按着指定向名称，从浏览器的cookie中获取，这是所有可见cookie的字符串，每对使用分号分开，咱们这个方法是返回了某个key对应的具体value.
12. [size=5]getCookie方法[/size]
14. 获取KEYCLOAK_SESSION的值，如果它不存在，就获取KEYCLOAK_SESSION_LEGACY的值，之所以有KEYCLOAK_SESSION_LEGACY，主要是考虑到了浏览器的兼容性问题。
15. [size=5]receiveMessage方法[/size]
17. 这个方法主要是用来接收主页面发过来的数据，然后进行状态检查的，子页面通过window.addEventListener("message", receiveMessage, false);来进行事件监听，主页面会提供client_id和sesssion_state，并使用空格将两个参数分开，然后在回调方法里，会向主页面进行通知，通过event.source.postMessage(result, origin);实现，result表示通知的内容，origin表示主页面的域名，其实这是为了安全考虑的，在主页面收到消息后，也会判断这个origin，会判断是否从子页面的域名；所以这个origin其实是事件的发起者的域名。
18. [size=5]checkState方法[/size]
20. 这是整个login-status-iframe.html页面的核心方法，主要用来判断登录状态，下面分步骤说一下：
21. [list=1]
22. [*]它首先会从浏览器cookie中拿出KEYCLOAK_SESSION的值，它和主页面传过来的值做对比，如果相同状态就没改变（可能已登录或者未登录），如果不相同，如果说明状态改变了；
23. [*]判断init是否初始化，如果没有，就从login-status-iframe.html/init?client_id=...这个keycloak的接口中，异步获取登录状态写入浏览器cookie，然后再用步骤1做状态判断；
24. [*]如果init已经完成初始化，就直接检查cookie中的用户状态
25. [/list][size=6]主页面对接login-status-iframe.html页面[/size]
27. [code]

复制代码

来源:https://www.cnblogs.com/lori/p/17925956.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！