演练:ASP.NET控件实现 创建具有成员资格和用户登录功能的网站

纠结了几天终于在微软的网站上见到了这个堪称救命的网页,原文链接:http://msdn.microsoft.com/zh-cn/library/879kf95c(v=vs.100).aspx

网站的一个典型要求是,只允许某些用户(经过身份验证的用户)查看特定的页面。 在此情况下,网站通常会为用户提供用来登录和进行身份验证的方法以及对匿名用户(未登录用户)隐藏信息的方法。

注意

如果您使用一个 Web 项目模板在 Microsoft Visual Studio 2010 中创建 Web 应用程序,则该模板将包括使用登录控件和 ASP.NET 成员资格来实现基本登录功能的页面。 但是,该模板不包括本演练中描述的所有功能。 如果该模板不包括您所需的功能,或者您想自行创建成员资格系统,则您可使用该模板中的相同 ASP.NET 控件来创建自定义登录页和成员资格页。

本演练演示如何手动将这些 ASP.NET 控件和 ASP.NET 成员资格服务放在一起,来创建验证用户身份并对匿名用户隐藏信息的应用程序。 有关如何使用网站项目模板的信息,请参见演练:使用基本用户登录功能创建 ASP.NET 网站

本演练演示以下任务:

  • 创建网站。

  • 创建对所有用户可访问的主页。

  • 创建登录页。

  • 创建成员专用页面。

  • 配置成员资格。

  • 添加新用户(成员)。

  • 允许用户更改其密码。

  • 允许用户重置忘记的密码。

系统必备

为了完成本演练,您需要:

  • 在计算机上安装 Visual Studio 2010 或 Visual Web Developer 2010 学习版。

  • 计算机上本地安装的 SQL Server Express。

  • 对可转发电子邮件的电子邮件服务器的访问权。 (服务器不需要能够接收消息)。如果您无权访问电子邮件服务器,则可运行本演练中的过程,但您将无法使用密码恢复功能。

创建网站

若要创建自定义用户登录页,您首先需要创建一个空白网站。

本演练使用网站项目。 您可以改用 Web 应用程序项目。 有关这些 Web 项目类型之间的差异的信息,请参见 Web 应用程序项目与网站项目

创建网站

  1. 启动 Visual Studio 2010 或 Visual Web Developer 2010 学习版。

  2. “文件”菜单上单击“新建网站” (如果看不到此选项,请单击“新建”,然后单击“网站”。)

    显示“新建网站”对话框。

  3. “已安装的模板”下,单击“Visual Basic”“Visual C#”,然后选择“ASP.NET 空网站”

    您需要选择一个空白网站模板,因为您将手动添加成员资格和登录功能,而不是使用其他模板中内置的功能。

  4. “Web 位置”列表框中,选择“文件系统”,然后输入要在其中保存网站页面的文件夹的名称。 例如,输入文件夹名称 C:\Websites\Membership,然后单击“确定”

Visual Studio 将创建一个仅包含 Web.config 文件的空白网站。

创建主页

您首先需要创建网站的主页,网站的所有用户都将从这里开始。

创建主页

  1. “解决方案资源管理器”中右击网站项目的名称,然后单击“添加新项”

    显示“添加新项”对话框。

  2. 如果未显示“解决方案资源管理器”窗口,请选择“视图”菜单,然后单击“解决方案资源管理器”

  3. 选择“Web 窗体”,接受默认名称 (Default.aspx),然后单击“添加”

  4. 切换到“设计”视图并添加文本(如“我的主页”)。

  5. “格式”工具栏中,使用“块格式”下拉列表将该文本的格式设置为“标题 1”

创建登录页

作为网站的一部分,您必须建立用户标识(验证用户身份),以便网站可以根据用户身份执行操作(如显示或隐藏信息)。 若要获取用户标识,则必须让用户登录。 因此,您的网站必须包含登录页。

