【SSO单点系列】(2):CAS4.0 登录页的个性化定制

 

  上一篇 【SSO单点系列】(1):CAS环境的搭建介绍了CAS最简单环境的搭建,以及一个例子用来讲解CAS的一个最基础的用法。 今天主要是介绍如何对CAS登录页进行个性化定制。

    一.开始

  下图是CAS默认的登录界面,可以看到这界面是肯定不能直接用在生产环境上的,因为上面的有许多英文,简单来说,这是一个对客户非常不友好的界面。那么怎么修改它呢?我们接着往下看!

  ps:这个页面在工程中的地址为 cas\WEB-INF\view\jsp\default\ui\casLoginView.jsp,大家可以打开看一看

  

  二.配置文件修改

  其实CAS所有的界面位置都是在cas.properties(具体位置:cas\WEB-INF\cas.properties)中指定的。我们打开这个文件,找到下面这行

 

cas.securityContext.status.allowedSubnet=127.0.0.1

cas.themeResolver.defaultThemeName=cas-theme-default

//注意下面这行
cas.viewResolver.basename=default_views

 

 

  看cas.viewResolver.basename 这个键值对,它的值是default_views,表示的是默认的视图配置,其实是一个properties文件的名称而已。大家找找看,在工程中是不是有一个名为default_views.properties(具体位置:cas\WEB-INF\classes\default_views.properties )的文件,文件的具体内容如下:

 

casLoginView.(class)=org.springframework.web.servlet.view.JstlView
casLoginView.url=/WEB-INF/view/jsp/default/ui/casLoginView.jsp

### Display login (warning) messages
casLoginMessageView.(class)=org.springframework.web.servlet.view.JstlView
casLoginMessageView.url=/WEB-INF/view/jsp/default/ui/casLoginMessageView.jsp

### Login confirmation view (logged in, warn=true)
casLoginConfirmView.(class)=org.springframework.web.servlet.view.JstlView
casLoginConfirmView.url=/WEB-INF/view/jsp/default/ui/casConfirmView.jsp

### Logged-in view (logged in, no service provided)
casLoginGenericSuccessView.(class)=org.springframework.web.servlet.view.JstlView
casLoginGenericSuccessView.url=/WEB-INF/view/jsp/default/ui/casGenericSuccess.jsp

### Logout view (/logout)
casLogoutView.(class)=org.springframework.web.servlet.view.JstlView
casLogoutView.url=/WEB-INF/view/jsp/default/ui/casLogoutView.jsp

//省略

 

可以看到我们的登录页面就是配置在上面的, 里面还配置了 登录成功页面,退出页面等,这个后面会具体说明。

我们知道了页面配置后,那么是不是可以根据业务来具体订制一套页面了。

 

1.在cas.properties 修改 cas.viewResolver.basename  值为 bokeyuan_view ,那样系统就会自动会查找 bokeyuan_view.properties 这个配置文件

2.第1点中查找的 bokeyuan_view.properties 是没有的,我们要自己新建,直接复制原来的 default_views.properties 就行了,重命名为bokeyuan_view.properties

3.但是bokeyuan_view.properties 中的地址还是 /WEB-INF/view/jsp/default ,我们全部替换把这地址替换成 WEB-INF\view\jsp\bokeyuan

4.接下来我们把 cas\WEB-INF\view\jsp\default 下面的所有文件复制下,然后重命名为我们需要的名称,cas\WEB-INF\view\jsp\bokeyuan

5.这样我们就可以可以随意修改登录界面了

ps:有人说直接修改原来的 cas\WEB-INF\view\jsp\default\ui\casLoginView.jsp 就行了,省得麻烦。 其实这样也是行的,但这样如果后面需要初始的界面,那样就没了。

采用配置修改的方式主要会更加灵活点,可以保留原来的备份。

pps:登录界面中的jquery库 是配置在cas\WEB-INF\view\jsp\default\ui\includes\bottom.jsp中的,但是这个是直接引用googleapis 的,我们是不能访问的,需要修改成你本地或者能够访问的CDN库(百度CDN、360CDN 等)

ppps:你可以随意修改原来的界面,但是原来的逻辑不能修改,其实主要是 form:form 这标签里的东西不要变了。反正你只修改样式,是肯定不会错的

 

三、总结

这样我们就可以按照我们的需求 个性化定制我们的登录界面了。

原来的界面上只有姓名、密码两个表单,可能大家还想在上面加上验证码, 加验证码 在下一篇中进行介绍,大家敬请期待!

 

 

好了 ,打完收工!

 

 

 

  

 

posted @ 2014-12-21 21:43  icodeit  阅读(10186)  评论(9编辑  收藏  举报