一、cas自定義主題界面使用場景
??項(xiàng)目在集成了單點(diǎn)登錄CAS后，往往CAS的登錄界面是不滿足項(xiàng)目需求的，并且不同系統(tǒng)接入CAS后，登錄界面也是不同的。因此，我們需要對CAS登錄界面進(jìn)行自定義。
二、相關(guān)規(guī)范
??官方文檔：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html， 通過閱讀官方文檔，大致包含以下規(guī)范：
- 主題命名規(guī)范
??在src/main/resources/services目錄下存放主題的json配置文件，配置文件的命名必須是{id}.json,id必須為json文件內(nèi)容id一致的這種方式，不然找不到配置文件。json文件中相關(guān)參數(shù)配置說明如下:
| 參數(shù)名稱 | 說明 |
|---|---|
| @class | 必須為org.apereo.cas.services.RegisteredService的實(shí)現(xiàn)類，對其他屬性進(jìn)行一個(gè)json反射對象，常用的有RegexRegisteredService，匹配策略為id的正則表達(dá)式 |
| serviceId | 表示哪一個(gè)網(wǎng)站使用這個(gè)模板 |
| name | 服務(wù)名稱，會(huì)顯示在默認(rèn)登錄頁 |
| id | 主題id,全局唯一標(biāo)識(shí)，需與文件名中${id}保持一致 |
| description | 服務(wù)描述，會(huì)顯示在默認(rèn)登錄頁 |
| evaluationOrder | 匹配爭取時(shí)的執(zhí)行循序（越小越優(yōu)先） |
| theme | 主題名稱，建議與文件名${name}保持一致 |
| attributeReleasePolicy | cas參數(shù)返回策略，在多參數(shù)返回時(shí)需要配置這個(gè)屬性 |
| proxyPolicy | 使用cas代理模式需要配置這個(gè)屬性 |
| logoutUrl | cas單點(diǎn)退出服務(wù)端向客戶端的這個(gè)地址發(fā)送退出通知 |
- 其他配置文件
| 目錄 | 說明 | 規(guī)范 |
|---|---|---|
| src/main/resources/static | 靜態(tài)資源存放目錄（js,css） |
|
| src/main/resources/templates | html資源存放目錄，默認(rèn)使用thymeleaf | ${name}/casLoginView.html |
| src/main/resources | 主題配置文件存放目錄 | ${name}.properties |
三、CAS主題界面加載流程
主題加載流程
四、項(xiàng)目實(shí)戰(zhàn)
-
完整項(xiàng)目截圖
項(xiàng)目截圖 - services目錄配置
??我的services目錄中一共配置了三個(gè)主題，這里拿demo-10000002.json做講解，這里{id}=10000002
{
"@class": "org.apereo.cas.services.RegexRegisteredService",
"serviceId": "^(https|imaps|http)://.*",
"name": "本地服務(wù)",
"id": 10000002,
"description": "這是一個(gè)本地允許的服務(wù)，通過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" >系統(tǒng)</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>
-
登錄效果
登錄效果
五、修改默認(rèn)主題頁
??經(jīng)過Google,找到兩種修改默認(rèn)主題頁的方法
- 參數(shù)配置
#設(shè)置默認(rèn)主題
cas.theme.defaultThemeName=10000002
10000002對應(yīng)的是主題的id(全局唯一標(biāo)識(shí))。但是cas版本5.1.x不支持默認(rèn)主題目錄（application.properties配置了cas.theme.defaultThemeName不會(huì)加載主題目錄下src/main/resources/templates/[theme_id]/casLoginView.html文件）,解決辦法：覆蓋src/main/resources/templates下casLoginView.html文件
- 覆蓋webflow文件夾，指定登錄頁的名稱
（1）復(fù)制overlays下的webflow文件到resource目錄下
webflow目錄
（2）修改login-webflow.xml文件，修改view的名稱（登錄頁名）
修改默認(rèn)登錄頁
（3）在src/main/resources/templates下新增myLoginView.html登錄頁
