转自：https://blog.csdn.net/zhouzhiwengang/article/details/90053313
项目整体结构
自定义页面涉及资源全部存放再src/main/resources 文件夹目录下：
目录 |
含义 |
services |
配置自定义登入网站模板 |
static |
静态文件目录，用于存放js，css代码的 |
templates |
模板文件目录，用于存放html |
digipower.properties |
存放digipower网站模板的配置信息 |
services 目录配置
service目录，设定每一个子网站对应的请求样式，如果不设定，默认使用指定默认样式。
HTTPSandIMAPS-10000001.json 文件解析
该json配置文件是系统默认的登录模板，自定义模板配置文件规则：文件名称+id.json，如果不是这种格式cas 服务端不然找不到配置文件。
HTTPSandIMAPS-10000001.json 文件内容：
{
"@class":
"org.apereo.cas.services.RegexRegisteredService",
"serviceId":
"^(https|imaps)://.*",
"name":
"HTTPS and IMAPS",
"id":
10000001,
"description":
"This service definition authorizes all application urls that support HTTPS and IMAPS protocols.",
"evaluationOrder":
10000
}
自定义模板配置文件内容（digipower-1000.json）：
{
"@class":
"org.apereo.cas.services.RegexRegisteredService",
"serviceId":
"^(https|imaps|http)://.*",
"name":
"digipower",
"id":
1000,
"description":
"CAS-SSO 登入",
"evaluationOrder":
10,
"theme":
"digipower"
}
注意：设置cas需要从json文件做初始化操作，不然我们配置的json没有生效
# cas 自定义登入界面
# 默认主题
cas.theme.defaultThemeName=digipower
# 开启识别json文件，默认false
cas.serviceRegistry.initFromJson=true
static 文件夹
digipower.css:
h1 {
color: blue;
}
templates 登录模板
目录结构可以看到，每个子站点，都会新建一个文件夹，文件夹的名称需要和 service里面配置站点的theme的名称对应上，casLoginView.html 这个模板的名称，不能瞎改，这个是固定的
<!
DOCTYPE
html
>
<
html
>
<
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('digipower.pageTitle')}"
></
title
>
<
link
rel=
"stylesheet"
th:href=
"@{${#themes.code('digipower.css.file')}}"
/>
</
head
>
<
body
>
<
h1
th:text=
"${#themes.code('digipower.pageTitle')}"
></
h1
>
<
h2
>CAS-SSO 单点登录
</
h2
>
<
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
>
<
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
>
配置模板信息
digipower.properties:
# 自定义登入首页相关参数配置
#定义的字段和信息，可以在页面读取到
digipower.css.file=/themes/digipower/css/digipower.css
digipower.pageTitle=CAS-SSO 登入
启动服务
到项目的根目录，找到build.cmd，然后debug启动服务。
build.cmd debug
访问测试
PNG