本文共 2553 字,大约阅读时间需要 8 分钟。
原文地址,转载请注明出处: ©
cas也搞得差不多了,一直使用的是默认登录页面,这样是肯定不行的,企业级登录页面,一般都是自定义的,页面上有广告或者公司的logo等,下面开始进行自定义登录页面,查看官方文档,发现有动态主题和静态主题,下面只介绍静态主题模式。
主题意味着风格不一样,目的就是不同的接入端,显示不同的登录页面,就像阿里旗下的各种登录,支付宝登录,淘宝,天猫,用的可能就是同一个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
,还记得我们之前配置客户端注册的时候的json文件,这个文件中还可以添加一个属性theme对应自己的主题,具体看下面的例子,cas也可以设置一个默认主题,如果service注册的时候没有指明主题,就使用默认的主题。
客户端app1
{ "@class" : "org.apereo.cas.services.RegexRegisteredService", "serviceId" : "^(https|imaps|http)://app1.cas.com.*", "name" : "测试客户端app1", "id" : 1000, "description" : "这是app1的客户端", "evaluationOrder" : 10, "theme" : "app1"}
客户端app2
{ "@class" : "org.apereo.cas.services.RegexRegisteredService", "serviceId" : "^(https|imaps|http)://app2.cas.com.*", "name" : "测试客户端app2", "id" : 1001, "description" : "这是app2的客户端", "evaluationOrder" : 11, "theme" : "app2"}
根据官网文档,需要在src/main/resources文件夹的根目录下创建 与 json文件中theme属性值 对应的properties
所以要在src/main/resources新建app1.properties 和 app2.properties 这只是demo,所以以下内容相似。#原cas默认的css样式,如果更改了,某些页面样式将丢失cas.standard.css.file=/css/cas.css#自己的样式cas.myself.css=/themes/app1/css/cas.csscas.javascript.file=/themes/app1/js/jquery-1.4.2.min.jscas.page.title=app1的主题
在app1.properties 和 app2.properties 中的属性值都是随便起,只要在html中指明引用的key就可以了,例如:properties中指明css和js文件地址,然后在html中用下面的方式使用。
注意:上面配置文件中有cas.standard.css.file属性,这个属性默认就是指向/css/cas.css也就是cas默认的css文件,这个我们要指明,否则你只是自定义了登录页面,其他页面的样式将丢失。我们在自定义的登录页面使用自己的css文件,不跟cas的默认css混淆。
客户端1
h2 { color: red;}
客户端2
h2 { color: pink;}
# 默认主题cas.theme.defaultThemeName=app2
这是只给出app1的页面,页面都是一样的,只是根据在properties中的title属性来区分不同的客户端,app2粘贴就行了。
注意要点:from表单的内容需要遵循一定的标准th:object等.
第一步:先直接登录cas服务,默认使用的是app2的主题
第二步:访问app1.cas.com客户端1 显示客户端1的主题。 第三步:访问app2.cas.com客户端2 显示客户端2的主题。 第四步:登录 登出测试 没有问题。效果如下图: