Spring Boot+CAS 默認(rèn)登錄頁面太丑了,怎么辦?
最近的又一頭扎進(jìn) spring Security+CAS 上面了,CAS 單點(diǎn)登錄已經(jīng)連續(xù)寫了四篇了,小伙伴們一定按順序閱讀哦,這樣后面的文章才好理解。

上篇文章和大家分享了 CAS Server 接入數(shù)據(jù)庫的問題,今天我們來看下如何在 CAS Server 上自定義登錄頁面,因?yàn)檎碚f,我們是不會直接用官方給出的登錄頁面的。
本文是 spring Security 系列第 26 篇,閱讀前面文章有助于更好的理解本文:
挖一個(gè)大坑,Spring Security 開搞!
松哥手把手帶你入門 Spring Security,別再問密碼怎么解密了
手把手教你定制 Spring Security 中的表單登錄
Spring Security 做前后端分離,咱就別做頁面跳轉(zhuǎn)了!統(tǒng)統(tǒng) JSON 交互
Spring Security 中的授權(quán)操作原來這么簡單
Spring Security 如何將用戶數(shù)據(jù)存入數(shù)據(jù)庫?
Spring Security+Spring Data Jpa 強(qiáng)強(qiáng)聯(lián)手,安全管理只有更簡單!
Spring boot + Spring Security 實(shí)現(xiàn)自動(dòng)登錄功能
Spring boot 自動(dòng)登錄,安全風(fēng)險(xiǎn)要怎么控制?
在微服務(wù)項(xiàng)目中,Spring Security 比 Shiro 強(qiáng)在哪?
SpringSecurity 自定義認(rèn)證邏輯的兩種方式(高級玩法)
Spring Security 中如何快速查看登錄用戶 IP 地址等信息?
Spring Security 自動(dòng)踢掉前一個(gè)登錄用戶,一個(gè)配置搞定!
Spring Boot + Vue 前后端分離項(xiàng)目,如何踢掉已登錄用戶?
Spring Security 自帶防火墻!你都不知道自己的系統(tǒng)有多安全!
什么是會話固定攻擊?Spring Boot 中要如何防御會話固定攻擊?
集群化部署,Spring Security 要如何處理 session 共享?
松哥手把手教你在 SpringBoot 中防御 CSRF 攻擊!so easy!
要學(xué)就學(xué)透徹!Spring Security 中 CSRF 防御源碼解析
Spring Boot 中密碼加密的兩種姿勢!
Spring Security 要怎么學(xué)?為什么一定要成體系的學(xué)習(xí)?
Spring Security 兩種資源放行策略,千萬別用錯(cuò)了!
松哥手把手教你入門 Spring Boot + CAS 單點(diǎn)登錄
Spring Boot 實(shí)現(xiàn)單點(diǎn)登錄的第三種方案!
Spring Boot+CAS 單點(diǎn)登錄,如何對接數(shù)據(jù)庫?
1.實(shí)現(xiàn)思路
CAS Server 對于自定義登錄頁面其實(shí)提供了很好的支持,可以從多個(gè)角度來實(shí)現(xiàn),松哥分別來和大家介紹。
CAS Server 上提供的登錄頁面,早期是用 jsp 寫的,我們用的 5.3.2 版本里是用 Thymeleaf 寫的,所以現(xiàn)在自定義登錄頁面也是用 Thymeleaf 來寫。
想要自定義登錄頁面,我們有兩種不同的方式:
直接修改源碼,位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html,直接就在它的源碼基礎(chǔ)上改,這個(gè)可以實(shí)現(xiàn)需求,但是一般不推薦。
把自定義的登錄頁面當(dāng)成 theme 來開發(fā),然后在配置文件中配置 theme,這種方式就很靈活,而且既可以配置全局主題,也可以配置局部主題。全局主題就是所有的登錄頁面都使用自定義的登錄頁面,局部主題則是可以根據(jù)不同的 CAS Client 來配置,不同的 CAS Client 將看到不同的登錄頁面。
松哥在這里主要和大家介紹第二種方式。
2.自定義登錄頁面
首先我們需要提前準(zhǔn)備好自己的登錄頁面,松哥這里還是使用我本系列前面用過的登錄頁面:
這個(gè)大家可以在文末下載頁面模版,也可以自己找一個(gè)喜歡的登錄頁面模版,是在找不到,隨便寫個(gè)表單也行,只要實(shí)現(xiàn)了自定義的效果即可。
自定義的登錄頁面準(zhǔn)備好之后,接下來,我們創(chuàng)建一個(gè)新的目錄 src/main/resources/static/themes/mylogin,將自定義頁面涉及到的靜態(tài)資源文件拷貝進(jìn)去,這里的 themes 目錄下專門放置各種自定義登錄頁面的靜態(tài)資源,mylogin 相當(dāng)于是我當(dāng)前使用的主題名稱:
接下來創(chuàng)建 src/main/resources/mylogin.properties 文件,將登錄頁面中的一些 js、css 引用配置進(jìn)去,如下:
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
1
2
3
4
我的自定義登錄頁面里邊就這四個(gè)引用,如果你有更多的引用,就在這里多配置即可,這里的 key 可以自定義,value 就是靜態(tài)資源的位置。
接下來,創(chuàng)建 src/main/resources/templates/mylogin/casLoginView.html 文件,casLoginView.html 就是你的登錄頁面,注意文件名不能寫錯(cuò)。Thymeleaf 模版默認(rèn)是在 templates 目錄下,所以我們要在 resources 目錄下新建 templates 目錄,templates 目錄下再新建 mylogin 目錄。
casLoginView.html 頁面內(nèi)容如下: