如何实现页面登录验证

article/2025/10/10 1:59:10

现在很多网站在登录的时候都需要输入验证码,现在输入的验证码方式层出不穷有单单是数字的、字母(又分大小写)的,有数字、字母混合的,有给出运算表达式需要回答结果的,还有的卡片移动组合的...,为什么要输入验证码呢?其实是为了有效防止对某一个特定注册/登录用户用特定程序暴力破解方式进行不断的登陆尝试,这些验证码都是随着网络安全性要求越来越高而不断变化,实现的方式也多种多样。下面由于自己最近在开发中用到(现在就只是简单实现4位数字),之前也很少研究过,也顺便记录下来,如有不当之处希望各大牛不吝指出,大家一起共勉学习。

  废话少说,开始进入正题。。。

  一、首先效果图如下:

  

  二、实现过程:

  1、前端这张图片是一张背景图,实现如下:

<i id="VCodeImage" style="background-image: url(../Validate/GetValidateCode);"></i>
<b class="kbq">看不清?<br /><em id="changevcode">换一张</em></b>

  2、后台输出分两个函数实现,一个是生成指定长度的随机数,一个是生成背景图,如下:

     1)、生成指定长度的随机数:

 

         <summary>/// 生成验证码/// </summary>/// <param name="length">指定验证码的长度</param>/// <returns>输出指定长度的随机数</returns>public string CreateValidateCode(int length){int[] randMembers = new int[length];int[] validateNums = new int[length];string validateNumberStr = "";//生成起始序列值int seekSeek = unchecked((int)DateTime.Now.Ticks);Random seekRand = new Random(seekSeek);int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);int[] seeks = new int[length];for (int i = 0; i < length; i++){beginSeek += 10000;seeks[i] = beginSeek;}//生成随机数字for (int i = 0; i < length; i++){Random rand = new Random(seeks[i]);int pownum = 1 * (int)Math.Pow(10, length);randMembers[i] = rand.Next(pownum, Int32.MaxValue);}//抽取随机数字for (int i = 0; i < length; i++){string numStr = randMembers[i].ToString();int numLength = numStr.Length;Random rand = new Random();int numPosition = rand.Next(0, numLength - 1);validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));}//生成验证码for (int i = 0; i < length; i++){validateNumberStr += validateNums[i].ToString();}return validateNumberStr;}

 

  2)、生成背景图:

 

        /// <summary>/// 创建验证码的图片/// </summary>/// <param name="validateCode">在图片上显示的随机数</param>/// <returns>带有验证码的图片</returns>public byte[] CreateValidateGraphic(string validateCode){Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 25.0), 36);Graphics g = Graphics.FromImage(image);try{//生成随机生成器Random random = new Random();//清空图片背景色g.Clear(Color.White);//画图片的干扰线for (int i = 0; i < 25; i++) //i的最终数字越大表示图片的干扰线越多{int x1 = random.Next(image.Width);int x2 = random.Next(image.Width);int y1 = random.Next(image.Height);int y2 = random.Next(image.Height);g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);}Font font = new Font("Arial", 24, (FontStyle.Bold | FontStyle.Italic));LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),Color.Blue, Color.DarkRed, 1.2f, true);g.DrawString(validateCode, font, brush, 3, 2);//画图片的前景干扰点for (int i = 0; i < 100; i++) //i的最终数字越大表示图片的干扰点越多{int x = random.Next(image.Width);int y = random.Next(image.Height);image.SetPixel(x, y, Color.FromArgb(random.Next()));}//画图片的边框线g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);//保存图片数据MemoryStream stream = new MemoryStream();image.Save(stream, ImageFormat.Jpeg);//输出图片流return stream.ToArray();}finally{g.Dispose();image.Dispose();}}

 

  3、调用及判断用户输入的验证码是否正确:

 

        /// <summary>/// 验证码/// </summary>/// <returns></returns>public ActionResult GetValidateCode(){App_Code.Other.ValidateCode vCode = new App_Code.Other.ValidateCode();string code = vCode.CreateValidateCode(4);Session["ValidateCode"] = code;//关键点byte[] bytes = vCode.CreateValidateGraphic(code);return File(bytes, @"image/jpeg");}      

 

   判断用户输入的验证码是否正确:

    if (Session["ValidateCode"].ToString() != us.VCode){return Json(new App_Code.JsonData(false, msg = "验证码不正确!"));}

  

  那么整个实现过程已完毕,过程很简单,就是把随机数和图片结合生成一张背景图即可。这只是一个简简单单的验证码实现,还有更复杂的,以后碰到或需要实现的再做记录,希望和各位大牛一起成长学习。


