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

 

【全文完】