Cas5.3.2 服务端自定义登入界面

谁践踏了优雅 2023-10-18 18:24 92阅读 0赞

第一：项目整体结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

自定义页面涉及资源全部存放再src/main/resources 文件夹目录下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>目录</td> 
   <td>含义</td> 
  </tr> 
  <tr> 
   <td>services</td> 
   <td>配置自定义登入网站模板</td> 
  </tr> 
  <tr> 
   <td>static</td> 
   <td>静态文件目录，用于存放js，css代码的</td> 
  </tr> 
  <tr> 
   <td>templates</td> 
   <td>模板文件目录，用于存放html</td> 
  </tr> 
  <tr> 
   <td>digipower.properties</td> 
   <td>存放digipower网站模板的配置信息</td> 
  </tr> 
 </tbody> 
</table>

**services 目录配置**

service目录，设定每一个子网站对应的请求样式，如果不设定，默认使用指定默认样式。

#### HTTPSandIMAPS-10000001.json 文件解析 ####

该json配置文件是系统默认的登录模板，自定义模板配置文件规则：文件名称+id.json，如果不是这种格式cas 服务端不然找不到配置文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

HTTPSandIMAPS-10000001.json 文件内容：

{
      "@class" : "org.apereo.cas.services.RegexRegisteredService",
      "serviceId" : "^(https|imaps)://.*",
      "name" : "HTTPS and IMAPS",
      "id" : 10000001,
      "description" : "This service definition authorizes all application urls that support HTTPS and IMAPS protocols.",
      "evaluationOrder" : 10000
    }

自定义模板配置文件内容（digipower-1000.json）：

{
      "@class" : "org.apereo.cas.services.RegexRegisteredService",
      "serviceId" : "^(https|imaps|http)://.*",
      "name" : "digipower",
      "id" : 1000,
      "description" : "CAS-SSO 登入",
      "evaluationOrder" : 10,
      "theme": "digipower"
    }

application.properties 配置

注意：设置cas需要从json文件做初始化操作，不然我们配置的json没有生效

# cas 自定义登入界面
    # 默认主题
    cas.theme.defaultThemeName=digipower
    # 开启识别json文件，默认false
    cas.serviceRegistry.initFromJson=true

**static 文件夹**

digipower.css:

h1 {
        color: blue;
    }

### templates 登录模板 ###

目录结构可以看到，每个子站点，都会新建一个文件夹，文件夹的名称需要和 service里面配置站点的theme的名称对应上，casLoginView.html 这个模板的名称，不能瞎改，这个是固定的

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title th:text="${#themes.code('digipower.pageTitle')}"></title>
        <link rel="stylesheet" th:href="@{${#themes.code('digipower.css.file')}}"/>
    </head>
    
    <body>
    <h1 th:text="${#themes.code('digipower.pageTitle')}"></h1>
    <h2>CAS-SSO 单点登录</h2>
    <div>
        <form method="post" th:object="${credential}">
            <div th:if="${#fields.hasErrors('*')}">
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
            </div>
            <h2 th:utext="#{screen.welcome.instructions}"></h2>
    
            <section class="row">
                <label for="username" th:utext="#{screen.welcome.label.netid}"/>
                <div th:unless="${openIdLocalId}">
                    <input class="required"
                           id="username"
                           size="25"
                           tabindex="1"
                           type="text"
                           th:disabled="${guaEnabled}"
                           th:field="*{username}"
                           th:accesskey="#{screen.welcome.label.netid.accesskey}"
                           autocomplete="off"/>
                </div>
            </section>
    
            <section class="row">
                <label for="password" th:utext="#{screen.welcome.label.password}"/>
                <div>
                    <input class="required"
                           type="password"
                           id="password"
                           size="25"
                           tabindex="2"
                           th:accesskey="#{screen.welcome.label.password.accesskey}"
                           th:field="*{password}"
                           autocomplete="off"/>
                </div>
            </section>
    
            <section>
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <input type="hidden" name="geolocation"/>
                <input class="btn btn-submit btn-block"
                       name="submit"
                       accesskey="l"
                       th:value="#{screen.welcome.button.login}"
                       tabindex="6"
                       type="submit"/>
            </section>
        </form>
    </div>
    </body>
    </html>

### 配置模板信息: ###

digipower.properties:

# 自定义登入首页相关参数配置
    #定义的字段和信息，可以在页面读取到
    digipower.css.file=/themes/digipower/css/digipower.css
    digipower.pageTitle=CAS-SSO 登入

### 启动服务 ###

到项目的根目录，找到build.cmd，然后debug启动服务。

build.cmd debug

### 访问测试: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2][]

![20190510111432127.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190510103056463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190510104115250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190510111359656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[20190510111432127.png]: https://img-blog.csdnimg.cn/20190510111432127.png