创建登录页

  1. “解决方案资源管理器”中右击网站项目的名称,然后单击“添加新项”

  2. 选择“Web 窗体”,将默认名称更改为 Login.aspx,然后单击“添加”

    注意

    在本演练中,该页名称必须为 Login.aspx。 默认情况下,将 ASP.NET 身份验证配置为使用具有该名称的页面。 (虽然在本演练中不会这样做,但是可以更改 Web.config 文件中的默认登录页。)

  3. 在 Login.aspx 页中,切换到“设计”视图。

  4. 向页面中添加文本(如“登录页”),并再次使用“块格式”将标题的格式设置为“标题 1”

  5. 按 Enter 创建新段落。

  6. “工具箱”“登录”组中,将 Login 控件拖动到新段落。

    Login 控件是一个提示用户输入凭据并进行验证的单个控件。 如果需要,您可以使用智能标记面板上的“自动套用格式”链接将格式应用于 Login 控件。

显示详细的登录错误

Login 控件包括验证以帮助用户输入正确的信息。 例如,如果用户跳过密码,则验证程序控件在“密码”文本框旁边显示星号 (*)。 若要提供有关页面中错误的更多详细信息,您需要添加 ValidationSummary 控件。

显示详细的登录错误

  1. “工具箱”“验证”组中,将 ValidationSummary 控件拖动到 Login.aspx 页面上。 将 ValidationSummary 放在 Login 控件下。

  2. 在 ValidationSummary 控件的“属性”窗口中,将 ValidationGroup 属性设置为 Login1(以前添加的 Login 控件的 ID)。

    (如果未显示“属性”窗口,请单击“视图”菜单上的“属性窗口”。)

  3. 保存和关闭该页。

现在可以测试登录页。

测试登录页

  1. “解决方案资源管理器”中,右击 Login.aspx 页,然后选择“在浏览器中查看”

  2. 在不向登录控件中输入任何内容的情况下,单击“登录”

    “用户名”框和“密码”框的旁边会显示星号,因为您未为这些字段输入值。 另外,ValidationSummary 控件将显示错误消息,其中提供了有关页面上的错误的详细信息。

  3. 关闭浏览器。

显示有关登录用户的信息

下一步是修改主页以根据用户是否登录来自定义显示内容。 匿名用户将看到一条邀请他们登录的一般消息。 登录用户将看到一条包含他们的用户名的欢迎消息。

自定义登录用户的显示

  1. 切换到或打开 Default.aspx 页,然后切换到“设计”视图。

  2. “工具箱”“登录”组中,将 LoginView 控件拖动到页面上。

    显示 LoginView 控件,并打开其“AnonymousTemplate”模板。 该模板使您可以定义用户在登录前将看到的内容。

  3. 单击 LoginView 控件的编辑区域以激活编辑。

  4. 在 LoginView 控件的“AnonymousTemplate”模板的编辑区域中,输入“您尚未登录,请单击登录链接以登录。”。

    下图显示了包含文本的 LoginView 控件编辑区域。

    与将文本直接输入编辑区域中相比,复制文本并将其粘贴到编辑区域中或在“源”视图中将文本添加为标记可能更容易一些。 下面的示例演示文本在标记中的显示方式。

    
          
              You are not logged in. Click the Login link to sign in. 
             
    
    
  5. “设计”视图中,选择 LoginView 控件,然后在“LoginView 任务”面板上的“视图”列表中,单击“LoggedInTemplate” 如果未显示“LoginView 任务”面板,请右击 LoginView 控件的标题,然后单击“显示智能标记”

    “LoggedInTemplate”定义将为已登录的用户显示的内容。

  6. 单击 LoginView 控件的编辑区域以激活编辑,然后输入以下文本“您已登录,欢迎您”。

  7. 将光标放在“LoggedInTemplate”的编辑区域中您刚添加的文本后面。 “工具箱”“登录”组中,双击 LoginName 控件。 LoginName 控件将显示已登录用户的名称。

  8. “工具箱”“登录”组中,将 LoginStatus 控件拖入页面中。 当用户未登录时,LoginStatus 控件将显示“登录”链接。 当用户登录时,该控件将显示“注销”超链接。

  9. 保存页。

创建成员专用页面

