First we try, then we trust

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  190 随笔 :: 111 文章 :: 3512 评论 :: 358 引用

公告

第六部分:自定义登录页面

1. 离线定义登录页面

CAS登录页面存放在“%TOMCAT_HOME%\webapps\cas\WEB-INF\view\jsp\default\ui”文件夹下,该文件夹内有多个jsp文件,主要包括:

页面 功能
casConfirmView.jsp 在浏览器跳转到用户想要访问的页面之前如果有警告信息,这个页面将会被显示。
casGenericSuccess.jsp 这个页面一般不会被显示,除非我们直接访问验证服务器的验证界面。
casLoginView.jsp 重点修改的页面。这个就是输入验证信息的界面。
casLogoutView.jsp 注销界面。
serviceErrorView.jsp 如果用户想要访问的服务没有使用CAS,这个页面将会显示出来。注意:如果我们所有的业务系统都使用了CAS,这个界面则会没有任何作用。

上表所列页面绝大多数无需修改,主要是“casLoginView.jsp”还有includes目录下的“top.jsp”、“bottom.jsp”两个文件。

面对jsp文件中的复杂代码,往往不知从何下手。所以我建议采用以下方式定义登录页面。

(1)从浏览器中打开CAS登录页面,故意输错密码后让错误警示信息呈现出来。紧接着选择保存当前页面,保存格式选“网页,全部(*.htm;*.html)”。

(2)使用浏览器调试工具(IE浏览器使用F12键)查看页面结构,为后续定义CSS文件做好准备。下图显示了登录页面的主体结构:

CAS006001

文档分header、content、footer三部分,其中content内部又包括login和siderbar两部分内容。如果在定义登录页面时需要调整网页结构,记得CSS样式的层级结构也一并加以修改。

(3)使用网页编辑器编辑保存的离线网页,在尽量不修改页面内容的条件下通过修改CSS样式对登录页面加以调整。

本人对离线文件做了几处小的修改,主要是添加了几个空div,目的是为了具有更多的CSS样式发挥空间,另外增加了jQuery watermark插件的脚本,其它内容一概没有动。更多是是配合CSS样式和图片完成登录页面设置。经过一番功夫后,离线页面被我修改成了下面这个样子:

CAS006002

 

2. 修改jsp登录页面

离线文件准备好后,就可以对CAS的jsp文件下手了。不过这里强烈建议不要在原有的文件上进行修改,最好建立一份新的theme。具体办法如下:

(1)停掉Tomcat服务,进入“%TOMCAT_HOME%\webapps\cas\WEB-INF\view\jsp”文件夹,把default文件夹复制一份在本目录下,取名“custom”。

(2)进入“%TOMCAT_HOME%\webapps\cas\themes”文件夹,将default文件夹复制一份在本目录下,取名“custom”。

(3)进入“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes”文件夹,将“default_views.properties”文件复制一份并重新命名为“custom_views.properties”。

(4)将离线登录页面中做好的“cas.css”文件拷贝到新建的“%TOMCAT_HOME%\webapps\cas\themes\custom”文件夹;将样式文件中用到的图片拷贝到“%TOMCAT_HOME%\webapps\cas\images”文件夹。(注意:css文件中引用图片的相对路径不要搞错。)

(5)接下来是修改“%TOMCAT_HOME%\webapps\cas\WEB-INF\view\jsp\custom\ui”下的casLoginView.jsp文件以及includes文件夹下的“top.jsp”、“bottom.jsp”两个文件了。有了对离线文件的修改经验,对这三个文件改起来要相对容易一些。(注意:不要动任何文件中的程序代码。)

这些文件的修改可根据个人需要进行,不过值得注意的是,在bottom.jsp文件的最下方可以看到jquery文件的引用路径为:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

强烈建议改为本地路径。毕竟一旦将CAS放置在内网,将造成jQuery文件异常。

将jQuery脚本文件及其它脚本文件拷贝到“%TOMCAT_HOME%\webapps\cas\js”文件夹下,并将bottom.jsp文件中的引用修改过来。修改后的内容如下:

<script type="text/javascript" src="<c:url value="/js/jquery.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-ui.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/cas.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.watermark.min.js" />"></script>
<script language="javascript" type="text/javascript">
        $(function () {
             $("#username").watermark("\u7528\u6237\u540d\u002f\u90ae\u7bb1\u002f\u624b\u673a\u53f7", "watermark");
    }); 
</script>

(6)用管理员身份启动文本编辑器,打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes\cas-theme-default.properties”文件,将“standard.custom.css.file”属性指向我们自己的css文件,代码如下:

standard.custom.css.file=/themes/custom/cas.css

(7)用管理员身份启动文本编辑器,打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes\custom_views.properties”文件,将里面所有字符串“/default/”替换成“/custom/”。

(8)用管理员身份启动文本编辑器,打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\cas.properties”文件,把 cas.viewResolver.basename=default_views  修改为 cas.viewResolver.basename=custom_views 。

(9)保存全部修改。启动Tomcat服务,测试下效果。有可能显示原来的界面,可尝试把“%TOMCAT_HOME%\work\Catalina”目录下的文件夹清空掉再试。

下图是经过加工后的CAS登录页面:

CAS006003

其它需要说明的地方:

(1)“%TOMCAT_HOME%\webapps\cas\js\cas.js”文件中“$(document).ready”方法包含了部分动画显示错误信息的javascript脚本,这可以根据你页面样式的不同适当进行调整(主要是颜色)。

(2)在“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes”文件夹下存在很多messages_*.properties文件,主要是为了国际化。如果对页面呈现的文字进行修改,可以修改“messages_zh_CN.properties”文件中的信息。

(3)“messages_zh_CN.properties”文件中的汉字都是unicode转义符,处理起来很不方便。下面的C#代码(从网上找的)可以帮助解决问题:

using System;
using System.Text;
using System.Text.RegularExpressions;
using System.Globalization;

public class GB2312UnicodeConverter
{
    public static void Main()
    {
        Console.WriteLine(ToUnicode("用户名/邮箱/手机号"));
        Console.WriteLine(ToGB2312(@"\u4f60\u597d"));
        Console.WriteLine("\u4f60\u597d");
    }

    /// <summary>
    /// 汉字转换为Unicode编码
    /// </summary>
    /// <param name="str">要编码的汉字字符串</param>
    /// <returns>Unicode编码的的字符串</returns>
    public static string ToUnicode(string str)
    {
        byte[] bts = Encoding.Unicode.GetBytes(str);
        string r = "";
        for (int i = 0; i < bts.Length; i += 2) r += "\\u" + bts[i + 1].ToString("x").PadLeft(2, '0') + bts[i].ToString("x").PadLeft(2, '0');
        return r;
    }

    /// <summary>
    /// 将Unicode编码转换为汉字字符串
    /// </summary>
    /// <param name="str">Unicode编码字符串</param>
    /// <returns>汉字字符串</returns>
    public static string ToGB2312(string str)
    {
        string r = "";
        MatchCollection mc = Regex.Matches(str, @"\\u([\w]{2})([\w]{2})", RegexOptions.Compiled | RegexOptions.IgnoreCase);
        byte[] bts = new byte[2];
        foreach (Match m in mc)
        {
            bts[0] = (byte)int.Parse(m.Groups[2].Value, NumberStyles.HexNumber);
            bts[1] = (byte)int.Parse(m.Groups[1].Value, NumberStyles.HexNumber);
            r += Encoding.Unicode.GetString(bts);
        }
        return r;
    }
}

 

3. 自定义登录界面源码

附件:CAS自定义登录界面源码

这是我定义的CAS登录页面。解压缩后将不同文件夹下的文件拷贝到相应文件夹下(如何对应可参考正文)。本人使用的CAS版本是3.5.1,可能随着版本的不同文件会有些许不同,请根据实际情况应用附件中的内容。

另外,由于本人不擅长CSS和美工,所以设计的登录页面请使用IE9或Chorme浏览器查看,否则可能会出现排版问题。(已知IE8中水印无法正确显示,IE6中排版错乱)。还望哪位CSS高手帮忙修改一下。

 

【全文完】

posted on 2013-01-31 00:10 吕震宇 阅读(...) 评论(...) 编辑 收藏