用户注册登录模块设计.ppt

动态网页设计教程美工与技术,徐延章 编著,第14章 用户注册登录模块设计数据连接的建立,Company Logo,第14章 用户注册登录模块设计数据连接的建立,用户登录及管理是任何功能网站应用程序中必备的功能，是系统安全的重要组成部分，本章介绍用户注册登录模块的设计。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,第14章 用户注册登录模块设计数据连接的建立,动态网页设计教程美工与技术,机械工业出版社,14.1 用户界面的设计,1,14.2 数据库的设计,2,14.3 用户注册设计,3,14.4 用户登录设计,4,14.5 用户界面的美化,5,Company Logo,14.1 用户界面的设计,用户注册登录功能是任何功能性网站应用程序的必要组成部分，因此用户注册登录界面也必然是网页美工设计课题。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.1.1 美工的界面设计,网页登录的界面中一般提供用户名和密码的输入框、登录和注册按钮等选项，如图所示是作者主持设计并开发主持的一个网络办公自动化系统的界面。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.1.1 美工的界面设计,网易邮箱登录的界面提供了简洁的造型，将用户名、密码、登录等清晰地展示出来。从美工设计而言，可以采用满版式的登录页面，也可以加入到网页中，形成登录版块。除了整体的界面效果外，文本框与按钮的设计往往成为设计的焦点。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.1.1 美工的界面设计,动态网页设计教程美工与技术,机械工业出版社,注册界面中一般包含用户名、密码之类的一些信息输入项与性别之类的选择项，用于获取用户的信息。其中，用户名和密码是必备的内容，在设计时可根据情况进行分类，如基本信息、其他信息等，并将必填的信息加以标识，通常用红色*表示，网易邮箱注册的界面。在设计注册界面时，往往需要注意的是界面的清晰美观、层次清楚，而切忌用大量的图片和动画效果。,Company Logo,14.1.2 技术如何实现,对于注册界面，技术实现主要是采用在表格布局的基础上安排控件，然后用CSS样式控制界面的美工，对于满版的登录界面，可以采用背景图片的方式，再用表格安排登录控件，也可以采用切片的方式，进行布局。其中按钮的设计可以用ImageButton控件实现，也可以通过CSS样式修改普通按钮进行更改。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.2 数据库的设计,根据需求进行数据库的设计，新建数据库UserDB，在数据库中新建表格users用来存放用户信息，其中用户名（username）和密码（password）是必备的字段。选择表分支，单击鼠标右键，新建表。设计指导：输入ID字段名后，选择数据类型为int，在列属性中，设置标识规范为是，这样该字段就能够自动编号（即第一条记录ID值为1，每增加一条记录，ID值自动加1），从而能够可以作为记录的识别编号。单击工具栏中的设置为主键按钮，将该字段作为主键，这样能够提高数据检索的速度，后面表的设计中同样参考这种思路。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.2 数据库的设计,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3 用户注册设计,用户注册功能的设计主要包括注册界面的设计、用户信息的合法性检查、重名的检测和用户数据的插入数据库操作。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.1 用户注册界面设计,首先在D盘新建网站myaspnet-6。打开Default.aspx网页，切换到设计视图，输入响应的文字，拖动相应的控件到界面中，设计效果。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.2 用户信息的提交,在用户注册中，我们先实现注册的基本功能，即把用户信息插入到数据库中。这里先实现插入记录操作，而不做信息合法性验证，验证部分在后面的程序设计中逐步完善。双击注册按钮，进入程序代码视图中，首先在引用部分添加对数据库命名空间的引用：using System.Data.SqlClient;/调用数据库命名空间然后在按钮的Button1_Click事件中编写注册代码，主要是进行数据库连接，获取用户信息，定义SQL语句，执行SQL命令，显示提示信息，程序代码如下：,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.2 用户信息的提交,protected void Button1_Click(object sender,EventArgs e)/定义连接字符串 String constr=server=(local);database=UserDB;User ID=sa;pwd=111111;/定义连接对象 SqlConnection conn=new SqlConnection(constr);/打开连接 conn.Open();/定义性别 String sex=男;/判断性别选项,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.2 用户信息的提交,if(RadioButton2.Checked)sex=女;/定义sql语句 String sqlstr=insert into Users(UserName,Password,Name,Sex,Email)values(+TextBox1.Text+,+TextBox2.Text+,+sex+,+TextBox4.Text+,+TextBox5.Text+);/定义命令 SqlCommand cmd=new SqlCommand(sqlstr,conn);/执行命令 cmd.ExecuteNonQuery();/显示信息 Label1.Text=恭喜你，注册成功;/关闭连接 conn.Close();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.2 用户信息的提交,调试程序，输入相应信息，单击注册按钮，显示注册成功，。打开SQL Server 2005，显示数据表Users中的记录，我们发现信息已经插入到数据表中。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,前面完成了基本功能记录的插入，下面对程序功能进行完善，对用户名进行重名的检测和用户数据信息进行验证。对于用户名重名的检测，应该放在后台程序中进行判断，而对于用户信息的完整性、正确性可以在前台利用验证控件进行检测。因此，在用户注册界面中，添加验证控件，并设置相应的验证属性。其中关于用户名、密码、确认密码需要进行信息长度的验证，可以选择验证控件进行自定义方式，设置标准表达式为（Custom），定义“密码、确认密码”验证表达式为w6,18，即6-18个字符。定义“用户名”验证表达式为a-z|A-Zw5,17，即以字母开头，6-18个字符。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,在按钮的Button1_Click事件中修改注册代码，主要是先进行用户名重名的验证，即把用户输入的用户名作为查询条件，进行查询，如果存在记录表示用户名已存在，需要重新选择。如果没有记录，表示用户名可用，可以进行注册（插入记录），程序代码如下：,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,protected void Button1_Click(object sender,EventArgs e)/定义连接字符串 String constr=server=(local);database=UserDB;User ID=sa;pwd=111111;/定义连接对象 SqlConnection conn=new SqlConnection(constr);/打开连接 conn.Open();/以用户输入的用户名为条件进行查询 String sqlstr=select*from Users where UserName=+TextBox1.Text.Trim()+;SqlCommand cmd=new SqlCommand(sqlstr,conn);SqlDataReader reader=cmd.ExecuteReader();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,if(reader.Read()/如果阅读器能读，说明有记录存在，即存在同名的用户名 Label1.Text=用户名已存在，请更换！;/关闭阅读器 reader.Close();else/不能读，说明该用户名可用/务必先关闭阅读器，否则不能执行下面的命令 reader.Close();/定义性别 String sex=男;/判断性别选项,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,if(RadioButton2.Checked)sex=女;/定义sql语句 sqlstr=insert into Users(UserName,Password,Name,Sex,Email)values(+TextBox1.Text+,+TextBox2.Text+,+sex+,+TextBox4.Text+,+TextBox5.Text+);/定义命令 cmd=new SqlCommand(sqlstr,conn);/执行命令 cmd.ExecuteNonQuery();/显示信息 Label1.Text=恭喜你，注册成功;/关闭连接 conn.Close();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,上面代码中需要注意的是，执行查询用户名后，务必关闭阅读器对象，即reader.Close()，否则后面等SQL命令不能执行。调试程序，输入相应信息，显示验证的信息，输入正确信息，验证错误的信息消失。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.3.3 用户名的检测与信息验证,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4 用户登录设计,用户登录功能的设计主要包括登录界面的设计、用户身份的验证以及防止注入性攻击需要注意的问题。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.1 用户登录界面设计,新建网页login.aspx，设计登录界面。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.2 用户名登录的验证,用户登录验证主要是根据用户名和密码进行数据查询，如果有该记录，表示用户合法，否则提示错误信息。双击登录按钮，编写程序代码如下：protected void Button1_Click(object sender,EventArgs e)/定义连接，打开连接 String constr=server=(local);database=UserDB;User ID=sa;pwd=111111;SqlConnection conn=new SqlConnection(constr);conn.Open();/定义命令与命令对象 String sqlstr=select*from Users where UserName=+TextBox1.Text.Trim()+and Password=+TextBox2.Text.Trim()+;SqlCommand cmd=new SqlCommand(sqlstr,conn);,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.2 用户名登录的验证,/定义阅读器接收结果输出 SqlDataReader reader=cmd.ExecuteReader();/判断是否存在用户 if(reader.Read()Label1.Text=登录成功;else Label1.Text=用户名或密码错误;/关闭阅读器与连接 reader.Close();conn.Close();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.2 用户名登录的验证,调试程序，输入用户名与密码，如果正确显示登录成功，错误提示用户名或密码错误。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,下面考虑一下安全性的问题，SQL语句存在注入式攻击的问题，原因是用户输入的信息可以作为语句被执行，下面我们进行这样一个测验。打开登录网页，调试程序，输入用户名为 or 1=1 or a=a，密码为asdfasdf(任意字符)，然后单击登录按钮，显示登录成功。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,我们来分析一下程序的问题：原来的sql语句：select*from Users where UserName=+TextBox1.Text.Trim()+and Password=+TextBox2.Text.Trim()+;现在的sql语句：select*from Users where UserName=or 1=1 or a=a and Password=asdfasdf;其中“or 1=1 or”之间的“1=1”是一个永远成立的条件，相当于无条件查询，因此能获得所有记录，也就是说找到了相应的用户，这样是非常危险的，解决方案是采用参数方式进行编程，参数中的内容被认为是普通字符，不再担任sql命令中的角色。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,修改程序如下：protected void Button1_Click(object sender,EventArgs e)/定义连接，打开连接 String constr=server=(local);database=UserDB;User ID=sa;pwd=111111;SqlConnection conn=new SqlConnection(constr);conn.Open();/注释原来的两句命令/String sqlstr=select*from Users where UserName=+TextBox1.Text.Trim()+and Password=+TextBox2.Text.Trim()+;/SqlCommand cmd=new SqlCommand(sqlstr,conn);,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,/换成下面的参数方式/新建命令对象 SqlCommand cmd=conn.CreateCommand();/定义命令语句，语句中的变量用参数写 cmd.CommandText=SELECT*FROM Users WHERE(UserName=UserName and Password=Password);/为命令添加参数，并为参数赋值 cmd.Parameters.Add(UserName,SqlDbType.NVarChar).Value=TextBox1.Text.Trim();cmd.Parameters.Add(Password,SqlDbType.NVarChar).Value=TextBox2.Text.Trim();/定义阅读器接收结果输出 SqlDataReader reader=cmd.ExecuteReader();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,/判断是否存在用户 if(reader.Read()Label1.Text=登录成功;else Label1.Text=用户名或密码错误;/关闭阅读器与连接 reader.Close();conn.Close();,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.4.3 用参数方式防止注入式攻击,调试程序，输入用户名为 or 1=1 or a=a，密码为asdfasdf(任意字符)，然后单击登录按钮，显示登录失败，输入正确的用户名和密码，显示登录成功。同样，我们可以修改注册程序，以实现用户安全注册，修改相应的代码。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5 用户界面的美化,网页界面的美化是每个网页美工与开发人员必须重视的一个环节，关系着网站形象的成败，本节重点介绍用户登录界面和用户注册界面的美化方法。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.1 用户登录界面的美化,登录界面一般有两种方式，一是体现图文结合的方式，二是体现简洁的方式。对于图文结合的方式，可以采取图片切片然后重组的方法，对于简洁的方式可以采用CSS样式进行美化。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5 用户登录界面的美化,14.5.1 用户登录界面的美化登录界面一般有两种方式，一是体现图文结合的方式，二是体现简洁的方式。对于图文结合的方式，可以采取图片切片然后重组的方法，对于简洁的方式可以采用CSS样式进行美化。,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.1 用户登录界面的美化,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.1 用户登录界面的美化,完整的CSS代码如下：body font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#333;text-decoration:none;.btnlogin height:28px;width:73px;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;background:url(image/login.jpg);,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.1 用户登录界面的美化,完整的CSS代码如下：.textbox height:22px;width:155px;border:1px solid#e1e1e1;.btnreg background:url(image/reg.jpg);height:28px;width:73px;border-style:none;,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.2 用户注册界面的美化,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.2 用户注册界面的美化,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.2 用户注册界面的美化,body font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#333;text-decoration:none;.textbox height:22px;width:155px;border:1px solid#e1e1e1;,动态网页设计教程美工与技术,机械工业出版社,Company Logo,14.5.2 用户注册界面的美化,.btnreg background:url(image/regbutton.jpg);height:25px;width:86px;border-style:none;,动态网页设计教程美工与技术,机械工业出版社,