测试链接

  1. “解决方案资源管理器”中,右击 Default.aspx 页,然后单击“在浏览器中查看”

  2. 单击“成员专用页面”

    显示成员专用页面,因为它尚未受到保护。 (此外,由于默认情况下 ASP.NET 使用的是 Windows 身份验证,因此它会认为您使用 Windows 凭据进行登录。)

  3. 关闭浏览器。

配置成员资格

下一步是配置 ASP.NET 成员资格并设置用户。 为此,可以使用网站管理工具,该工具提供了一个用于配置设置的类似向导的界面。 完成配置之后,在项目的 App_Data 文件夹中创建一个名为 ASPNETDB.MDF 的 SQL Server 数据库。 该数据库包含此网站的成员资格信息。

在本演练中,定义单个用户。

创建成员资格用户

  1. “网站”菜单上单击“ASP.NET 配置”

  2. 选择“安全”选项卡,单击“使用安全设置向导按部就班地配置安全性”链接,然后单击“下一步”

    向导会显示一个页,您可以在其中选择网站将使用的身份验证方法。

  3. 选择“通过 Internet”选项。

    此选项指定您的网站将使用依赖于 ASP.NET 成员资格系统的 ASP.NET Forms 身份验证。 当您使用 Forms 身份验证时,用户将使用您在本演练的前面部分中创建的登录页登录到网站。 “通过局域网”选项可将网站配置为使用 Windows 身份验证,这在只有企业网络中的人员才能访问您的网站的情况下很实用。 如前所述,这是 ASP.NET 成员资格的默认设置。)

  4. 单击“下一步”

    该向导指示将应用程序配置为使用高级提供程序设置。 默认情况下,成员资格信息存储在网站上的 App_Data 文件夹的 Microsoft SQL Server 数据库文件中。

  5. 单击“下一步”

  6. 清除“为此网站启用角色”复选框,再单击“下一步”

    该向导显示一页,您可以在该页中创建新用户。

  7. 输入定义网站用户的信息。 请使用下面的值作为参考。 (可以使用您所需的任何值,但要确保记下您输入的条目。 稍后将在本演练中使用这些条目。)

    • User Name    您的名称(不能有空格)或一个示例名称。

    • Password    一个密码。 需要严格的密码(该密码包括大写和小写字母以及标点,且长度至少为八个字符)。

    • E-mail    您的个人电子邮件地址。 如果您必须重置您的密码,则此电子邮件地址将用于向您发送新的密码。 因此,您需要输入一个有效的电子邮件地址。

    • Security Question 和 Security Answer   输入可在以后需要重置密码时使用的问题和答案。

  8. 选中“活动用户”复选框。

  9. 单击“创建用户”

    该向导显示确认页。

    注意

    使网站管理工具保持打开状态。

为成员页设置访问规则

在本演练的前面部分,您创建了一个名为 MemberPages 的文件夹,并添加了一个成员专用页面。 在演练的此部分中,将创建一条规则,确保只有登录用户才可以访问该文件夹中的页面。

设置访问规则

  1. 在网站管理工具的安全向导中,单击“下一步”

    该向导将显示“添加新访问规则”页。

  2. “添加新访问规则”框中,展开网站的节点。

  3. 选择“MemberPages”,即前面创建的文件夹。

  4. “规则应用于”之下选择“匿名用户”

  5. “权限”之下选择“拒绝”

    您所创建的规则会拒绝匿名用户(即没有登录的用户)的访问。

  6. 单击“添加此规则”

    新的规则显示在网格中。 当用户请求 MemberPages 文件夹中的页面时,即会检查该规则以确定是否允许该用户访问该页面。

  7. 单击“完成”

现在已完成该向导。 该向导关闭并返回到网站管理工具的“安全”选项卡。

测试成员专用页面

可以通过以匿名用户身份或登录用户身份访问成员专用页面,来测试此页面。

测试成员专用页面

  1. 在 Visual Studio 中,切换到 Default.aspx 页,然后按 Ctrl+F5 运行网站。

  2. Default.aspx 页显示在浏览器中时,不要登录。 而是单击“成员专用页面”链接。

    将显示 Login.aspx 页,这是因为拒绝匿名用户访问成员页面。

  3. 在登录页上,输入您之前用来创建用户的用户名和密码进行登录。

    在您登录时,网站会将您重定向到成员专用页面,因为您不再是匿名用户。

  4. 关闭浏览器窗口。

