验证登录

r囧r小猫 2022-01-30 13:21 436阅读 0赞

**验证登录**

登录验证，是为了让项目提高安全性。就像身份证一样，你的身份证就代表着你本身，本人的身份证，你使用不了。一个项目没有了安全性操作，那么谁都可以操作里面的内容了，那项目随时改变，所以登录验证是为了提高安全性操作的第一屏拦截。现在随处所见的项目都有登录验证，它们的验证是通过，注册来的身份来去验证的。就像一间房子有门锁着，这个锁就是登录验证，只有开了这个锁才能进去，钥匙就是验证来的，匹配对的钥匙和锁，才打开，你就可以进入了。验证随处可见，也及其重要。
    登录验证大致分三大步骤：（本篇用的是验证码验证所以要把字符串生成图片）
    	登录页面—生成验证图片—验证登录

第一步：控制器创建一个视图（登录视图），进去搭建登录布局，及其其他的样式，都在页面布局里搭建，由于每个人都又不一样的登录页面，所以布局就不详细讲解。  
在进入布局里面先在控制器里判断数据，1.先声明字符串变量。2.然后读取浏览器请求传递的cookie。3.再判断cookie是否存在。4.最后使用ViewBag将数据返回  
视图内容：

//css //样式 //登录页面布局 //JS < script > $(function () \{ $("\#validCodeImg").click(function () \{//点击事件 $(this).prop("src", "/Main/CreateValidCodeImage?t=" + new Date().getTime());//转换新的图片 \}); \});//加载事件 因为要把字符串验证转化为图片，而且图片每用一次就要刷新，即使不用，或者点击，页面刷新，它图片里的验证码都会改变的。 生成验证图片：（ValidCodeUtils要创建新的实体类，定义验证） 1． 先是生成长度为\_\_的随机的验证码字符串 string strRandom = ValidCodeUtils.GetRandomCode(5); 2.根据生成的验证码字符串生成验证码图片 byte\[\] imgByte = ValidCodeUtils.CreateImage(strRandom); 3.将验证码字符串存入session中 key值为 Session\["validCode"\] = strRandom; 4.把图片返回到视图（文件内容，文件格式） return File(imgByte, @"image/jpeg"); 生成验证码图片就这样，直接在页面请求方法就可以了，上面已经请求了。 第三步：验证登录（AES265-也是要创建实体类，定义密码） 验证登录就是验证账号、密码、验证码、身份证等验证，如果验证错误就提示给用户知道，验证成功就跳转页面，成功进入页面，成功开了锁进了家门。 1. 首先定义一个记录状态的变量 2. 获取页面传递的变量 //用户名、密码、验证码、登录身份（类型）等 3. 然后就是判断：先判断验证码是否争取-然后获取处session存放的验证码-接着判断里面的图片字符串。再判断填入的验证和session中的验证码是否一致（可忽略大小写）-判断账号是否存在（拿页面账号作为条件查询数据库表）-对页面传来的密码进行AES265后进行加密-设置session-记录（记住密码，保存cookie）-接着就是删除cookie，通过设置cookie的过期时间为负，强制使cookie过期-最后登录成功-状态（密码、验证码、账号页面完整错误的提示）-最后就是返回数据。登录验证就是这样的思路。 三大步骤就是以上，还有些小步骤：例如点击登录、键盘键登录等。就先讲点击登录， 点击登录： 先获取点击登录的ID，给它个点击事件，然后serializeArray（）方法通过序列化表单值来创建对象数组（名称和值），返回json数据结构数据，此方法返回的是json对象而非json字符串，再然后就用post提交数据 $.post("/Main/UserLogin", formDate, function (data) \{ if(data ==”success”)\{ //登录成功，跳转到主页面 //使用replace不会出现后退按钮 window.location.replace(“/Main/Main); \}else\{ layer.lert（data）;//引用第三方对话框 \} \}//点击登录 回车键登录： function onreturn（）\{ //判断点击的是否回车键 if(window.event.keyCode == 18)\{ //如果是就js触发btnSubmit的单击事件 if(document.all(‘btnSubmit’).click()); \} \}//回车登录 整个登录验证大致就是这样，三大步骤，三小步骤。下截图就是成功案例的登录也页面。 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190519182556765.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg==,size\_16,color\_FFFFFF,t\_70)