Cas 5.3x cas-overlay-template用iframe实现登录跳转
在上一篇Cas 5.3x 简单配置,解决https访问的问题的基础上,我尝试了一下如何用iframe实现登录和跳转,因为对模板不熟练,并且第一次接触thymeleaf,看的一头雾水。
为了帮助同样看到一头雾水的小伙伴们,我在这里进行一下说明和记录。
参考资料:Cas 5.2.x版本使用 —— 客户端使用iframe嵌套方式实现SSO(十三)
一、cas相关配置
1、允许iframe打开登录页面
#取消x-frame-options为deny限制,允许外部项目使用iframe嵌入cas-server登录页面
cas.httpWebRequest.header.xframe=false
2、增加js代码传递参数
这套官方的静态页面,使用了thymeleaf,登录的主要页面位于src/main/resources/templates/casLoginView.html。
<div class="col-md">
<div th:replace="fragments/loginform :: loginform">
<a href="fragments/loginform.html">Login Form goes here</a></div>
</div>
可以看到登录页面的表单提交代码位于
在这里loginform.html,添加iframe传参数给父页面的js代码
var targetUrl = window.location.search.split('=')[1];
window.parent.postMessage(JSON.stringify({target: targetUrl}), '*');
到这一步,cas服务器这边准备好了。
二、 搭建一个测试项目App1
这个项目我用自己熟悉的spring+springmvc搭建。
这里我就不上传项目源码了,搭建一个能够访问页面的https项目即可。注意是https访问的项目!不然cas会不允许访问的。
我这里创建了两个jsp页面。
1、login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/resources/js/common.js"></script>
<script>
$(document).ready(function () {
var cas_loginUrl = "https://cas.server.com:8443/cas";
var service = GetQueryString("service");
if (service == null) {
$('#myIframe').attr('src', cas_loginUrl);
} else {
cas_loginUrl = cas_loginUrl + "?service=" + service;
$('#myIframe').attr('src', cas_loginUrl);
}
});
</script>
<body>
<h2>Iframe方式嵌入Cas Server自定义登录页</h2>
<iframe id="myIframe" src="" width="1000px" style="height: 800px;">
</iframe>
<script>
//接收子窗口消息
window.addEventListener("message", function (e) {
var targetUrl = e.data;
console.info('来自子窗口:', targetUrl);
setTimeout(function () {
window.location.replace(decodeURIComponent(JSON.parse(e.data).target));// 必须decodeURIComponent页面才刷新,否则有问题
}, 1500)
}, false);
</script>
</body>
</html>
代码说明:
var cas_loginUrl = "https://cas.server.com:8443/cas";
这里要填写你的cas访问路径。
页面底部的js代码是用于接收iframe传递的参数的。
访问APP1的登录页面的请求地址:
https://app1.com:8446/mocha-server/login?service=https%3a%2f%2fapp1.com%3a8446%2fmocha-server%2findex
注意url拼接了参数service,这个解码之后是https://app1.com:8446/mocha-server/index
拼接了回调的地址,才能方便iframe传递参数给父页面。
这里 用了一个setTimeout来实现页面整体刷新,实现效果如下图:
iframe框架没有了,自动打开了新页面。
到这里,练手先告一段落,要开始真正的项目开发了。