添加新用户

在本演练的前面部分中,已使用网站管理工具创建用户。 如果使用的是一个小的已定义的用户列表(例如,为较小的团队创建用户时),则网站管理工具非常有用。 但在很多网站中,用户可自己注册。 为了支持此功能,ASP.NET 包括 CreateUserWizard 控件,该控件执行的任务与您在前面使用网站管理工具执行的任务相同。

创建注册页

在演练的本部分中,将添加一个允许用户在网站上注册的功能。 首先将创建一个注册页。

创建注册页

  1. “解决方案资源管理器”中右击网站项目的名称,然后单击“添加新项”

  2. 添加一个名为 Register.aspx 的新“Web 窗体”,然后单击“添加”

    注意

    请确保在网站的根目录中创建该页,而不是在 MemberPages 文件夹中。

  3. 在 Register.aspx 页上,切换到“设计”视图并在页面上输入文本(如“注册”)。 “格式”工具栏中,使用“块格式”下拉列表将该文本的格式设置为“标题 1”

  4. “工具箱”“登录”组中,将 CreateUserWizard 控件拖动到页面上。

  5. 在 CreateUserWizard 控件的“属性”窗口中,将 ContinueDestinationPageUrl 属性设置为 ~/Default.aspx

    这将配置该控件,以便创建用户之后用户单击“继续”时可以返回到主页。

  6. “工具箱”“标准”组中,将 HyperLink 控件拖动到页面上。

  7. 在 HyperLink 控件的“属性”窗口中,执行以下操作:

    • 将 Text 属性设置为“主页”。

    • 将 NavigateUrl 属性设置为 ~/Default.aspx

  8. 保存和关闭该页。

现在,您将添加一个链接,该链接会将注册页同时显示给主页和登录页。 在本演练中,假定只向未登录的用户显示注册链接。

在主页上创建注册链接

  1. 切换到或打开 Default.aspx 页。

  2. 右击以前添加的 LoginView 控件,然后单击“显示智能标记”

  3. “LoginView 任务”面板中选择“视图”列表中的“AnonymousTemplate”,以激活匿名模板中的编辑。

  4. “工具箱”“标准”组中,将 HyperLink 控件拖动到匿名模板上。 将光标放在编辑区域中,然后双击“工具箱”中的 HyperLink 控件可能更容易一些。

  5. 在 HyperLink 控件的“属性”窗口中,执行以下操作:

    1. 将 Text 属性设置为“注册”。

    2. 将 NavigateUrl 属性设置为 Register.aspx

  6. 切换到或打开 Login.aspx 页。

  7. “工具箱”“标准”组中,将 HyperLink 控件拖入页面中。

  8. 在 HyperLink 控件的“属性”窗口中,执行以下操作:

    1. 将 Text 属性设置为“注册”。

    2. 将 NavigateUrl 属性设置为 Register.aspx。

    现在可以测试注册过程。

测试注册

  1. 切换到 Default.aspx 页,然后按 Ctrl+F5 运行网站并显示 Default.aspx 页。

    因为尚未登录,所以显示“注册”链接。

  2. 单击“注册”链接。 显示注册页。

  3. 在框中,输入新的用户名、强密码、电子邮件地址和安全提示问题和答案。 (所有的这些信息均为必选。)

  4. 单击“创建用户” 显示确认消息。

  5. 单击“继续”

    以登录用户的身份返回到主页。 请注意,“登录”链接已更改为“注销”,而且 Login 控件中显示的信息来自“LoggedInTemplate”属性,而不是来自“AnonymousTemplate”属性。

  6. 单击“注销”链接。页面更改为显示适用于匿名用户的信息。

  7. 单击“登录”链接。

  8. 输入刚才创建的用户的凭据。以新用户的身份登录。

  9. 关闭浏览器窗口。

允许用户更改其密码

有时候用户想要更改密码,但是手动执行该任务通常不太实际。 可以使用另一个 ASP.NET 控件使用户可以自己更改密码。 若要更改密码,则用户必须知道现有密码。

