Yale CAS + .net Client 实现 SSO（6）--自定义登录页面

原文地址：http://www.cnblogs.com/zhenyulu/archive/2013/01/31/2883863.html

第一部分：安装配置 Tomcat

第二部分：安装配置 CAS

第三部分：实现 ASP.NET WebForm Client

第四部分：实现基于数据库的身份验证

第五部分：扩展基于数据库的身份验证

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

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

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文件做好准备。下图显示了登录页面的主体结构：

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

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

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

 

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登录页面：

其它需要说明的地方：

（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高手帮忙修改一下。

 

【全文完】