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

2023-11-03

第一：项目整体结构：

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

目录	含义
services	配置自定义登入网站模板
static	静态文件目录，用于存放js，css代码的
templates	模板文件目录，用于存放html
digipower.properties	存放digipower网站模板的配置信息

services 目录配置

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

HTTPSandIMAPS-10000001.json 文件解析

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

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

访问测试:

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CAS