您将添加一个页面,登录用户可以在此页面更改其密码。

创建密码更改页

  1. “解决方案资源管理器”中,右击 MemberPages 文件夹,单击“添加新项”,再添加一个新的“Web 窗体”,将其命名为 ChangePassword.aspx,然后单击“添加”

    确保在 MemberPages 文件夹中创建页。 将该页放置到 MemberPages 文件夹,因为只有登录用户才可以更改其密码。

  2. 在 ChangePassword.aspx 页上,切换到“设计”视图并输入文本(如“更改密码”),然后将其格式设置为“标题 1”

  3. “工具箱”“登录”组中,将 ChangePassword 控件拖动到页面上。

  4. 在 ChangePassword 控件的“属性”窗口中,将 ContinueDestinationPageUrl 属性设置为 ~/Default.aspx

    这将配置该控件,以便用户在更改密码后单击“继续”时可以重定向到主页。

  5. 保存和关闭该页。

在主页上创建密码更改链接

现在可以添加一个指向主页的链接,该主页显示 ChangePassword.aspx 页。 将使该链接只对登录用户可用。

在主页上创建密码更改链接

  1. 切换到或打开 Default.aspx 页。

  2. 右击 LoginView 控件,然后单击“显示智能标记”

  3. “LoginView 任务”窗格中的“视图”列表中,单击“LoggedInTemplate”

    这将把 LoginView 控件切换到向已登录用户显示的内容的编辑模式。

  4. “工具箱”“标准”组中,将 HyperLink 控件拖动到编辑区域。

  5. 在 HyperLink 控件的“属性”窗口中,执行以下操作:

    1. 将 Text 属性设置为“更改密码”。

    2. 将 NavigateUrl 属性设置为 ~/MemberPages/ChangePassword.aspx

测试更改密码页

现在可以测试密码更改过程。

测试更改密码页

  1. 按 Ctrl+F5 以运行网站。

  2. 在 Default.aspx 页上单击“登录”链接,并以已创建的用户的身份登录。

    完成之后,以登录用户的身份返回到主页。

  3. 单击“更改密码”链接。

  4. 在密码更改页,输入旧密码和新密码,然后单击“更改密码”

  5. 单击“继续”

  6. 在主页上单击“注销”

  7. 单击“Login”

  8. 使用新密码登录。

  9. 关闭浏览器。

允许用户重置其密码

当用户忘记其密码时,网站可允许他们恢复或重置其密码。 如果未对密码进行哈希处理,则可以恢复密码(即发送给用户)。

若已对密码进行哈希处理,则成员资格系统将不存储实际密码。 相反,该系统将使用为密码生成唯一值的单向算法(哈希算法)来处理密码,然后再存储此哈希值。 可重复使用此算法以在登录时测试用户密码,但无法反过来生成实际密码。 这将提高成员资格数据库的安全性,因为获取对数据库的访问权并不意味着公开密码。

默认情况下,成员资格提供程序会将密码存储为哈希值。 因此,无法恢复密码。 相反,如果用户忘记了密码,则网站必须生成一个新的密码,并通过电子邮件将该密码发送给用户。 为了方便网站发送电子邮件,您的计算机必须具有对简单邮件传输协议 (SMTP) 服务器的访问权限。

在此过程中,您将向您的网站中添加一个密码重置页,并会将网站配置为通过电子邮件向用户发送新密码。 若要重置密码,用户必须提供用户名,并且必须回答其在注册时所提供的安全问题。 系统会将新密码发送到用户在注册时提供的电子邮件地址。

创建密码重置页

  1. “解决方案资源管理器”中右击网站项目的名称,然后单击“添加新项”

  2. 添加一个新的“Web 窗体”页,将其命名为 PasswordRecovery.aspx,然后单击“添加”

    注意

    请确保在网站的根目录中创建该页,而不是在 MemberPages 文件夹中。

  3. 在 PasswordRecovery.aspx 页中,切换到“设计”视图,并在页面中输入文本(如“忘记密码”),然后将其格式设置为“标题 1”

  4. “工具箱”“登录”组中,将 PasswordRecovery 控件拖动到页面上。

  5. 打开或切换到 Login.aspx 页,然后切换到“设计”视图。

  6. “工具箱”“标准”组中,将 HyperLink 控件拖动到页面上。

  7. 将 Text 属性设置为“忘记密码”,并将 NavigateUrl 属性设置为 ~/PasswordRecovery.aspx

