本文英文原版及代碼下載：
http://aspnet.4guysfromrolla.com/articles/060706-1.aspx

考察ASP.NET 2.0中的Membership, Roles, and Profile - Part 5

導言：

我們知道ASP.NET 2.0通過membership, roles,profile systems來創建和管理用戶帳戶。要為用戶提供登錄頁面的話，我們只需要拖一個Login Web控件到頁面即可.但如果我們想做一些用戶定制呢？我們可以重新配置Login控件，再另外添加一些內容；或者出除了用戶名和密碼外，我們還希望用戶提供email地址等，或者包含一個CAPTCHA(一些box，其text的背景為圖片).可以通過多種方式來對Login Web控件進行定制.比如，是否顯示"Remember me next time"， 顏色、字體等設置；我們還可以將控件轉換成一個模板(template);我們還可以為Authenticate event事件創建處理器，自定義認證邏輯，甚至使用CAPTCHA作為認證的一部分。

本文，我們將考察如何通過Login控件的屬性、通過模板來對其進行定制，通過Authentication事件處理器定制認證邏輯.

通過屬性定制Login控件

首先我們要創建一個登錄頁面，如果用戶嘗試訪問其未被授權的頁面或點擊LoginStatus控件的Login按鈕時就會自動的重新定位到該頁面。默認情況下，該頁面必須命名為Login.aspx，并放在根目錄下.當然如果你喜歡的話也可以使用其它的登錄URL，但是你需要在Web.config文件里的<authentication>節點里更新<forms>元素：

<?xml version="1.0"?>
<configuration xmlns=" http://schemas.microsoft.com/.NetConfiguration/v2.0 ">
<system.web>
...

<authentication mode="Forms">
<forms loginUrl="LoginPath" />
</authentication>

...
</system.web>
</configuration>

從工具欄拖該Login控件到我們創建的登錄頁面上，如下圖所示，Login控件默認包含如下的內容：

. 一個User Name TextBox
. 一個Password TextBox
. 一個"Remember me next time" CheckBox
. 一個"Log In" Button

此外，Login控件還有RequiredFieldValidators控件，以確保用戶輸入的User Name和Password不為空。另外，還有一個Literal控件用來顯示Login控件的FailureText屬性的值.

圖1

可以通過各種與style相關的屬性來美好Login控件的外觀。比如Font, BackColor, Width, Height等等.另外還可以通過TextBoxStyle, CheckBoxStyle,和LoginButtonStyle來設置Login控件內部的TextBoxes, CheckBox,和Button Web控件.

我們還可以改變其屬性。比如，想將 "User Name:"文本換成別的嗎？改動UserNameLabelText屬性即可；想在添加說明嗎？在InstructionText屬性設置即可；通過LoginButtonText屬性改變"Log In" Button的文本.通過HelpPageText 和 HelpPageUrl屬性來添加一個定位到幫助頁面的鏈接.而Orientation屬性決定了Login控件如何布局.下圖以及下載內容包含的Login控件演示了如何改變相關屬性的值來改變其外觀。

圖2

以上只是進行了一定程度的定制，要想進行更大程度的定制，我們必須將其轉變成一個模板。為此，切換到設計模式，在智能標簽里點"Convert to Template" 項。這將在Login控件的聲明代碼里添加一個 <LayoutTemplate>,包含一個HTML <table> ，其構造復制了默認的Login控件的布局.你想怎么調整布局都行，包括添加額外的內容和Web控件.

有一點很重要要記住，在模板里的某些登錄控件必須保留其原有的ID值。具體來說，<LayoutTemplate>里有2個控件的ID值為UserName和 Password,它們構成了ITextControl界面.另外，你可以使用你個人的自定義服務器控件或User Control，只要它們也可以執行這種界面.另外，你需要一個Button, LinkButton, 或ImageButton，其CommandName要設置為Login控件的LoginButtonCommandName靜態域(默認為"Login")，但其ID卻可以是任意值.Login控件轉變成模板時自動生成的其它控件都是可選的.

下面的聲明代碼是我對Login控件的<LayoutTemplate>調整后的布局：

<asp:Login ID="Login1" runat="server" BackColor="#F7F7DE" BorderColor="#CCCC99"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="10pt"

RememberMeSet="True">
<TitleTextStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<td align="center" rowspan="3" style="padding:15px; font-weight: bold; color:

