1.簡介
主題意味着風格不一樣,目的就是不同的接入端,顯示不同的登錄頁面，一般要求如下：
- 靜態資源(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注冊的時候沒有指明主題,就使用默認的主題。
2.修改Json
添加一個屬性theme對應自己的主題
{ "@class": "org.apereo.cas.services.RegexRegisteredService", "serviceId": "^(https|imaps|http)://.*", "name": "fdzang", "id": 1000, "description": "CAS-SSO 登入", "evaluationOrder": 10, "theme" : "fdzang" }
3.加入主題樣式
我是直接用的bootstrap的一個樣式，把樣式文件放在/resources/static/thems/fdzang下的
其實也可以直接放在static下，我這樣是為了方便區分主題。
4.創建properties
創建fdzang.properties，這個文件中的內容是后續提供給頁面使用的，頁面可以直接取值。
#原cas默認的css樣式,如果更改了,某些頁面樣式將丟失
cas.standard.css.file=/css/cas.css
fdzang.pageTitle=CAS-SSO 登入
fdzang.vendor.jquery=/themes/fdzang/vendor/jquery/jquery.min.js
fdzang.prefix=/themes/fdzang
5.修改application.properties
# 默認主題
cas.theme.defaultThemeName=fdzang
6.添加自定義登錄界面
放在/resources/templates/fdzang下，文件名為casLoginView.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title th:text="${#themes.code('fdzang.pageTitle')}">默認的登錄界面</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="robots" content="all,follow"> <!-- Bootstrap CSS--> <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/bootstrap/css/bootstrap.min.css'}"> <!-- Font Awesome CSS--> <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/vendor/font-awesome/css/font-awesome.min.css'}"> <!-- Fontastic Custom icon font--> <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/fontastic.css'}"> <!-- Google fonts - Poppins --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700"> <!-- theme stylesheet--> <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/style.default.css'}" id="theme-stylesheet"> <!-- Custom stylesheet - for your changes--> <link rel="stylesheet" th:href="@{${#themes.code('fdzang.prefix')}+'/css/custom.css'}"> <!-- Favicon--> <link rel="shortcut icon" href="img/favicon.ico"> <!-- Tweaks for older IEs--><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> </head> <body> <div class="page login-page"> <div class="container d-flex align-items-center"> <div class="form-holder has-shadow"> <div class="row"> <!-- Logo & Information Panel--> <div class="col-lg-6"> <div class="info d-flex align-items-center"> <div class="content"> <div class="logo"> <h1>CAS單點登錄</h1> </div> <p>歡迎使用CAS單點登錄系統.</p> </div> </div> </div> <!-- Form Panel --> <div class="col-lg-6 bg-white"> <div class="form d-flex align-items-center"> <div class="content"> <form method="post" class="form-validate" id="fm1" th:object="${credential}" action="login"> <div class="form-group"> <input id="username" type="text" name="username" required data-msg="Please enter your username" class="input-material" size="25" tabindex="1" th:disabled="${guaEnabled}" th:field="*{username}" th:accesskey="#{screen.welcome.label.netid.accesskey}" autocomplete="off"> <label for="username" th:utext="#{screen.welcome.label.netid}" class="label-material">User Name</label> </div> <div class="form-group"> <input id="password" type="password" name="password" required data-msg="Please enter your password" class="input-material" size="25" tabindex="2" th:accesskey="#{screen.welcome.label.password.accesskey}" th:field="*{password}" autocomplete="off" /> <label for="password" th:utext="#{screen.welcome.label.password}" class="label-material">Password</label> </div> <div class="form-group" th:if="${rememberMeAuthenticationEnabled}"> <input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5"/> <label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Me</label> </div> <input type="hidden" name="execution" th:value="${flowExecutionKey}"/> <input type="hidden" name="_eventId" value="submit"/> <input type="hidden" name="geolocation"/> <input id="login" class="btn btn-primary" name="submit" accesskey="l" th:value="#{screen.welcome.button.login}" tabindex="6" type="submit"/> </form> <a href="#" class="forgot-pass">忘記密碼?</a><br> <small>還沒有賬戶?</small> <a href="register.html" class="signup">注冊</a> </div> </div> </div> </div> </div> </div> <div class="copyrights text-center"> <p>Design by <a href="#" class="external">Bootstrapious</a> </p> </div> </div> <!-- JavaScript files--> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery/jquery.min.js'}"></script> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/popper.js/umd/popper.min.js'}"></script> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/bootstrap/js/bootstrap.min.js'}"></script> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery.cookie/jquery.cookie.js'}"></script> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/chart.js/Chart.min.js'}"></script> <script th:src="@{${#themes.code('fdzang.prefix')}+'/vendor/jquery-validation/jquery.validate.min.js'}"></script> <!-- Main File--> <script th:src="@{${#themes.code('fdzang.prefix')}+'/js/front.js'}"></script> </body> </html>
7.整體文件目錄
運行效果如下：
參考：https://blog.csdn.net/qq_34021712/article/details/82186067