将网站配置为使用 SMTP 服务器

下一步,您将网站配置为使用 SMTP 服务器。 若要正确配置服务器,您必须掌握安装信息。 如果服务器需要身份验证,则您需要用户名和密码。 有关如何获取此安装信息的信息,请与系统管理员联系。 在确定如何访问 SMTP 服务器之后,必须配置网站将电子邮件路由到该服务器。 可在网站管理工具中或通过在网站的 Web.config 文件中生成项来完成上述操作,该文件包含一系列确定应用程序运行方式的设置。 下面的过程演示如何使用 ASP.NET 网站管理工具来执行此任务。

将网站配置为使用 SMTP 服务器

  1. “网站”菜单上单击“ASP.NET 配置”

  2. 在网站管理工具中,单击“应用程序”选项卡。

  3. “SMTP 设置”下单击“配置 SMTP 电子邮件设置” 该工具显示一页,您可以在该页中配置电子邮件。

  4. 输入页面提示您输入的信息。

  5. 单击“保存”,然后在确认页中单击“确定”

    网站管理工具将创建一个 Web.config 文件,其中包含您在 mailSettings 部分中进行的设置。

  6. 关闭显示网站管理工具的浏览器窗口。

  7. 打开 Web.config 文件。

  8. 在 system.net 元素和 mailSettings 元素下,验证 smtp 和 host 设置。

    注意

    如果您的 SMTP 服务器需要一个安全连接,则您必须将 enableSsl 特性设置为 true 在 Web.config 文件中的 smtp 元素的 network 部分中执行此操作。

    Web.config 文件中的 SMTP 设置类似于下面的示例。

    
      
        
            
        
      
    
    
    安全说明

    若要保护配置信息(如用户名和密码),您可让 ASP.NET 对存储 SMTP 信息的 Web.config 文件部分进行加密。 有关更多信息,请参见使用受保护的配置加密配置信息 另外,默认情况下,ASP.NET 将以明文形式发送 smtp 服务器凭据,而记录网络活动的程序可截获这些凭据。 对于生产站点,您应使用 SSL(安全套接字层)对与服务器交换的敏感信息进行加密。

测试密码重置

现在可以测试密码重置过程。 然后使用新密码进行登录。

测试密码重置页

  1. 按 Ctrl+F5 以运行网站。

  2. 单击“Login”

  3. 在登录页上,单击“忘记密码”链接。 输入您的用户名,然后单击“提交”

  4. 输入安全问题的答案,然后单击“提交”

  5. 请稍候几分钟,然后检查您的电子邮件。

  6. 使用新密码进行登录。

后续步骤

本演练阐释了一个简单而完整的创建应用程序的方案,该应用程序提示用户输入凭据、向登录用户显示信息、限制对页面的访问以及允许用户重置忘记的密码。

可以使用本演练中阐释的技术和控件创建更复杂的页面和应用程序。 例如,您可能希望执行下列操作:

  • 创建其他用户和定义角色(组)(如“managers”、“sales”或“members”),并将用户分配到不同角色。 有关详细信息,请参见演练:通过角色管理网站用户

  • 更改登录控件的外观。 Login PasswordRecovery 和 CreateUserWizard 控件都支持模板,这些模板允许您配置其包含的文本和按钮并自动设置它们的格式。

  • 将成员资格与配置文件属性组合,这将使您可以为每个用户存储特定于用户的设置。 有关详细信息,请参见演练:用配置文件属性维护网站用户信息

  • 向 ASP.NET 母版页中添加登录控件。 母版页使您可以定义页布局,该页布局可以用于应用程序中的所有页面。 有关详细信息,请参见演练:在 Visual Web Developer 中创建和使用 ASP.NET 母版页

原文链接:http://msdn.microsoft.com/zh-cn/library/879kf95c(v=vs.100).aspx

你可能感兴趣的:(ASP.NET)