SpringBoot+CAS單點登錄之自定義登錄頁面

[[411003]]

1.實現(xiàn)思路

CAS Server 對于自定義登錄頁面其實提供了很好的支持，可以從多個角度來實現(xiàn)，松哥分別來和大家介紹。

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、寧晉網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為寧晉等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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ǔ)上改，這個可以實現(xiàn)需求，但是一般不推薦。
把自定義的登錄頁面當(dāng)成 theme 來開發(fā)，然后在配置文件中配置 theme，這種方式就很靈活，而且既可以配置全局主題，也可以配置局部主題。全局主題就是所有的登錄頁面都使用自定義的登錄頁面，局部主題則是可以根據(jù)不同的 CAS Client 來配置，不同的 CAS Client 將看到不同的登錄頁面。

松哥在這里主要和大家介紹第二種方式。

2.自定義登錄頁面

首先我們需要提前準(zhǔn)備好自己的登錄頁面，松哥這里還是使用我本系列前面用過的登錄頁面：

這個大家可以在文末下載頁面模版，也可以自己找一個喜歡的登錄頁面模版，是在找不到，隨便寫個表單也行，只要實現(xiàn)了自定義的效果即可。

自定義的登錄頁面準(zhǔn)備好之后，接下來，我們創(chuàng)建一個新的目錄 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

我的自定義登錄頁面里邊就這四個引用，如果你有更多的引用，就在這里多配置即可，這里的 key 可以自定義，value 就是靜態(tài)資源的位置。

接下來，創(chuàng)建 src/main/resources/templates/mylogin/casLoginView.html 文件，casLoginView.html 就是你的登錄頁面，注意文件名不能寫錯。Thymeleaf 模版默認(rèn)是在 templates 目錄下，所以我們要在 resources 目錄下新建 templates 目錄，templates 目錄下再新建 mylogin 目錄。

casLoginView.html 頁面內(nèi)容如下：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      江南一點雨
  
  
  
      
  
  
  
      
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
          統(tǒng)一認(rèn)證中心

用戶名

密碼

這就是一個普通的登錄頁面，我只是把 js 和 css 的引用修改了下而已，所以這里也就不做過多介紹。

OK，如此之后，我們的登錄頁面就算定義好了，接下來就是登錄頁面的引用了。

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

mylogin 就是我們在前面反復(fù)出現(xiàn)的目錄，相當(dāng)于是我的主題名。這個配置完成后，以后不管是直接在 CAS Server 上登錄，還是從 CAS Client 跳轉(zhuǎn)到 CAS Server 上登錄，看到的都是自定義登錄頁面。

第二種方式則是局部配置，局部配置針對某一個 CAS Client 的配置，所以我們可以在 src/main/resources/services/client1-99.json 文件中(復(fù)習(xí)前面文章就知道該文件怎么來的)添加 theme 配置：

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

這樣，以后如果是通過該 CAS Client 跳轉(zhuǎn)到 CAS Server 上登錄，則會看到自定義登錄頁面，如果通過其他 CAS Client 或者直接就在 CAS Server 上登錄，則看到的還是默認(rèn)登錄頁面，當(dāng)然我們也可以給其他 CAS Client 再去定義它自己的登錄頁面。

3.小結(jié)

好了，這就是松哥和大家介紹的 CAS 單點登錄自定義登錄頁面的問題，感興趣的小伙伴可以試試～

本文轉(zhuǎn)載自微信公眾號「江南一點雨」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系江南一點雨公眾號。

網(wǎng)站建設(shè)知識

SpringBoot+CAS單點登錄之自定義登錄頁面

[[411003]]

1.實現(xiàn)思路

2.自定義登錄頁面

3.小結(jié)

其他資訊