CAS 默認的登錄頁面顯然不適合實際的使用,本文主要介紹如何自定義登錄頁面;文中使用到的軟體版本:JDK 1.8.0_191、Tomcat 8.5.76、CAS 5.3.16,
1、服務端準備
這里假設 CAS 服務端已經安裝完畢,地址為:http://127.0.0.1:8080/cas,本文描述的修改都針對 CAS 服務端;服務端的安裝方法可參考:CAS 入門實戰(2)--服務端安裝,
2、自定義主題
這里假設新增的主題名稱為:mytheme
2.1、新增主題組態檔
在 WEB-INF\classes 下新增 mytheme.properties:
cas.standard.css.file=/css/cas.css
其他變數根據自己頁面的需要來定義,如果自定義的頁面用不到,可以不用定義其他的變數,
2.2、新增主題頁面
在 WEB-INF\classes\templates 下新建 mytheme 目錄,并在 mytheme 目錄下創建登錄頁面 casLoginView.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <title>登錄</title> <h1>統一鑒權登錄[mytheme]</h1> <form method="post" id="fm1" th:object="${credential}" action="login"> <div th:if="${#fields.hasErrors('*')}"> <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Example error</span> </div> <section> <label>用戶名</label> <div th:if="${openIdLocalId}"> <strong> <span th:utext="${openIdLocalId}"/> </strong> <input type="hidden" id="username" name="username" th:value="${openIdLocalId}"/> </div> <div th:unless="${openIdLocalId}"> <input 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> <label>密碼</label> <div> <input type="password" id="password" size="25" tabindex="2" th:accesskey="#{screen.welcome.label.password.accesskey}" th:field="*{password}" autocomplete="off"/> </div> </section> <input type="hidden" name="execution" th:value="${flowExecutionKey}"/> <input type="hidden" name="_eventId" value="submit"/> <input type="hidden" name="geolocation"/> <input type="submit" value="提交"> </form> </head>
這里定義了一個簡單的頁面,form 中的元素不要變,其他的可以根據需要修改,自定義登錄頁面使用到的 css 、js 檔案都可以放到 mytheme 目錄下,
3、使用自定義主題
3.1、通過設定默認主題方式使用自定義主題
如果所有的客戶端都使用同一套的自定義主題,則可在 WEB-INF\classes\application.properties 中增加如下配置:
cas.theme.defaultThemeName=mytheme
重啟 CAS 服務端即可,

3.2、通過 Service 方式使用自定義主題
不同的客戶端可以定義相應的 Service,在 Service 中可以設定主題;Service 的定義保護如下的屬性:
| 屬性 | 說明 |
| @class | 服務注冊類名 |
| serviceId | 服務對應的客戶端 |
| name | 服務名稱 |
| id | 服務id |
| description | 描述 |
| evaluationOrder | 匹配的次序 |
| theme | 主題 |
按照上面的步驟再定義一個主題:mytheme2,然后在 WEB-INF\classes\services 目錄下創建 Service 的組態檔,
Mytheme-10000003.json:
{ "@class" : "org.apereo.cas.services.RegexRegisteredService", "serviceId" : "^(https|http|imaps)://127.0.0.1:9090.*", "name" : "127.0.0.1:9090", "id" : 10000003, "description" : "", "evaluationOrder" : 10, "theme" : "mytheme" }
Mytheme2-10000004.json:
{ "@class" : "org.apereo.cas.services.RegexRegisteredService", "serviceId" : "^(https|http|imaps)://127.0.0.1:9091.*", "name" : "127.0.0.1:9091", "id" : 10000004, "description" : "", "evaluationOrder" : 11, "theme" : "mytheme2" }
重啟后訪問不同的客戶端會轉到不同的主題頁面,
訪問客戶端1 http://127.0.0.1:9090/test/getUser:

訪問客戶端2 http://127.0.0.1:9091/test/getUser:

4、涉及關鍵檔案截圖


轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/480170.html
標籤:其他
上一篇:大一上C語言基礎筆記
