cas也搞得差不多了,一直使用的是默認登錄頁面，這樣是肯定不行的,企業級登錄頁面,一般都是自定義的,頁面上有廣告或者公司的logo等,
下面開始進行自定義登錄頁面,查看官方文檔,發現有動態主題和靜態主題,下面只介紹靜態主題模式。
主題
主題意味着風格不一樣,目的就是不同的接入端,顯示不同的登錄頁面，就像阿里旗下的各種登錄,支付寶登錄,淘寶，天貓,用的可能就是同一個sso，但是各自的登錄主題不一樣。
簡略看完后，會有以下的規范：
● 靜態資源(js,css)存放目錄為src/main/resources/static
● html資源存(thymeleaf)放目錄為src/main/resources/templates
● 主題配置文件存放在src/main/resources並且命名為[theme_name].properties
● 主題頁面html存放目錄為src/main/resources/templates/
主題的配置
登錄頁渲染文件為casLoginView.html，還記得我們之前配置客戶端注冊的時候的json文件,這個文件中還可以添加一個屬性theme對應自己的主題,具體看下面的例子,cas也可以設置一個默認主題,如果service注冊的時候沒有指明主題,就使用默認的主題。
具體操作實戰
第一步：在客戶端注冊的json文件中添加theme屬性
客戶端app1
{
"@class" : "org.apereo.cas.services.RegexRegisteredService",
"serviceId" : "^(https|imaps|http)://app1.cas.com.*",
"name" : "測試客戶端app1",
"id" : 1000,
"description" : "這是app1的客戶端",
"evaluationOrder" : 10,
"theme" : "app1"
}
客戶端app2
{
"@class" : "org.apereo.cas.services.RegexRegisteredService",
"serviceId" : "^(https|imaps|http)://app2.cas.com.*",
"name" : "測試客戶端app2",
"id" : 1001,
"description" : "這是app2的客戶端",
"evaluationOrder" : 11,
"theme" : "app2"
}
第二步：在src/main/resources下創建app1.properties 和 app2.properties
根據官網文檔,需要在src/main/resources文件夾的根目錄下創建 與 json文件中theme屬性值 對應的properties
所以要在src/main/resources新建app1.properties 和 app2.properties 這只是demo,所以以下內容相似。
#原cas默認的css樣式,如果更改了,某些頁面樣式將丟失。
cas.standard.css.file=/css/cas.css #自己的樣式 cas.myself.css=/themes/app1/css/cas.css cas.javascript.file=/themes/app1/js/jquery-1.4.2.min.js cas.page.title=app1的主題
在app1.properties 和 app2.properties 中的屬性值都是隨便起,只要在html中指明引用的key就可以了,例如：properties中指明css和js文件地址,然后在html中用下面的方式使用。
<link rel="stylesheet" th:href="@{${#themes.code('cas.myself.css')}}"/>
<script th:src="@{${#themes.code('cas.javascript.file')}}"></script>
注意：上面配置文件中有cas.standard.css.file屬性,這個屬性默認就是指向/css/cas.css也就是cas默認的css文件,這個我們要指明,否則你只是自定義了登錄頁面,其他頁面的樣式將丟失。我們在自定義的登錄頁面使用自己的css文件,不跟cas的默認css混淆。
第三步：根據第二步創建cas.css文件
客戶端1
h2 {
color: red;
}
客戶端2
h2 {
color: pink;
}
第四步：在application.properties中添加以下屬性，配置默認主題
# 默認主題 cas.theme.defaultThemeName=app2
第五步：配置不同客戶端的登錄頁面
這是只給出app1的頁面,頁面都是一樣的,只是根據在properties中的title屬性來區分不同的客戶端,app2粘貼就行了。
注意要點：from表單的內容需要遵循一定的標准th:object等.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title th:text="${#themes.code('cas.page.title')}"></title>
<link rel="stylesheet" th:href="@{${#themes.code('cas.myself.css')}}"/>
<script th:src="@{${#themes.code('cas.javascript.file')}}"></script>
</head>
<body>
<h2 th:text="${#themes.code('cas.page.title')}"></h2>
<div>
<form method="post" th:object="${credential}">
<div th:if="${#fields.hasErrors('*')}">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}" style="color: red" />
</div>
<h4 th:utext="#{screen.welcome.instructions}"></h4>
<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"
th:value="admin" />
</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"
th:value="123456" />
</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>
搭建完成之后的目錄圖如下：
測試
第一步：先直接登錄cas服務,默認使用的是app2的主題
第二步：訪問app1.cas.com客戶端1 顯示客戶端1的主題。
第三步：訪問app2.cas.com客戶端2 顯示客戶端2的主題。
第四步：登錄 登出測試 沒有問題。效果如下圖：
————————————————
版權聲明：本文為CSDN博主「這個名字想了很久」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_34021712/article/details/82186067