CAS自定义登录页面

怼烎@ 2022-05-14 01:30 367阅读 0赞

参考：[http://www.imooc.com/article/3720][http_www.imooc.com_article_3720]  
不过参考链接中介绍的并不详细，这里具体说明一下。

/css/下复制cas.css，并重命名为nebula.css.  
文件内容不变，将`#container`改成如下：

#container { position: fixed; top: 50%; left: 50%; width:50%; height: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

因为后面会把页眉和页脚的一些东西，包括右侧的banner删除，所以这里的CSS是让内容居中显示。

`/WEB-INF/classes`下复制`cas_views.properties`，并重命名为`nebula_views.properties`.  
并增加下面的内容（默认是空的）：

nebulaLoginView.(class)=org.springframework.web.servlet.view.JstlView
    nebulaLoginView.url=/WEB-INF/view/jsp/nebula/ui/casLoginView.jsp
    nebulaIndexView.(class)=org.springframework.web.servlet.view.JstlView
    nebulaIndexView.url=/WEB-INF/view/jsp/nebula/ui/casIndexView.jsp

`/WEB-INF/classes`下复制`cas-theme-default.properties`，并重命名为`nebula-theme.properties`.  
并修改js和css的路径：

standard.custom.css.file=/css/nebula.css
    cas.javascript.file=/js/cas.js

`/WEB-INF/view/jsp`下新增文件夹nebula/ui，将`/WEB-INF/view/jsp/default/ui`下的`casLoginView.jsp`，`casGenericSuccessView.jsp`，`includes`复制到`/nebula/ui`，并重命名为`nebulaLoginView.jsp`和`nebulaIndexView.jsp`.

将`/WEB-INF/view/jsp/nebula/ui/nebulaLoginView.jsp`中无关的东西都删除，只保留登录的form相关，这个可以慢慢删除调试。`nebulaIndexView`是登录成功后显示的页面,内容如下：

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
    <div>你好，你在CAS Server已登录成功！<a href="logout">退出</a></div>

`/WEB-INF/webflow/login`下复制`login-webflow.xml`，并重命名为`nebula-login-webflow.xml`。  
将`viewLoginForm`中的`casLoginView`修改为`nebulaLoginView`.  
将`viewGenericLoginSuccess`中的view改为`nebulaIndexView`.  
`/WEB-INF/webflow/login`下复制`logout-webflow.xml`，并重命名为`nebula-logout-webflow.xml`。

修改`/WEB-INF/cas.properties`，将`cas.themeResolver.defaultThemeName`改成`nebula-theme`.

`/WEB-INF/cas-servlet.xml`文件修改：  
1. viewResolver中`cas_views`改成`nebula_views`.  
2. internalViewResolver中defaultViewsPathPrefix改成`/WEB-INF/view/jsp/nebula/ui/`.  
3. loginFlowRegistry中，将value改成：`/login/nebula-login-webflow.xml`.  
4. logoutFlowRegistry中，将value改成：`/logout/nebula-logout-webflow.xml`.

最后的效果：  
登录的界面：  
![43145484-file_1495081069165_1b8b.png][]

登录成功的界面：  
![5600562-file_1495081103378_e8fa.png][]

## 问题： ##

1、 CAS做了国际化，不过默认是英文的，如果想使用中文显示，可以`/WEB-INF/classes`下`messages.properties`重命名为`messages_en.properties`。同时，将`messages_zh_CN.properties`重命名为`messages.properties`.

2、 页面显示乱码的问题。  
在JSP页面中增加：

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>

[http_www.imooc.com_article_3720]: http://www.imooc.com/article/3720
[43145484-file_1495081069165_1b8b.png]: http://omh46px9n.bkt.clouddn.com/17-5-18/43145484-file_1495081069165_1b8b.png
[5600562-file_1495081103378_e8fa.png]: http://omh46px9n.bkt.clouddn.com/17-5-18/5600562-file_1495081103378_e8fa.png