Cas 服務器爲Service定義UI

時間 2019-12-06

標籤 cas 服務器 service 定義简体版

原文原文鏈接

Cas服務器容許用戶爲每一個Service自定義登錄等UI外觀，但須要尊着Cas定於的規則：css

1、爲Service配置theme（主題）html

在《Cas 服務器 Service（Cas客戶端）註冊信息維護》中的 TEST-10000003.json 配置中增長 "theme": "test"web

以上配置爲該Service指定了要應用的主題爲test，因此當以http://localhost:8081爲域名的Cas客戶端來請求登錄時，將展現test主題登錄UI。

2、創建theme（主題）資源json

如今已經假定test主題，下面就要把該主題實現出來。要實現cas theme先要了解cas對theme實現的基本規則：瀏覽器

一、css、js等theme用到的靜態資源，應放置在：src\main\resources\static\themes\主題名稱目錄下服務器

二、theme用到的web視圖資源，應放置在：src\main\resources\templates\主題名稱目錄下less

三、theme配置文件，應放置在：src\main\resources\下，並命名爲：主題名稱.properties（或主題名稱.yml）post

注：只要用戶按照上述規則完成資源文件的實現後，cas服務器將自動加載對應theme資源應用到Service。測試

3、編寫theme資源文件內容ui

一、theme配置文件（test.properties）內容

css.file=/themes/test/css/test.css
pageTitle=Test主題演示

二、css樣式表（test.css）內容

h3 {
    color: red; 
}

三、Web視圖（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('pageTitle')}"></title>
    <link rel="stylesheet" th:href="@{${#themes.code('css.file')}}" />
</head>

<body>
<h3 th:text="${#themes.code('pageTitle')}"></h3>
<div>
    <form method="post" th:object="${credential}">
        <div th:if="${#fields.hasErrors('*')}"><span th:each="err : ${#fields.errors('*')}" th:utext="${err}" />
        </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="casuser" />
            </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="Mellon" />
            </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>