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

在集成了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/

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

主题渲染是怎么样的？

官方文档明确说明，登录页渲染文件为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文件存放对应主题文件，具体目录结构如下：

login.properties:

# 系统默认主题样式
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文件

最终工程目录结果

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

    
    
    
    
    




    

        

            

                

                    CAS单点登录后台系统
                
            
            

            


                

                    

                        

                            
                            
                            
                            

                                
                                
                            
                            

                                
                                
                                
                            
                            

                                
                            

                            登录
                            
                        
                    
                
            
        

    

启动项目

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