2022-01-11 14:40:18 版本 : Cas5.3.2 服务端 自定义登入界面
作者: 周杨 于 2022年01月11日 发布在分类 / 计算机应用 / 服务器 下,并于 2022年01月11日 编辑
 历史版本
备注 修改日期 修改人
格式调整 2022-01-11 14:40:18[当前版本] 系统管理员
CREAT 2022-01-11 14:23:18 系统管理员
返回

转自：https://blog.csdn.net/zhouzhiwengang/article/details/90053313


项目整体结构

自定义页面涉及资源全部存放再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

访问测试

历史版本-目录  [回到顶端]
    知识分享平台 -V 5.1.4 -大信谛威