【原创】Cas 单点登录多站点自定义登录页

2023年2月17日 0条评论 375次阅读 0人点赞慕容

services

在 services 文件夹中创建两个站点的 json 文件 test1-1000.json、test1-1001.json

test1-1000.json

{
  "@class" : "org.apereo.cas.services.RegexRegisteredService",
  "serviceId" : "^(https|imaps|http)://localhost:9999.*",
  "name" : "test1",
  "id" : 1000,
  "description" : "localhost:9999项目访问过来，跳转到 test1 主题",
  "evaluationOrder" : 10,
  "theme": "test1"
}

serviceId：配置匹配的规则，本例是访问 http://localhost:9999 进入到 t1 站点。
id：必须与文件名后面的数字匹配，t1-1000 所以此处 id 为 1000。
evaluationOrder：设置匹配的优先级，多站点的 evaluationOrder 不要设置为相同的值。
theme：主题名称，要与 static/theme 下面创建的文件夹名称相同

test1.properties

test1.pageTitle=test1 登入
test1.css=/themes/test1/css/test1.css

此处的 test1.pageTitle 键名类似于变量，在 template 中获取的时候使用。

static

创建 static/themes/test1/css/test1.css，用来设置 test1 站点的样式文件。

theme 后面的文件夹名称 test1 对应的是 test1-1000.json 中的 theme 中设置的值
test1.css 名称与 test1.properties 中设置的 css 位置相对应

template

template/test1/casLoginView.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1登录页面</title>
    <link rel="stylesheet" th:href="@{${#themes.code('test1.css')}}"/>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <form method="post" th:object="${credential}">
            <div th:if="${#fields.hasErrors('*')}">
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
            </div>
            <div class="header">登录</div>
            <div class="form-wrapper">
                <div th:unless="${openIdLocalId}">
                    <input type="text"
                           th:field="*{username}"
                           th:disabled="${guaEnabled}"
                           th:accesskey="#{screen.welcome.label.netid.accesskey}"
                           class="required login-input"
                           placeholder="用户名"
                           autocomplete="off"
                    />
                </div>
                <input type="password"
                       th:field="*{password}"
                       placeholder="密码"
                       class="login-input required"
                       autocomplete="off"
                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                />
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <input type="hidden" name="geolocation"/>
                <input type="submit" name="submit" class="login-btn" th:value="登录" />
            </div>
            <div class="notice-msg">
                还没有账号?
                <a href="#">注册</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

test1.css

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    height: 100%;
}
.container {
    height: 100%;
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
    background-color: #fff;
    width: 358px;
    height: 588px;
    border-radius: 15px;
    padding: 0 50px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}
.login-input {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}
.input-item:placeholder {
    text-transform: uppercase;
}
.login-btn {
    text-align: center;
    padding: 10px;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
    border:none
}
.notice-msg {
    text-align: center;
    line-height: 88px;
}
.notice-msg a {
    text-decoration-line: none;
    color: #abc1ee;
}

此处登录 input username、password、submit 按钮 input hidden 这些参数都需要带着，登录时需要这些参数，此处我写了样式，可忽略。

修改默认主题

application.properties 中的 cas.theme.defaultThemeName 是设置默认主题的，如果 cas.theme.defaultThemeName=test1，则是将 test1 设置为默认主题。

更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在天边资源网。

慕容的工作随笔