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%webappscasWEB-INFviewjspdefaultui」文件夾下，該文件夾內有多個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%webappscasWEB-INFviewjsp」文件夾，把default文件夾複製一份在本目錄下，取名「custom」。（2）進入「%TOMCAT_HOME%webappscas hemes」文件夾，將default文件夾複製一份在本目錄下，取名「custom」。（3）進入「%TOMCAT_HOME%webappscasWEB-INFclasses」文件夾，將「default_views.properties」文件複製一份並重新命名為「custom_views.properties」。（4）將離線登錄頁面中做好的「cas.css」文件拷貝到新建的「%TOMCAT_HOME%webappscas hemescustom」文件夾；將樣式文件中用到的圖片拷貝到「%TOMCAT_HOME%webappscasimages」文件夾。（注意：css文件中引用圖片的相對路徑不要搞錯。）（5）接下來是修改「%TOMCAT_HOME%webappscasWEB-INFviewjspcustomui」下的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%webappscasjs」文件夾下，並將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("u7528u6237u540du002fu90aeu7bb1u002fu624bu673au53f7", "watermark"); }); </script>（6）用管理員身份啟動文本編輯器，打開「%TOMCAT_HOME%webappscasWEB-INFclassescas-theme-default.properties」文件，將「standard.custom.css.file」屬性指向我們自己的css文件，代碼如下：standard.custom.css.file=/themes/custom/cas.css（7）用管理員身份啟動文本編輯器，打開「%TOMCAT_HOME%webappscasWEB-INFclassescustom_views.properties」文件，將裡面所有字元串「/default/」替換成「/custom/」。（8）用管理員身份啟動文本編輯器，打開「%TOMCAT_HOME%webappscasWEB-INFcas.properties」文件，把 cas.viewResolver.basename=default_views 修改為 cas.viewResolver.basename=custom_views 。（9）保存全部修改。啟動Tomcat服務，測試下效果。有可能顯示原來的界面，可嘗試把「%TOMCAT_HOME%workCatalina」目錄下的文件夾清空掉再試。下圖是經過加工後的CAS登錄頁面：

其它需要說明的地方：（1）「%TOMCAT_HOME%webappscasjscas.js」文件中「$(document).ready」方法包含了部分動畫顯示錯誤信息的javascript腳本，這可以根據你頁面樣式的不同適當進行調整（主要是顏色）。（2）在「%TOMCAT_HOME%webappscasWEB-INFclasses」文件夾下存在很多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(@"u4f60u597d")); Console.WriteLine("u4f60u597d"); } /// <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高手幫忙修改一下。【全文完】
推薦閱讀：