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框架没有了，自动打开了新页面。

到这里，练手先告一段落，要开始真正的项目开发了。