在集成了sso之后，cas的登录界面一般都不满足上线要求，所以必须来一套自定义登录界面
当然了我们还有以下的使用场景：
- 不同接入端登录页不一
- 默认主题
本章目标
- 图标改变
- 背景颜色改变
- 字体改变
疑问与介绍
官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html
主题？
先介绍下什么叫主题，主题就意味着风格不一，目的就是为了在不同的接入端（service）展示不同的页面，就例如淘宝登录、天猫登录，其中登录点还是一个sso，但淘宝登录卖的广告是淘宝的，而天猫登录卖的广告是天猫的
简略看完后，会有以下的规范：
- 静态资源(js,css)存放目录为
src/main/resources/static - html资源存(thymeleaf)放目录为
src/main/resources/templates - 主题配置文件存放在src/main/resources并且命名为
[theme_name].properties - 主题页面html存放目录为
src/main/resources/templates/<theme-id>
可能看完上面的规范会有一些疑问
主题渲染是怎么样的？
官方文档明确说明，登录页渲染文件为casLoginView.html,那意味我们在主题具体目录下新增改文件并且按照cas要求写那就可以了，最终目的还是获取到对应的配置文件，渲染对应主题的登录页。
具体执行流程如图所示：
接入服务如何指定默认主题？
{
"@class": "org.apereo.cas.services.RegexRegisteredService",
"serviceId": "^(http)://localhost.*",
"name": "本地服务",
"id": 100001,
"theme" : "[theme_name]",
"description": "这是一个本地允许的服务，通过localhost访问都允许通过",
"evaluationOrder": 1
}
注意：theme为key指定配置文件id
根据官网文档,需要在src/main/resources文件夹的根目录下创建 与 json文件中theme属性值 对应的properties ,所以要在src/main/resources新建[theme_name].properties
同时根据约定在 src/main/resources/static下创建themes文件存放对应主题文件，具体目录结构如下：
login.properties:
# 系统默认主题样式
cas.standard.css.file=/css/cas.css
cas.javascript.file=/js/cas.js
cas.admin.css.file=/css/admin.css
# 自定义JS
login.js.elementui=/themes/login/js/elementui.min.js
login.js.vue=/themes/login/js/vue.js
login.js.jquery=/themes/login/js/jquery.min.js
# 自定义CSS
login.css.elementui=/themes/login/css/element-ui.css
index.css.style=/themes/login/css/style.css
login.css.iconfont=/themes/login/iconfont/iconfont.css
# 其它
login.img.path=/themes/login/img
server.url=http://localhost:9001
1. 通过配置文件接入服务指定主题
{
"@class": "org.apereo.cas.services.RegexRegisteredService",
"serviceId": "^(http)://localhost.*",
"name": "本地服务",
"id": 100001,
"description": "这是一个本地允许的服务，通过localhost访问都允许通过",
"evaluationOrder": 1,
"theme": "login"
}
2. 动态添加service时设置theme字段值
3. 配置默认主题
如果接入服务是没有指定主题，还可以通过修改cas-server的application.properties来为在接入服务是没有指定主题的服务设置默认主题：
# 默认主题
cas.theme.defaultThemeName=[默认主题名称]
我们这里就采用第三种方式，在配置文件中添加默认主题配置：
# 默认主题
cas.theme.defaultThemeName=login
新建登录文件
明码规定文件名为casLoginView.html，路径根据约定在src/main/resources/templates/[theme_id]/casLoginView.html文件
最终工程目录结果
这里涉及到的样式文件就不提供了，可以根据具体项目自行跳转，贴出登陆页面源码供参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{${#themes.code('index.css.style')}}"/>
<link rel="stylesheet" th:href="@{${#themes.code('login.css.elementui')}}"/>
<link rel="stylesheet" th:href="@{${#themes.code('login.css.iconfont')}}"/>
<link rel="shortcut icon" href="@{${#themes.code('login.img.path')} + '/favicon.ico'}" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="app">
<div class="login-box">
<div ref="scaleBox" style="width: 60%;">
<div class="logo">
<div class="title">
CAS单点登录后台系统
</div>
</div>
<div class="linear"></div>
<div class="bg1">
<div class="bg2">
<div class="bg3">
<form id="postForm" autocomplete="off" method="post" th:object="${credential}">
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
<input type="hidden" name="_eventId" value="submit"/>
<input type="hidden" name="geolocation"/>
<div class="customInput">
<i class="iconfont icon-man"></i>
<input class="username"
id="username"
size="25"
v-model.trim="username"
tabindex="1"
placeholder="请输入用户名"
type="text"
th:disabled="${guaEnabled}"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"/>
</div>
<div class="customInput">
<i class="iconfont icon-suo"></i>
<!-- <input type="password" name="password" class="password" v-model.trim="password" autocomplete="off"
placeholder="请输入密码"> -->
<input class="password"
type="password"
id="password"
size="25"
tabindex="2"
placeholder="请输入密码"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"/>
</div>
<div th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</div>
<button class="login-btn" name="submit" accesskey="l"
th:value="#{screen.welcome.button.login}" type="submit">登录
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script th:src="@{${#themes.code('login.js.vue')}}"></script>
<script th:src="@{${#themes.code('login.js.elementui')}}"></script>
<script th:src="@{${#themes.code('login.js.jquery')}}"></script>
</html>
启动项目
浏览器输入：http://localhost:8443/cas/login，系统默认的登陆页面就改成我们自定义主题样式的登陆页面了。
