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

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

導(dǎo)言：

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

本文，我們將考察如何通過(guò)Login控件的屬性、通過(guò)模板來(lái)對(duì)其進(jìn)行定制，通過(guò)Authentication事件處理器定制認(rèn)證邏輯.

通過(guò)屬性定制Login控件

首先我們要?jiǎng)?chuàng)建一個(gè)登錄頁(yè)面，如果用戶(hù)嘗試訪問(wèn)其未被授權(quán)的頁(yè)面或點(diǎn)擊LoginStatus控件的Login按鈕時(shí)就會(huì)自動(dòng)的重新定位到該頁(yè)面。默認(rèn)情況下，該頁(yè)面必須命名為L(zhǎng)ogin.aspx，并放在根目錄下.當(dāng)然如果你喜歡的話(huà)也可以使用其它的登錄URL，但是你需要在Web.config文件里的<authentication>節(jié)點(diǎn)里更新<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控件到我們創(chuàng)建的登錄頁(yè)面上，如下圖所示，Login控件默認(rèn)包含如下的內(nèi)容：

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

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

圖1

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

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

圖2

以上只是進(jìn)行了一定程度的定制，要想進(jìn)行更大程度的定制，我們必須將其轉(zhuǎn)變成一個(gè)模板。為此，切換到設(shè)計(jì)模式，在智能標(biāo)簽里點(diǎn)"Convert to Template" 項(xiàng)。這將在Login控件的聲明代碼里添加一個(gè) <LayoutTemplate>,包含一個(gè)HTML <table> ，其構(gòu)造復(fù)制了默認(rèn)的Login控件的布局.你想怎么調(diào)整布局都行，包括添加額外的內(nèi)容和Web控件.

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

下面的聲明代碼是我對(duì)Login控件的<LayoutTemplate>調(diào)整后的布局：

<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>

心細(xì)的讀者可能已經(jīng)注意到上面的布局忽略了FailureText Literal控件，該控件在用戶(hù)登錄失敗時(shí)顯示Login控件FailureText屬性的值。我決定在一個(gè)客戶(hù)端alert box里顯示該文本。為此，我將為L(zhǎng)ogin控件的 LoginError事件創(chuàng)建處理器，編寫(xiě)必要的JavaScript來(lái)展示該alert box。(在Part 4我們探討過(guò)該事件)

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

最后，請(qǐng)注意<table>標(biāo)簽后的ValidationSummary控件的內(nèi)容，我將ShowSummary 和 ShowMessageBox屬性做上述設(shè)置后，一旦輸入有誤(也就是說(shuō)沒(méi)有輸入username 或password)時(shí)將顯示一個(gè)客戶(hù)端的alert box.下面的一個(gè)圖，alert box顯示用戶(hù)必須輸入username；而第二個(gè)圖片，用戶(hù)嘗試登錄，但輸入有誤.

圖3

圖4

定制認(rèn)證邏輯

當(dāng)用戶(hù)輸入完并點(diǎn)擊"Log In"按鈕時(shí)，緊接著發(fā)生如下的步驟:

1.發(fā)生頁(yè)面回傳
2.Login控件的LoggingIn事件觸發(fā)
3.Login控件的Authenticate事件觸發(fā)；它調(diào)用一個(gè)事件處理器以執(zhí)行必要的邏輯，判斷用戶(hù)認(rèn)證是否有效，若有 效則該事件處理器將傳入的AuthenticateEventArgs對(duì)象的Authenticated屬性設(shè)為T(mén)rue.
4.如果用戶(hù)認(rèn)證失敗將引發(fā)LoginError事件，反之將引發(fā)LoggedIn事件

默認(rèn)，Login控件在內(nèi)部處理Authenticate事件，通過(guò)調(diào)用Membership class類(lèi)的ValidateUser(username, password)方法來(lái)進(jìn)行驗(yàn)證。然而，我們可以對(duì)Login控件使用的驗(yàn)證邏輯進(jìn)行定制，我們可以自己創(chuàng)建該事件的事件處理器，如果通過(guò)驗(yàn)證就將e.Authenticated屬性設(shè)為T(mén)rue；而未通過(guò)就設(shè)為False.

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

要?jiǎng)?chuàng)建一個(gè)用戶(hù)自定義驗(yàn)證邏輯示例，我們先將一個(gè)標(biāo)準(zhǔn)的Login控件轉(zhuǎn)變?yōu)橐粋€(gè)模板，并添加一個(gè)名為Email的TextBox(附帶一個(gè)RequiredFieldValidator控件)，以及一個(gè)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>

接下來(lái)，我們將為Authenticate事件創(chuàng)建一個(gè)事件處理器.我們先檢查CAPTCHA是否有效，再用Membership.ValidateUser方法來(lái)確保用戶(hù)的username 和 password是有效的；再調(diào)用Membership.GetUser(username)方法，將Email屬性與用戶(hù)提供的做對(duì)比；如果有任何一項(xiàng)出錯(cuò)，則將 e.Authenticated設(shè)為False，反之則設(shè)為T(mén)rue. 我對(duì)Login控件的FailureText屬性進(jìn)行了更新，顯示用戶(hù)無(wú)法登錄的更具體的信息.

注意我們?cè)?lt;LayoutTemplate>里用LoginControl.FindControl("ID")方法來(lái)訪問(wèn)控件(比如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控件現(xiàn)在包含了用戶(hù)的email以及一個(gè)CAPTCHA，如下所示，只有當(dāng)用戶(hù)提供正確的username, password, email address,CAPTCHA后才能正確登錄.

圖5

結(jié)語(yǔ)：

本文，我們看到了如何通過(guò)改變Login控件的配置或?qū)⑵滢D(zhuǎn)變?yōu)橐粋€(gè)模板，來(lái)定制其外觀和布局.當(dāng)轉(zhuǎn)變?yōu)槟０搴笪覀兛梢蕴砑宇~外的Web控件，比如一個(gè)CAPTCHA.再為L(zhǎng)ogin控件的Authenticate事件創(chuàng)建一個(gè)事件處理器,我們可以自定義驗(yàn)證邏輯.

祝編程快樂(lè)！

附錄：

名詞解釋?zhuān)篊APTCHA

(Completely Automated Public Turing test to tell Computers and Humans Apart ,全自動(dòng)區(qū)分計(jì)算機(jī)和人類(lèi)的圖靈測(cè)試)

CAPTCHA ——用以區(qū)分計(jì)算機(jī)和人類(lèi),在人機(jī)差別非常小的網(wǎng)絡(luò)上非常有效。它會(huì)生成一個(gè)隨機(jī)的圖片顯示給用戶(hù)。這個(gè)圖片含有一個(gè)不容易被計(jì)算機(jī)識(shí)別(OCR)的字符串,同時(shí)這個(gè)字符串在頁(yè)面的代碼及其他計(jì)算機(jī)可以獲取的地方被使用。如果表單提交的時(shí)候并不含有正確的字符串,系統(tǒng)就能夠確信輸入人員錄入錯(cuò)誤或者不是一個(gè)真正的人在進(jìn)行錄入。

沿著上述思路發(fā)展，除了圖象外，目前又出現(xiàn)了語(yǔ)音形式的驗(yàn)證方法。

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