转载Yale CAS + .net Client 实现 SSO（6）
Yale CAS + .net Client 实现 SSO（6）
第一部分：安装配置 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高手帮忙修改一下。
【全文完】
分类: Yale CAS
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于转载Yale CAS + .net Client 实现 SSO（6）的详细内容...