CAS-5.2.6-单点登录-自定义登陆页面

自定义登陆页面：
参考文档
https://apereo.github.io/cas/5.3.x/installation/Configuration-Properties.html#themes 
https://apereo.github.io/cas/5.3.x/installation/User-Interface-Customization-Themes.html
主题：重要 

静态主题

CAS配置为根据themeService Registry中给定注册服务的属性来装饰视图。通过此方法激活的主题仍将保留CAS的默认视图，但只会将CSS和Javascript等装饰应用于视图。无法通过此方法修改视图的物理结构。

组态

• 添加[theme_name].properties到src/main/resources文件夹的根目录。此文件的内容应与以下内容匹配：

cas.standard.css.file=/themes/[theme_name]/css/cas.css
cas.javascript.file=/themes/[theme_name]/js/cas.js
cas.admin.css.file=/themes/[theme_name]/css/admin.css

• 创建目录src/main/resources/static/themes/[theme_name]。把主题特定的cas.css和cas.js适当的目录内的css和js。
• 指定属性[theme_name]下的服务定义theme。

{
  "@class" : "org.apereo.cas.services.RegexRegisteredService",
  "serviceId" : "^https://www.example.org",
  "name" : "MyTheme",
  "theme" : "[theme_name]",
  "id" : 1000
}

        CAS还可以利用服务的相关主题来选择性地选择将使用哪组UI视图来生成标准视图（casLoginView.html等）。这在针对不同类型的受众的主题的页面集合在结构上完全不同的情况下特别有用，因为简单地使用简单主题对于增加默认视图是不实际的。在这种情况下，可能需要新的视图页面。

          默认情况下，与特定主题相关联的视图应在以下位置找到：src/main/resources/templates/。请注意，CAS视图和基于主题的视图都可以从Web应用程序上下文外部化。外部化时，预期主题视图将通过CAS属性在主题后命名的目录下的指定路径中找到。例如，如果CAS视图的外部路径是/etc/cas/templates，sample则可以定位主题的视图模板文件/etc/cas/templates/sample/。

组态

• 添加[theme_name].properties到src/main/resources文件夹的根目录。此文件的内容应与以下内容匹配：

cas.standard.css.file=/themes/[theme_name]/css/cas.css
cas.javascript.file=/themes/[theme_name]/js/cas.js
cas.admin.css.file=/themes/[theme_name]/css/admin.css

 项目中需要替换具体的页面只需要到：

然后在自己项目的相同目录下编写一个与替换文件名称一样的页面就行。

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

如：登录页

编写一样名称的登录页。添加相应的js css

步骤： 

1.编写一个注册的json文件中添加theme属性。

内容：

{
  "@class" : "org.apereo.cas.services.RegexRegisteredService",
  "serviceId" : "^(https|imaps|http)://.*",
  "name" : "mythenms",
  "id" : 1000,
  "description" : "mythenms",
  "evaluationOrder" : 10,
  "theme" : "mythenms"
}

2.在src/main/resources下创建application.properties添加如下内容

#自定义登陆页
#原cas默认的css样式,如果更改了,某些页面样式将丢失
cas.standard.css.file=/css/cas.css
#自己的样式
cas.myself.css=/themes/css/cas.css
cas.javascript.file=/themes/js/jquery-1.4.2.min.js
cas.page.title=mythenms


# 修改默认主题
cas.theme.defaultThemeName=mythenms

3.编写相应样式和页面

4.结果