开发工具与关键技术:VS .MVC基础
作者:卢雅婷
撰写时间:2019/05/6
(代码来源于老师)
实现验证登录这个操作是一些软件使用前的操作,第一步是注册,再就是登陆软件,(比喻微信,QQ等通信、娱乐类型的软件),用户要登录就必然需要通过验证登录了。
以前一些的登录软件都只需要密码和账号即可,随着技术的进步,为了更好地保护用户的信息,避免一些不法分子利用密码和账号就可登录,我们现在很多软件的登录都需要从其绑定手机中获取验证密码,所以我们接下来学习的就是带有验证码的验证登录。
-
在我们写方法前要先引用生成验证码字符串和验证码图片的静态类,你可以自己写也可从网上下载一个,如下图(下图是从网上下载的),再引用IO类
-
再回到控制器创建一个创建验证码的方法(CreateValidCodeImage)
如下图所示我们先要生成长度为5的随机的验证码字符串strRandom,
ValidCodeUtils便是上图引用的静态类GetRandomCode便是其方法。接着根据生成的验证码字符串生成 验证码图片,因为保存图片需要用到二维数组来保存,所以我们先声明一个数组byte来接收验证码图片,接着调用方法CreateImage生成验证码图片,再将验证码字符串存入session中 key值,最后把图片返回到视图(文件内容,文件格式)。
-
接着回到页面写一个函数,首先创建一个点击事件(获取input标签中验证码图片的img标签作点击事件),接着用prop这个方法(其第一个参数为scr,第二个为方法的路径,为了让我们每一次登录时图片都要更新,我会在路径的后面加上获取当时时间的方法,调用时间),改变事件实现的效果是点击一次图片,图片便会更换一张,就是再执行一遍CreateValidCodeImage在个方法。
-
因为验证登录涉及用户账号、密码、用户类型等方面的验证,所以我们要再回到控制器中写其方法。先定义一个状态的变量,再从页面中获取用户名、密码、验证码,登录身份。再判断获取的数据是否为空,若为空则用strMsg提示:请把页面数据填写完整!
-
若不为空则第一步:验证验证码是否争取成功,首先用try catch语句捕捉错误,再获取session中的验证码,用if else语句判断填入的验证和session中的验证码是否一致(忽略大小写) ,若不一致,则else输出:验证码不匹配,若一致则接着第二步判断账号是否存在(拿页面账号作为条件查询数据库表)。
-
第三步:对页面传来的密码进行AES265后进行加密,(加密的时候需要用到一个静态类AESEncryptHelper,是我们封装的一个类,也可网上下载密码加密类即可) 再用if else语句判断输入的密码与数据库密码是否一致,若不一致则输出:当前输入的密码错误!若一致则进行第四步:判断账号和选择的权限跟注册账号的账号权限是否对应(用户表 连 用户角色明细表 连 用户类型表查询该信息),若选择的权限跟注册账号的账号权限不对应则输出账号和登录人的角色不匹配。
-
若选择的权限跟注册账号的账号权限是对应该则执行第五步:设置session机制开始处理登录信息,先获取用户类型名称、用户类型ID,接着设置session如下图所示,获取页面上的信息传入session,再设置cookie,如果用选择了记住我,则strIsRember为true ,执行记住密码 保存cookie的操作,AddDays()的参数为7则保存时间为七天。其它的字段传入cookie相应的字段即可保存,如没有选择记住我,则删除cookie操作,就是让AddDays的参数为-1即可,系统会自己清楚过期的cookie,最后输出strMsg = “success”;登录成功。
8. 再到Login视图方法下面声明三个字符串变量,(UserNuber、Password和UserTypeClass),让isRember的初始值为false,再读取浏览器请求传递的cookie,判断cookie是否存在,若cookie不为空则判断cookie中的各个字段是否为空,不为空。使用ViewBag将数据返回。
9. 最后回到页面写点击登录方法,获取登录ID, 声明一个formDate来接收页面的数据,(serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。返回 JSON 数据结构数据。此方法返回的是 JSON 对象而非 JSON 字符串),再用post方法提交数据给控制器·,在回调函数中用if else语句判断返回的数据是否为success,为true则登录成功,跳转到主页面,else则输出相应提示。
- 最后为了方便用户登录写了一个回车登录方法,用if语句判断点击的是否为回车键,是则JS触发btnSubmit的单击事件(btnSubmit就是登陆按钮的ID)。keyCode键就是回车键,然后在form标签的中写一个onkeydown事件
鄙人学之尚浅如有不对之处,请给予矫正。