cas5.1.x版本主题界面自定义

一、cas自定义主题界面使用场景项目在集成了单点登录CAS后，往往CAS的登录界面是不满足项目需求的，并且不同系统接入CAS后，登录界面也是不同的。因此，我们需要对CAS登录界面进行自定义。二、相关规范官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html，...

AaronSimon

1713人浏览 · 2018-09-14 10:30:15

AaronSimon · 2018-09-14 10:30:15 发布

一、cas自定义主题界面使用场景

项目在集成了单点登录CAS后，往往CAS的登录界面是不满足项目需求的，并且不同系统接入CAS后，登录界面也是不同的。因此，我们需要对CAS登录界面进行自定义。

二、相关规范

官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html，通过阅读官方文档，大致包含以下规范：
1. 主题命名规范
在src/main/resources/services目录下存放主题的json配置文件，配置文件的命名必须是 ${name}-$ {id}.json,id必须为json文件内容id一致的这种方式，不然找不到配置文件。json文件中相关参数配置说明如下:

参数名称	说明
@class	必须为org.apereo.cas.services.RegisteredService的实现类，对其他属性进行一个json反射对象，常用的有RegexRegisteredService，匹配策略为id的正则表达式
serviceId	表示哪一个网站使用这个模板
name	服务名称，会显示在默认登录页
id	主题id,全局唯一标识，需与文件名中${id}保持一致
description	服务描述，会显示在默认登录页
evaluationOrder	匹配争取时的执行循序（越小越优先）
theme	主题名称，建议与文件名${name}保持一致
attributeReleasePolicy	cas参数返回策略，在多参数返回时需要配置这个属性
proxyPolicy	使用cas代理模式需要配置这个属性
logoutUrl	cas单点退出服务端向客户端的这个地址发送退出通知

2. 其他配置文件

目录	说明	规范
src/main/resources/static	静态资源存放目录（js,css）	${name}/css/$ {name}.css, ${name}/js/$ {name}.js
src/main/resources/templates	html资源存放目录，默认使用thymeleaf	${name}/casLoginView.html
src/main/resources	主题配置文件存放目录	${name}.properties

三、CAS主题界面加载流程

主题加载流程

四、项目实战

完整项目截图
services目录配置

我的services目录中一共配置了三个主题，这里拿demo-10000002.json做讲解，这里 ${name}=demo,$ {id}=10000002

“`json
{
“@class”: “org.apereo.cas.services.RegexRegisteredService”,
“serviceId”: “^(https|imaps|http)://.*”,
“name”: “本地服务”,
“id”: 10000002,
“description”: “这是一个本地允许的服务，通过localhost访问都允许通过”,
“evaluationOrder”: 1,
“theme”:”demo”,
“attributeReleasePolicy”: {
“@class”: “org.apereo.cas.services.ReturnAllAttributeReleasePolicy”
},
“proxyPolicy”: {
“@class”: “org.apereo.cas.services.RegexMatchingRegisteredServiceProxyPolicy”,
“pattern”: “^(https|http)?://.*”
},
“logoutUrl”: “http://localhost:8080/”
}

“`
3. 样式文件

在src\main\resources\static\themes\demo\css下建立demo.css样式文件

h1 {
    color: blue;
}

配置文件

在src\main\resources新建demo.properties文件

demo.css.file=/themes/demo/css/demo.css
demo.pageTitle=demo

standard.custom.css.file=/css/cas.css
admin.custom.css.file=/css/admin.css
cas.javascript.file=/js/cas.js

登录页

在src/main/resources/templates/demo下新建casLoginView.html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title th:text="${#themes.code('demo.pageTitle')}"></title>
    <link rel="stylesheet" th:href="@{${#themes.code('demo.css.file')}}"/>
</head>
<body>
<h1 th:text="${#themes.code('demo.pageTitle')}"></h1>
<div>
    <form method="post" th:object="${credential}">
        <div th:if="${#fields.hasErrors('*')}">
            <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
        </div>
        <h2 th:utext="#{screen.welcome.instructions}"></h2>
        <section class="row">
            <label for="username" th:utext="#{screen.welcome.label.netid}"/>
            <div th:unless="${openIdLocalId}">
                <input class="required"
                       id="username"
                       size="25"
                       tabindex="1"
                       type="text"
                       th:disabled="${guaEnabled}"
                       th:field="*{username}"
                       th:accesskey="#{screen.welcome.label.netid.accesskey}"
                       autocomplete="off"/>
            </div>
        </section>
        <section class="row">
            <label for="password" th:utext="#{screen.welcome.label.password}"/>
            <div>
                <input class="required"
                       type="password"
                       id="password"
                       size="25"
                       tabindex="2"
                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                       th:field="*{password}"
                       autocomplete="off"/>
            </div>
        </section>
        <section class="row">
            <label for="system" >系统</label>
            <div>
                <select class="required"
                        id="system"
                        tabindex="2"
                        th:accesskey="#{screen.welcome.label.password.accesskey}"
                        th:field="*{system}"
                        autocomplete="off">
                    <option value="sso">SSO</option>
                    <option value="oa">OA</option>
                    <option value="crm">CRM</option>
                </select>
            </div>
        </section>
        <section>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <input type="hidden" name="geolocation"/>
            <input class="btn btn-submit btn-block"
                   name="submit"
                   accesskey="l"
                   th:value="#{screen.welcome.button.login}"
                   tabindex="6"
                   type="submit"/>
        </section>
    </form>
</div>
</body>
</html>

登录效果

五、修改默认主题页

经过Google,找到两种修改默认主题页的方法

参数配置

#设置默认主题
cas.theme.defaultThemeName=10000002

10000002对应的是主题的id(全局唯一标识)。但是cas版本5.1.x不支持默认主题目录（application.properties配置了cas.theme.defaultThemeName不会加载主题目录下src/main/resources/templates/[theme_id]/casLoginView.html文件）,解决办法：覆盖src/main/resources/templates下casLoginView.html文件
2. 覆盖webflow文件夹，指定登录页的名称

（1）复制overlays下的webflow文件到resource目录下
webflow目录
（2）修改login-webflow.xml文件，修改view的名称（登录页名）
修改默认登录页