http://chatgpt.dhexx.cn/article/pGjFoMO9.shtml

相关文章

token登陆验证

登陆业务的实现 由于http是无状态的&#xff0c;那么应该如何记住登录状态呢&#xff1f; 单一应用的服务中常见做法是在客户端cookie中保存sessionId,服务器端的session中保存sessionid,每次客户端发送请求的时候都带上sessionid&#xff0c;在服务器端进行验证。 在分布式系…

登录界面的验证

用html、css、js做一个简单的登录界面的验证 做一个登录界面验证 用户名不允许为空 密码为6-16位数字 邮箱要用email格式 手机号必须1开头且为11位数 地址必须填写 必须勾选同意协议才可以提交 css 用户名框验证如下 var flag true;if(name.length<1){$(msgName).innerT…

登录页面验证

页面组件 登录页 <template><div><p>用户名&#xff1a;<input type"text" v-model"userName" /></p><p>密码&#xff1a;<input type"text" v-model"passWord" /></p><button …

JavaScript登录验证

要求 账号&#xff1a;3-15位并且不能数字开头 密码&#xff1a;6-18位并且不能全是数字或者全是字符 页面代码 <body> <form><label>用户名:</label><input type"text" id"userName" name"userName" placeholder…

用户登陆验证

我们在操作各种软件的过程中&#xff0c;都涉及“用户登陆”的操作。例如登陆QQ、微信等软件&#xff0c;都需要用户名和密码的验证。 现在我们要开发一个图书馆管理系统&#xff0c;系统需要一个登陆的功能&#xff0c;我们应该怎么样实现用户登陆的验证功能&#xff1f; 我们…

Web 登录验证

前言&#xff1a;Web 用户的身份验证&#xff0c;及页面操作权限验证是B/S系统的基础功能&#xff0c;一个功能复杂的业务应用系统&#xff0c;通过角色授权来控制用户访问&#xff0c;本文通过Form认证&#xff0c;Mvc的Controller基类及Action的权限验证来实现Web系统登录&am…

如何实现验证登录

开发工具与关键技术&#xff1a;VS .MVC基础 作者&#xff1a;卢雅婷 撰写时间&#xff1a;2019/05/6 &#xff08;代码来源于老师&#xff09; 实现验证登录这个操作是一些软件使用前的操作&#xff0c;第一步是注册&#xff0c;再就是登陆软件&#xff0c;&#xff08;比喻微…

实现登录验证

最近练习搭建了一个后台管理系统,首先第一步做了关于验证登录的功能.以下项目使用了Nacos作为服务发现和注册中心,将Auth和gateway,system等相关多个微服务注册进Nacos.每次刷新登录页面,就会获取新的验证码(,输入正确的验证码即可成功跳转至首页. 获取验证码url:http://localh…

【图解】用户登录验证流程,这下彻底搞懂了!

开发者&#xff08;KaiFaX&#xff09; 面向全栈工程师的开发者 专注于前端、Java/Python/Go/PHP的技术社区 本文通过图示及代码的方式介绍用户登录流程及技术实现&#xff0c;内容包括用户登录&#xff0c;用户验证&#xff0c;如何获取操作用户的信息以及一些黑名单及匿名接口…

前端应该掌握的登录认证知识

1 背景 前一段时间&#xff0c;参与了老项目的迁移工作&#xff0c;配合后端接口迁移时&#xff0c;由于两个项目采取了不一样的登陆方案&#xff0c;所以遇到了跨域登录态无法共享的问题。经过各方协调&#xff0c;最终老项目将迁移页面部署在新项目的指定网关下&#xff0c;…

中间件登录验证(白名单,黑名单)

中间件版的登录验证需要依靠session&#xff0c;所以数据库中要有django_session表。 urls.py from django.conf.urls import url from app01 import viewsurlpatterns [url(r^index/$, views.index),url(r^login/$, views.login, namelogin), ]urls.py View Code views.py fr…

登录验证的那些事儿

前言 在以前的项目我们一般使用session或者cookie来存储已登录的用户信息&#xff0c;这样到达一个免除重复登录的问题&#xff0c;那么如何登录&#xff0c;又如何验证&#xff0c;就是一直在讨论的问题。今天我们对这些技术点进行一个梳理。 字 多 你 就 挑 有 颜 色 的 看…

计算机网络-(自顶向下方法)

计算机网络基础知识概述 计算机网络学习的核心内容就是网络协议的学习。网络协议是为计算机网络中进行数据交换而建立的规则、标准或者说是约定的集合。因为不同用户的数据终端可能采取的字符集是不同的&#xff0c;两者需要进行通信&#xff0c;必须要在一定的标准上进行。 …

计算机网络:自顶向下方法 笔记

计算机网络&#xff1a;自顶向下方法 笔记 综述因特网部件图例交换方式分组交换电路交换频分复用时分复用 对比 五层/七协议一个传输实例攻击DOS攻击 应用层应用程序结构客户-服务器结构P2P point2point结构 应用层协议总览http报文格式http状态码cookiesessionhttps FTPSMTPDN…

计算机网络 自顶向下 笔记

目录 第一章 计算机网络和因特网 全书答案评论留言即可 我私发&#xff0c;这里上传不了文本 第一章 计算机网络和因特网 什么是因特网&#xff1f; 因特网的具体构成&#xff1a;构成因特网的基本硬件和软件组件 分布式应用的互联网基础设施来描述 ---------------------…

《计算机网络-自顶向下》04. 网络层-数据平面

文章目录 网络层数据平面和控制平面两者的概述数据平面控制平面 控制平面&#xff1a;传统方法控制平面&#xff1a;SDN 方法网络服务模型 路由器工作原理通用路由器体系结构输入端口的功能基于目标的转发 交换结构内存交换方式总线交换方式纵横式交换方式 输出端口的功能何时何…

计算机网络自顶向下方法 习题参考答案 第一章

复习题&#xff1a; R1. 没有什么不同。PC、服务器、手机等。Web服务器是端系统。 R2. Protocol is commonly described as a set of international courtesy rules. These well-established and time-honored rules have made it easier for nations and people to live a…

计算机网络自顶向下方法(第六版) 课后题答案 | 第三章

复习题 R1. a. 将此协议称为简单传输协议(STP)。在发送方端&#xff0c;STP 从发送过程中接收不超过 1196 字节的数据块、目标主机地址和目标端口号。STP 向每个块添加一个 4 字节的报头&#xff0c;并将目标进程的端口号放在这个报头中。然后 STP 将目标主机地址和报文段提供…

计算机网络—自顶向下 计算机网络和因特网

目录 1. 什么是计算机网络 1.1 概念 1.2 因特网的具体构成 2. 计算机网络的结构 2.1 网络边缘(The Network Edge) 2.1.1 接入网 2.1.2 物理媒体 2. 2 网络核心(The network core) 2.2.1 电路交换 2.2.2 多路复用 2.2.3 报文交换 2.2.4 分组交换 2.2.5 网络之…

计算机网络自顶向下方法(一)——计算机网络和因特网

不要成为理想的巨人&#xff0c;行动的矮子 文章目录 写在前面什么是Internet?具体构成及描述什么是Internet: 从服务角度 网络边缘网络边缘&#xff1a;采用网络设施的面向连接服务网络边缘&#xff1a;采用基础设施的无连接服务 网络核心网络核心&#xff1a;电路交换电路交…