white; background-color: #6b696b">
Log In
</td>
<td style="width:8px;"> </td>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server"

AssociatedControlID="UserName">User Name:</asp:Label></td>
<td>
<asp:TextBox ID="UserName" runat="server" TabIndex="1"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server"

ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is required."

ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
<td align="center" rowspan="3" style="padding:15px;">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"

ValidationGroup="Login1" TabIndex="4" />
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td align="right">
<asp:Label ID="PasswordLabel" runat="server"

AssociatedControlID="Password">Password:</asp:Label></td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"

TabIndex="2"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"

ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is required."

ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td colspan="2">
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time."

TabIndex="3" />
</td>
</tr>
</table>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True"

ValidationGroup="Login1"
ShowSummary="False" />
</LayoutTemplate>
</asp:Login>

心細的讀者可能已經注意到上面的布局忽略了FailureText Literal控件，該控件在用戶登錄失敗時顯示Login控件FailureText屬性的值。我決定在一個客戶端alert box里顯示該文本。為此，我將為Login控件的 LoginError事件創建處理器，編寫必要的JavaScript來展示該alert box。(在Part 4我們探討過該事件)

Protected Sub Login1_LoginError(ByVal sender As Object, ByVal e As System.EventArgs) Handles Login1.LoginError
'Display the failure message in a client-side alert box
ClientScript.RegisterStartupScript(Me.GetType(), "LoginError", _
String.Format("alert('{0}');", Login1.FailureText.Replace("'", "\'")), True)
End Sub

最后，請注意<table>標簽后的ValidationSummary控件的內容，我將ShowSummary 和 ShowMessageBox屬性做上述設置后，一旦輸入有誤(也就是說沒有輸入username 或password)時將顯示一個客戶端的alert box.下面的一個圖，alert box顯示用戶必須輸入username；而第二個圖片，用戶嘗試登錄，但輸入有誤.

圖3

圖4

定制認證邏輯

當用戶輸入完并點擊"Log In"按鈕時，緊接著發生如下的步驟:

1.發生頁面回傳
2.Login控件的LoggingIn事件觸發
3.Login控件的Authenticate事件觸發；它調用一個事件處理器以執行必要的邏輯，判斷用戶認證是否有效，若有 效則該事件處理器將傳入的AuthenticateEventArgs對象的Authenticated屬性設為True.
4.如果用戶認證失敗將引發LoginError事件，反之將引發LoggedIn事件

默認，Login控件在內部處理Authenticate事件，通過調用Membership class類的ValidateUser(username, password)方法來進行驗證。然而，我們可以對Login控件使用的驗證邏輯進行定制，我們可以自己創建該事件的事件處理器，如果通過驗證就將e.Authenticated屬性設為True；而未通過就設為False.

本例，我們不僅要驗證username 和 password,而且還有其email地址，以及一個CAPTCHA.我們知道CAPTCHA是一種人可以感知(而機器人程序無法感知)的技術.CAPTCHA通常為在一個圖片上顯示一些扭曲的文本，讓用戶輸入這些文本.計算機程序不能分析該圖片以及破解其中的文本，而只有人才可以輕松的做到。我用到的該CAPTCHA是eff Atwood的免費且優秀ASP.NET CAPTCHA server control控件.

要創建一個用戶自定義驗證邏輯示例，我們先將一個標準的Login控件轉變為一個模板，并添加一個名為Email的TextBox(附帶一個RequiredFieldValidator控件)，以及一個Jeff的CAPTCHA控件:

<asp:Login ID="Login1" ...>
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<td align="center" rowspan="5" style="padding:15px; font-weight: bold; color:

white; background-color: #6b696b">
Log In
</td>
<td style="width:8px;"> </td>
<td align="right">
<asp:Label Font-Bold="True" ID="UserNameLabel" runat="server"

AssociatedControlID="UserName">User Name:</asp:Label></td>
<td>
<asp:TextBox ID="UserName" runat="server" TabIndex="1"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server"

ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is required."

ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
<td align="center" rowspan="5" style="padding:15px;">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"

ValidationGroup="Login1" TabIndex="5" />
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td align="right">
<asp:Label Font-Bold="True" ID="PasswordLabel" runat="server"

AssociatedControlID="Password">Password:</asp:Label></td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"

TabIndex="2"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"

ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is required."

ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td align="right">
<asp:Label Font-Bold="True" ID="EmailLabel" runat="server"

