CAS单点登录-自定义主题、界面（九）

最新推荐文章于 2024-03-25 14:46:03 发布

Lambda程序员

最新推荐文章于 2024-03-25 14:46:03 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/pyycsd/article/details/102803181

版权

在集成了sso之后，cas的登录界面一般都不满足上线要求，所以必须来一套自定义登录界面

当然了我们还有以下的使用场景：

不同接入端登录页不一
默认主题

本章目标

图标改变
背景颜色改变
字体改变

疑问与介绍

官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization.html

主题？

先介绍下什么叫主题，主题就意味着风格不一，目的就是为了在不同的接入端（service）展示不同的页面，就例如淘宝登录、天猫登录，其中登录点还是一个sso，但淘宝登录卖的广告是淘宝的，而天猫登录卖的广告是天猫的

简略看完后，会有以下的规范：

静态资源(js,css)存放目录为src/main/resources/static
html资源存(thymeleaf)放目录为src/main/resources/templates
主题配置文件存放在src/main/resources并且命名为[theme_name].properties
主题页面html存放目录为src/main/resources/templates/<theme-id>

可能看完上面的规范会有一些疑问

主题渲染是怎么样的？

官方文档明确说明，登录页渲染文件为casLoginView.html,那意味我们在主题具体目录下新增改文件并且按照cas要求写那就可以了，最终目的还是获取到对应的配置文件，渲染对应主题的登录页。

具体执行流程如图所示：

接入服务如何指定默认主题？

{
  "@class": "org.apereo.cas.services.RegexRegisteredService",
  "serviceId": "^(http)://localhost.*",
  "name": "本地服务",
  "id": 100001,
  "theme" : "[theme_name]",
  "description": "这是一个本地允许的服务，通过localhost访问都允许通过",
  "evaluationOrder": 1
}

注意：theme为key指定配置文件id

根据官网文档,需要在src/main/resources文件夹的根目录下创建与 json文件中theme属性值对应的properties ,所以要在src/main/resources新建[theme_name].properties
同时根据约定在 src/main/resources/static下创建themes文件存放对应主题文件，具体目录结构如下：

# 系统默认主题样式
cas.standard.css.file=/css/cas.css
cas.javascript.file=/js/cas.js
cas.admin.css.file=/css/admin.css

# 自定义JS
login.js.elementui=/themes/login/js/elementui.min.js
login.js.vue=/themes/login/js/vue.js
login.js.jquery=/themes/login/js/jquery.min.js

# 自定义CSS
login.css.elementui=/themes/login/css/element-ui.css
index.css.style=/themes/login/css/style.css
login.css.iconfont=/themes/login/iconfont/iconfont.css

# 其它
login.img.path=/themes/login/img
server.url=http://localhost:9001

1. 通过配置文件接入服务指定主题

{
  "@class": "org.apereo.cas.services.RegexRegisteredService",
  "serviceId": "^(http)://localhost.*",
  "name": "本地服务",
  "id": 100001,
  "description": "这是一个本地允许的服务，通过localhost访问都允许通过",
  "evaluationOrder": 1,
  "theme": "login"
}

2. 动态添加service时设置theme字段值

3. 配置默认主题

如果接入服务是没有指定主题，还可以通过修改cas-server的application.properties来为在接入服务是没有指定主题的服务设置默认主题：

# 默认主题
cas.theme.defaultThemeName=[默认主题名称]

我们这里就采用第三种方式，在配置文件中添加默认主题配置：

# 默认主题
cas.theme.defaultThemeName=login

新建登录文件

明码规定文件名为casLoginView.html，路径根据约定在src/main/resources/templates/[theme_id]/casLoginView.html文件

最终工程目录结果

这里涉及到的样式文件就不提供了，可以根据具体项目自行跳转，贴出登陆页面源码供参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{${#themes.code('index.css.style')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('login.css.elementui')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('login.css.iconfont')}}"/>
    <link rel="shortcut icon" href="@{${#themes.code('login.img.path')} + '/favicon.ico'}" type="image/vnd.microsoft.icon">
</head>

<body>
<div id="app">
    <div class="login-box">
        <div ref="scaleBox" style="width: 60%;">
            <div class="logo">
                <div class="title">
                    CAS单点登录后台系统
                </div>
            </div>
            <div class="linear"></div>
            <div class="bg1">

                <div class="bg2">
                    <div class="bg3">
                        <form id="postForm" autocomplete="off" method="post" th:object="${credential}">
                            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                            <input type="hidden" name="_eventId" value="submit"/>
                            <input type="hidden" name="geolocation"/>
                            <div class="customInput">
                                <i class="iconfont icon-man"></i>
                                <input class="username"
                                       id="username"
                                       size="25"
                                       v-model.trim="username"
                                       tabindex="1"
                                       placeholder="请输入用户名"
                                       type="text"
                                       th:disabled="${guaEnabled}"
                                       th:field="*{username}"
                                       th:accesskey="#{screen.welcome.label.netid.accesskey}"
                                       autocomplete="off"/>
                            </div>
                            <div class="customInput">
                                <i class="iconfont icon-suo"></i>
                                <!-- <input type="password" name="password" class="password" v-model.trim="password" autocomplete="off"
                                    placeholder="请输入密码"> -->
                                <input class="password"
                                       type="password"
                                       id="password"
                                       size="25"
                                       tabindex="2"
                                       placeholder="请输入密码"
                                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                                       th:field="*{password}"
                                       autocomplete="off"/>
                            </div>
                            <div th:if="${#fields.hasErrors('*')}">
                                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
                            </div>

                            <button class="login-btn" name="submit" accesskey="l"
                                    th:value="#{screen.welcome.button.login}" type="submit">登录
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script th:src="@{${#themes.code('login.js.vue')}}"></script>
<script th:src="@{${#themes.code('login.js.elementui')}}"></script>
<script th:src="@{${#themes.code('login.js.jquery')}}"></script>


</html>

启动项目

浏览器输入：http://localhost:8443/cas/login，系统默认的登陆页面就改成我们自定义主题样式的登陆页面了。

Lambda程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CAS单点登录-自定义主题、界面（九）

在集成了sso之后，cas的登录界面一般都不满足上线要求，所以必须来一套自定义登录界面当然了我们还有以下的使用场景：不同接入端登录页不一默认主题本章目标图标改变背景颜色改变字体改变疑问与介绍官方文档：https://apereo.github.io/cas/5.1.x/installation/User-Interface-Customization....
复制链接

扫一扫