自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：江南一點雨
開發(fā) 架構
CAS Server 對于自定義登錄頁面其實提供了很好的支持，可以從多個角度來實現(xiàn)，松哥分別來和大家介紹。

 [[411003]]

1.實現(xiàn)思路

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

CAS Server 上提供的登錄頁面，早期是用 jsp 寫的，我們用的 5.3.2 版本里是用 Thymeleaf 寫的，所以現(xiàn)在自定義登錄頁面也是用 Thymeleaf 來寫。

想要自定義登錄頁面，我們有兩種不同的方式：

  1. 直接修改源碼，位置在 overlays/org.apereo.cas.cas-server-webapp-tomcat-5.3.14/WEB-INF/classes/templates/casLoginView.html，直接就在它的源碼基礎上改，這個可以實現(xiàn)需求，但是一般不推薦。
  2. 把自定義的登錄頁面當成 theme 來開發(fā)，然后在配置文件中配置 theme，這種方式就很靈活，而且既可以配置全局主題，也可以配置局部主題。全局主題就是所有的登錄頁面都使用自定義的登錄頁面，局部主題則是可以根據不同的 CAS Client 來配置，不同的 CAS Client 將看到不同的登錄頁面。

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

2.自定義登錄頁面

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

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

自定義的登錄頁面準備好之后，接下來，我們創(chuàng)建一個新的目錄 src/main/resources/static/themes/mylogin，將自定義頁面涉及到的靜態(tài)資源文件拷貝進去，這里的 themes 目錄下專門放置各種自定義登錄頁面的靜態(tài)資源，mylogin 相當于是我當前使用的主題名稱：

接下來創(chuàng)建 src/main/resources/mylogin.properties 文件，將登錄頁面中的一些 js、css 引用配置進去，如下：

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

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

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

casLoginView.html 頁面內容如下：

  1. <!DOCTYPE html> 
  2. <html lang="zh-CN"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>江南一點雨</title> 
  6.     <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.fa')}}"> 
  7.     <link rel="stylesheet" th:href="@{${#themes.code('mylogin.css.style')}}"> 
  8.  
  9. </head> 
  10. <body> 
  11.  
  12.  
  13. <div class="materialContainer"> 
  14.     <div class="box"> 
  15.         <div class="title">統(tǒng)一認證中心</div> 
  16.         <form method="post" th:object="${credential}" action="login"> 
  17.             <div class="input"> 
  18.                 <label for="username">用戶名</label> 
  19.                 <input type="text" name="username" id="username"> 
  20.                 <span class="spin"></span> 
  21.             </div> 
  22.             <div class="input"> 
  23.                 <label for="password">密碼</label> 
  24.                 <input type="password" name="password" id="password"> 
  25.                 <span class="spin"></span> 
  26.             </div> 
  27.             <input type="hidden" name="execution" th:value="${flowExecutionKey}"/> 
  28.                         <input type="hidden" name="_eventId" value="submit"/> 
  29.                         <input type="hidden" name="geolocation"/> 
  30.             <div class="button login"> 
  31.                 <button type="submit"> 
  32.                     <span>登錄</span> 
  33.                     <i class="fa fa-check"></i> 
  34.                 </button> 
  35.             </div> 
  36.         </form> 
  37.         <a href="javascript:" class="pass-forgot">忘記密碼？</a> 
  38.     </div> 
  39.  
  40.     <div class="overbox"> 
  41.         <div class="material-button alt-2"> 
  42.             <span class="shape"></span> 
  43.         </div> 
  44.         <div class="title">江南一點雨-注冊</div> 
  45.         <div class="input"> 
  46.             <label for="regname">用戶名</label> 
  47.             <input type="text" name="regname" id="regname"> 
  48.             <span class="spin"></span> 
  49.         </div> 
  50.         <div class="input"> 
  51.             <label for="regpass">密碼</label> 
  52.             <input type="password" name="regpass" id="regpass"> 
  53.             <span class="spin"></span> 
  54.         </div> 
  55.         <div class="input"> 
  56.             <label for="reregpass">確認密碼</label> 
  57.             <input type="password" name="reregpass" id="reregpass"> 
  58.             <span class="spin"></span> 
  59.         </div> 
  60.         <div class="button"> 
  61.             <button> 
  62.                 <span>注冊</span> 
  63.             </button> 
  64.         </div> 
  65.     </div> 
  66.  
  67. </div> 
  68.  
  69. <script th:src="@{${#themes.code('mylogin.js.jq')}}"></script> 
  70. <script th:src="@{${#themes.code('mylogin.js.index')}}"></script> 
  71.  
  72. </body> 
  73. </html> 

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

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

登錄頁面引用，我們有兩種方式：

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

  1. cas.theme.defaultThemeName=mylogin 

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

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

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

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

3.小結

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

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

 

責任編輯：武曉燕 來源： 江南一點雨
單點登錄頁面
相關推薦

2021-06-29 12:27:19

Spring BootCAS 登錄

2021-07-02 10:45:53

SpringBootCAS登錄

2021-07-06 11:42:05

數(shù)據庫SpringSecurCAS

2021-05-12 08:32:53

Spring Secu 自定義session

2024-10-14 17:18:27

2010-02-12 09:32:51

Windows 7修改登錄畫面

2012-12-03 13:54:15

IBMdW

2024-01-23 13:13:09

2022-06-27 08:16:34

JSON格式序列化

2020-10-18 07:33:58

單點登錄cas-serverkeycloak

2025-02-12 08:57:43

Spring動態(tài)注冊組件

2024-03-07 09:20:16

2013-10-16 15:17:30

vCenter單點登錄

2020-12-28 05:52:27

SSO登錄單點

2016-12-26 18:05:00

單點登錄原理簡單實現(xiàn)

2018-06-21 14:46:03

Spring Boot異步調用

2021-04-26 08:54:17

Spring BootSecurity防重登錄

2021-01-06 10:09:05

Spring Boothttps sslhttps

2024-06-21 09:28:43

2012-08-07 09:04:46

單點登錄云安全云計算
點贊
收藏

51CTO技術棧公眾號