Spring Boot+CAS 單點登錄之自定義登錄頁面
1.實現思路
CAS Server 對于自定義登錄頁面其實提供了很好的支持，可以從多個角度來實現，松哥分別來和大家介紹。
CAS Server 上提供的登錄頁面，早期是用 jsp 寫的，我們用的 5.3.2 版本里是用 Thymeleaf 寫的，所以現在自定義登錄頁面也是用 Thymeleaf 來寫。
想要自定義登錄頁面，我們有兩種不同的方式：
- 直接修改源碼，位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html，直接就在它的源碼基礎上改，這個可以實現需求，但是一般不推薦。
- 把自定義的登錄頁面當成 theme 來開發，然后在配置文件中配置 theme，這種方式就很靈活，而且既可以配置全局主題，也可以配置局部主題。全局主題就是所有的登錄頁面都使用自定義的登錄頁面，局部主題則是可以根據不同的 CAS Client 來配置，不同的 CAS Client 將看到不同的登錄頁面。
松哥在這里主要和大家介紹第二種方式。
2.自定義登錄頁面
首先我們需要提前準備好自己的登錄頁面，松哥這里還是使用我本系列前面用過的登錄頁面：
這個大家可以在文末下載頁面模版，也可以自己找一個喜歡的登錄頁面模版，是在找不到，隨便寫個表單也行，只要實現了自定義的效果即可。
自定義的登錄頁面準備好之后，接下來，我們創建一個新的目錄 src/main/resources/static/themes/mylogin，將自定義頁面涉及到的靜態資源文件拷貝進去，這里的 themes 目錄下專門放置各種自定義登錄頁面的靜態資源，mylogin 相當于是我當前使用的主題名稱：
接下來創建 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 再去定義它自己的登錄頁面。
3.小結
好了，這就是松哥和大家介紹的 CAS 單點登錄自定義登錄頁面的問題，感興趣的小伙伴可以試試～
本文轉載自微信公眾號「江南一點雨」，可以通過以下二維碼關注。轉載本文請聯系江南一點雨公眾號。
