定制界面

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳✕✓✔✖

1. 前言

1.1 技巧

网上有很多关于界面定制的文章都是错的，因为新的版本需要加上路径了。
- 例如修改 login 界面，新版本是放在 login 的目录中
[theme-name].properties 不能空，空的话，界面不起效果
查看内置了那些界面
- 使用命令：./gradlew listTemplateViews
- 查看源代码：support/cas-server-support-thymeleaf
通过指定模板路径，这样就不用将模板文件打包到 Jar 中

1.2 可优化内容

是否支持移动端界面
怎么做到界面与现有工程代码分离
界面关联的后台代码在哪里呢
thymeleaf

2. 快速开始

在这个目录中保存了准备制作的各类模板文件。 cas-templates

具体操作如下：

2.1 修改 Idea 字符集

可以看这个文档

重点：

找到[File Encoding]将里面的修改成 utf-8
特别是：对于 Properties 文件，重要属性 Transparent native-to-ascii conversion 主要用于转换 ascii，一般都要勾选，不然 Properties 文件中的注释显示的都不会是中文。

2.2 创建外部文件夹

创建一个外部文件夹/home/fanhl/01-java/cas/cas-templates/src，将 templates、css、js、imgs 都放在这里，这样不用重启服务，也可以改变User Interface

└── src
    ├── static
    │   └── wukong
    │       ├── css
    │       ├── favicon.ico
    │       ├── images
    │       ├── js
    │       └── yn.jpg
    ├── templates
    │   └── themes
    │       └── wukong
    │           └── login
    │               └── casLoginView.html
    └── wukong.properties

yn.jpg is a test image.

2.3 配置 service

建立这个文件：resources/services/web-10000001.json

{
  "@class": "org.apereo.cas.services.RegexRegisteredService",
  "serviceId": "^(https|imaps|http)://.*",
  "name": "web",
  "id": 10000001,
  "evaluationOrder": 10,
  "accessStrategy": {
    "@class": "org.apereo.cas.services.DefaultRegisteredServiceAccessStrategy",
    "enabled": true,
    "ssoEnabled": true
  },
  "theme": "wukong"
}

注意："theme": "wukong"

2.4 引用外部文件

配置application.yml

cas:
  service-registry:
    json:
      location: classpath:/services
      watcher-enabled: true
  authn:
    accept:
      users: user::aaa
  view:
    template-prefixes:
      - file:/home/fanhl/01-java/cas/cas-templates/src/templates/

spring:
  thymeleaf:
    cache: false
  web:
    resources:
      static-locations:
        - classpath:/static/
        - file:/home/fanhl/01-java/cas/cas-templates/src/static/

注意：

指定 template 路径：template-prefixes
指定 css js img 路径：static-locations
- 一定要添加- classpath:/static/

2.5 配置`wukong.properties`

cas.standard.css.file=/css/cas.css

如果不配置这个文件或者文件为空，那么新的样式不能显示。

也可以做一个软连接配置文件，将模板文件中的内容链接过来。

[cas-templates ] 工程下有一个wukong.properties

可以软连接过来

## 进入当前目录 cas-overelay/src/main/resources

ln -s /home/fanhl/01-java/cas/cas-templates/src/wukong.properties  ./

2.6 切换模板代码解读

有如下类的代码可以读一下，为了跟踪下面的类与代码，需要添加依赖。

implementation "org.apereo.cas:cas-server-support-thymeleaf"

① 读取模板路径

CasThymeleafConfiguration

// 这里有一点小问题，要加上themes，那么在template中也要加上这个目录。
val templatePrefixes = casProperties.getView().getTemplatePrefixes();
theme.setPrefix(viewPath + "themes/%s/");

② 解析模板

ThemeFileTemplateResolver

上面是模板解析类，继承了thymeleaf的FileTemplateResolver类。

通过代码可以看到：如果有themeName，那么就拼接这个模板文件。如果没有直接调用父类的computeTemplateResource函数。

@Override
    protected ITemplateResource computeTemplateResource(final IEngineConfiguration configuration, final String ownerTemplate,
                                                        final String template, final String resourceName, final String characterEncoding,
                                                        final Map<String, Object> templateResolutionAttributes) {
        val request = HttpRequestUtils.getHttpServletRequestFromRequestAttributes();
        val themeName = this.themeResolver.resolveThemeName(request);

        if (StringUtils.isNotBlank(themeName)) {
            val themeTemplate = String.format(resourceName, themeName);
            LOGGER.trace("Computing template resource [{}]...", themeTemplate);
            return super.computeTemplateResource(configuration, ownerTemplate, template,
                themeTemplate, characterEncoding, templateResolutionAttributes);
        }
        return super.computeTemplateResource(configuration, ownerTemplate, template,
            resourceName, characterEncoding, templateResolutionAttributes);
    }

③ 使用了 Spring 的动态模板技术

参看文档

通过ThemeResolver，就可以得到当前的theme，ThemeResolver有两个方法：

resolveThemeName：从当前请求中解析出主题的名字。解析模板用
setThemeName：设置当前主题。当某个 client 访问时，发现设置了theme时候用。

2.7 添加官方的例子

cas-server-support-themes-collection

官方给的一个例子，代码在这里

这个例子给出了一个思路，今后可以把内容打包到一个 Jar 包，发布出去。

具体使用的步骤如下：

① 添加 gradle

implementation "org.apereo.cas:cas-server-support-themes-collection"

② 配置 service 的 theme

官方提供了：example、twbs

"theme": "example"

然后启动程序后，就能看到新的样式了。

③ 其他

在 css 中使用了 import

@import '../../../css/cas.css';

body {
  background-color: rgb(12, 71, 112);
}

body,
p,
span,
div,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Bookerly, Tahoma;
}

example.properties 例子

cas.theme.name=Example Theme
cas.theme.description=Example - Central Authentication Service

cas.standard.css.file=/themes/example/css/cas.css
cas.standard.js.file=/themes/example/js/cas.js
cas.logo.file=/themes/example/images/logo.png
cas.favicon.file=/themes/example/images/favicon.ico

cas.drawer-menu.enabled=false
cas.notifications-menu.enabled=false
cas.login-form.enabled=true

wukong-doc