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

java哥 阅读:234 2021-03-31 18:11:59 评论:0

第一:项目整体结构:

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

访问测试:

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们