一、cas自定义主题界面使用场景
项目在集成了单点登录CAS后，往往CAS的登录界面是不满足项目需求的，并且不同系统接入CAS后，登录界面也是不同的。因此，我们需要对CAS登录界面进行自定义。
二、相关规范
官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html， 通过阅读官方文档，大致包含以下规范：
- 主题命名规范
在src/main/resources/services目录下存放主题的json配置文件，配置文件的命名必须是{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单点退出服务端向客户端的这个地址发送退出通知 |
- 其他配置文件
| 目录 | 说明 | 规范 |
|---|---|---|
| src/main/resources/static | 静态资源存放目录（js,css） |
|
| src/main/resources/templates | html资源存放目录，默认使用thymeleaf | ${name}/casLoginView.html |
| src/main/resources | 主题配置文件存放目录 | ${name}.properties |
三、CAS主题界面加载流程
主题加载流程
四、项目实战
-
完整项目截图
项目截图
- services目录配置
我的services目录中一共配置了三个主题，这里拿demo-10000002.json做讲解，这里{id}=10000002
{
"@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/"
}
- 样式文件
在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文件
- 覆盖webflow文件夹，指定登录页的名称
（1）复制overlays下的webflow文件到resource目录下
webflow目录
（2）修改login-webflow.xml文件，修改view的名称（登录页名）
修改默认登录页
（3）在src/main/resources/templates下新增myLoginView.html登录页
网友评论