Spring Boot+CAS 默認登陸頁面太醜了，怎麼辦？

時間 2020-07-09

標籤 spring boot+cas boot cas 默認登陸頁面怎麼辦欄目 Spring 简体版

原文原文鏈接

最近的又一頭扎進 Spring Security+CAS 上面了，CAS 單點登陸已經連續寫了四篇了，小夥伴們必定按順序閱讀哦，這樣後面的文章纔好理解。javascript

上篇文章和你們分享了 CAS Server 接入數據庫的問題，今天咱們來看下如何在 CAS Server 上自定義登陸頁面，由於正常來講，咱們是不會直接用官方給出的登陸頁面的。css

本文是 Spring Security 系列第 26 篇，閱讀前面文章有助於更好的理解本文：html

1.實現思路

CAS Server 對於自定義登陸頁面其實提供了很好的支持，能夠從多個角度來實現，鬆哥分別來和你們介紹。java

CAS Server 上提供的登陸頁面，早期是用 jsp 寫的，咱們用的 5.3.2 版本里是用 Thymeleaf 寫的，因此如今自定義登陸頁面也是用 Thymeleaf 來寫。jquery

想要自定義登陸頁面，咱們有兩種不一樣的方式：web

直接修改源碼，位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html，直接就在它的源碼基礎上改，這個能夠實現需求，可是通常不推薦。
把自定義的登陸頁面當成 theme 來開發，而後在配置文件中配置 theme，這種方式就很靈活，並且既能夠配置全局主題，也能夠配置局部主題。全局主題就是全部的登陸頁面都使用自定義的登陸頁面，局部主題則是能夠根據不一樣的 CAS Client 來配置，不一樣的 CAS Client 將看到不一樣的登陸頁面。

鬆哥在這裏主要和你們介紹第二種方式。數據庫

2.自定義登陸頁面

首先咱們須要提早準備好本身的登陸頁面，鬆哥這裏仍是使用我本系列前面用過的登陸頁面：json

這個你們能夠在文末下載頁面模版，也能夠本身找一個喜歡的登陸頁面模版，是在找不到，隨便寫個表單也行，只要實現了自定義的效果便可。後端

自定義的登陸頁面準備好以後，接下來，咱們建立一個新的目錄 src/main/resources/static/themes/mylogin，將自定義頁面涉及到的靜態資源文件拷貝進去，這裏的 themes 目錄下專門放置各類自定義登陸頁面的靜態資源，mylogin 至關因而我當前使用的主題名稱：tomcat

接下來建立 src/main/resources/mylogin.properties 文件，將登陸頁面中的一些 js、css 引用配置進去，以下：

mylogin.css.style=/themes/mylogin/css/style.css
mylogin.css.fa=/themes/mylogin/css/font-awesome-4.7.0/css/font-awesome.min.css
mylogin.js.jq=/themes/mylogin/js/jquery.min.js
mylogin.js.index=/themes/mylogin/js/index.js

個人自定義登陸頁面裏邊就這四個引用，若是你有更多的引用，就在這裏多配置便可，這裏的 key 能夠自定義，value 就是靜態資源的位置。

接下來，建立 src/main/resources/templates/mylogin/casLoginView.html 文件，casLoginView.html 就是你的登陸頁面，注意文件名不能寫錯。Thymeleaf 模版默認是在 templates 目錄下，因此咱們要在 resources 目錄下新建 templates 目錄，templates 目錄下再新建 mylogin 目錄。

casLoginView.html 頁面內容以下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>江南一點雨</title>
    <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.fa')}}">
    <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.style')}}">

</head>
<body>


<div class="materialContainer">
    <div class="box">
        <div class="title">統一認證中心</div>
        <form method="post" th:object="${credential}" action="login">
            <div class="input">
                <label for="username">用戶名</label>
                <input type="text" name="username" id="username">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="password">密碼</label>
                <input type="password" name="password" id="password">
                <span class="spin"></span>
            </div>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                        <input type="hidden" name="_eventId" value="submit"/>
                        <input type="hidden" name="geolocation"/>
            <div class="button login">
                <button type="submit">
                    <span>登陸</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
        </form>
        <a href="javascript:" class="pass-forgot">忘記密碼？</a>
    </div>

    <div class="overbox">
        <div class="material-button alt-2">
            <span class="shape"></span>
        </div>
        <div class="title">江南一點雨-註冊</div>
        <div class="input">
            <label for="regname">用戶名</label>
            <input type="text" name="regname" id="regname">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpass">密碼</label>
            <input type="password" name="regpass" id="regpass">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">確認密碼</label>
            <input type="password" name="reregpass" id="reregpass">
            <span class="spin"></span>
        </div>
        <div class="button">
            <button>
                <span>註冊</span>
            </button>
        </div>
    </div>

</div>

<script th:src="@{${#themes.code('mylogin.js.jq')}}"></script>
<script th:src="@{${#themes.code('mylogin.js.index')}}"></script>

</body>
</html>

這就是一個普通的登陸頁面，我只是把 js 和 css 的引用修改了下而已，因此這裏也就不作過多介紹。

OK，如此以後，咱們的登陸頁面就算定義好了，接下來就是登陸頁面的引用了。

登陸頁面引用，咱們有兩種方式：

第一種是全劇配置，直接在 application.properties 中添加以下配置：

cas.theme.defaultThemeName=mylogin

mylogin 就是咱們在前面反覆出現的目錄，至關因而個人主題名。這個配置完成後，之後不論是直接在 CAS Server 上登陸，仍是從 CAS Client 跳轉到 CAS Server 上登陸，看到的都是自定義登陸頁面。

第二種方式則是局部配置，局部配置針對某一個 CAS Client 的配置，因此咱們能夠在 src/main/resources/services/client1-99.json 文件中（複習前面文章就知道該文件怎麼來的）添加 theme 配置：

{
  "@class": "org.apereo.cas.services.RegexRegisteredService",
  "serviceId": "^(https|http)://.*",
  "name": "client1",
  "id": 99,
  "description": "應用1 的定義信息",
  "evaluationOrder": 1,
  "theme": "mylogin"
}

這樣，之後若是是經過該 CAS Client 跳轉到 CAS Server 上登陸，則會看到自定義登陸頁面，若是經過其餘 CAS Client 或者直接就在 CAS Server 上登陸，則看到的仍是默認登陸頁面，固然咱們也能夠給其餘 CAS Client 再去定義它本身的登陸頁面。