AssociatedControlID="Email">Email:</asp:Label></td>
<td>
<asp:TextBox ID="Email" runat="server" TabIndex="3"></asp:TextBox>
<asp:RequiredFieldValidator ID="EmailRequired" runat="server"

ControlToValidate="Email"
ErrorMessage="Email is required." ToolTip="Email is required."

ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td align="right">
<b>Verification:</b>
</td>
<td>
<cc1:CaptchaControl id="CAPTCHA" runat="server" ShowSubmitButton="False"

TabIndex="3" LayoutStyle="Vertical"></cc1:CaptchaControl>
</td>
</tr>
<tr>
<td style="width:8px;"> </td>
<td colspan="2">
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time."

TabIndex="4" />
</td>
</tr>
</table>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True"

ValidationGroup="Login1"
ShowSummary="False" />
</LayoutTemplate>
</asp:Login>

接下來，我們將為Authenticate事件創建一個事件處理器.我們先檢查CAPTCHA是否有效，再用Membership.ValidateUser方法來確保用戶的username 和 password是有效的；再調用Membership.GetUser(username)方法，將Email屬性與用戶提供的做對比；如果有任何一項出錯，則將 e.Authenticated設為False，反之則設為True. 我對Login控件的FailureText屬性進行了更新，顯示用戶無法登錄的更具體的信息.

注意我們在<LayoutTemplate>里用LoginControl.FindControl("ID")方法來訪問控件(比如Email TextBox 或 CAPTCHA控件).

Protected Sub Login1_Authenticate(ByVal sender As Object, ByVal e As

System.Web.UI.WebControls.AuthenticateEventArgs) Handles Login1.Authenticate
'We need to determine if the user is authenticated and set e.Authenticated accordingly
'Get the values entered by the user
Dim loginUsername As String = Login1.UserName
Dim loginPassword As String = Login1.Password

'To get a custom Web control, must use FindControl
Dim loginEmail As String = CType(Login1.FindControl("Email"), TextBox).Text

Dim loginCAPTCHA As WebControlCaptcha.CaptchaControl = CType(Login1.FindControl("CAPTCHA"),

WebControlCaptcha.CaptchaControl)

'First, check if CAPTCHA matches up
If Not loginCAPTCHA.UserValidated Then
'CAPTCHA invalid
Login1.FailureText = "The code you entered did not match up with the image provided;

please try again with this new image."
e.Authenticated = False
Else
'Next, determine if the user's username/password are valid
If Membership.ValidateUser(loginUsername, loginPassword) Then
'See if email is valid
Dim userInfo As MembershipUser = Membership.GetUser(loginUsername)
If String.Compare(userInfo.Email, loginEmail, True) <> 0 Then
'Email doesn't match up
e.Authenticated = False
Login1.FailureText = "The email address you provided is not the email address on

file."
Else
'Only set e.Authenticated to True if ALL checks pass
e.Authenticated = True
End If
Else
e.Authenticated = False
Login1.FailureText = "Your username and/or password are invalid."
End If
End If
End Sub

做完這些修改后，該Login控件現在包含了用戶的email以及一個CAPTCHA，如下所示，只有當用戶提供正確的username, password, email address,CAPTCHA后才能正確登錄.

圖5

結語：

本文，我們看到了如何通過改變Login控件的配置或將其轉變為一個模板，來定制其外觀和布局.當轉變為模板后我們可以添加額外的Web控件，比如一個CAPTCHA.再為Login控件的Authenticate事件創建一個事件處理器,我們可以自定義驗證邏輯.

祝編程快樂！

附錄：

名詞解釋：CAPTCHA

(Completely Automated Public Turing test to tell Computers and Humans Apart ,全自動區分計算機和人類的圖靈測試)

CAPTCHA ——用以區分計算機和人類,在人機差別非常小的網絡上非常有效。它會生成一個隨機的圖片顯示給用戶。這個圖片含有一個不容易被計算機識別(OCR)的字符串,同時這個字符串在頁面的代碼及其他計算機可以獲取的地方被使用。如果表單提交的時候并不含有正確的字符串,系統就能夠確信輸入人員錄入錯誤或者不是一個真正的人在進行錄入。

沿著上述思路發展，除了圖象外，目前又出現了語音形式的驗證方法。

考察ASP.NET 2.0中的Membership, Roles, and Profile - Part 5