ASP.NET-实现图形验证码

ASP.NET 实现图形验证码能够增强网站安全性,防止机器人攻击。通过生成随机验证码并将其绘制成图像,用户在输入验证码时增加了人机交互的难度。本文介绍了如何使用 C# 和 ASP.NET 创建一个简单而有效的图形验证码系统,包括生成随机验证码、绘制验证码图像以及将图像输出到客户端等步骤。这种验证码系统对于保护网站免受恶意攻击和机器人恶意行为具有重要意义。


一、实现思路 

我们需要实现一个防爬虫的可以动态刷新的随机验证码图片。
比如下面这种:

关键点:

  • 动态:每次打开页面验证码是变化的,并且验证码在一些事件下会自发刷新成新的验证码,比如在点击、输入错误、页面停靠超时等事件触发时,验证码自动刷新。
  • 随机:里面的数字和字母是随机的,是一种强密码,不容易被暴力破解。
  • 防爬:防止爬虫通过一些AI识别直接通过,我们需要增加图片的复杂度,例如添加一些干扰性的图案,包括但不限于噪音线、噪点等。

验证码生成成功后,我们还需要将验证码保存到 Session 中,以便后续验证。


二、编写前端代码

思路已经明确,下面,我们来构建图形验证码的前端代码。
前端代码包含 HTML 和 JavaScript 代码。

1、编写HTML代码

HTML代码包含一个简单的验证码输入框和刷新图片按钮的用户界面:

<div class="checkcode"><input type="text" runat="server" id="VercodeText" placeholder="验证码" maxlength="4"><img onclick="changepic(this)" src="/handlers/VerCode.ashx" />
</div>
  • <div class="checkcode">:创建一个包含验证码元素的 div 容器,用于样式控制。
  • <input type="text" runat="server" id="VercodeText" placeholder="验证码" maxlength="4">添加一个文本输入框,用于用户输入验证码。设置了ID为 "VercodeText",最大长度为4,同时提供了占位符 "验证码"。
  • <img οnclick="changepic(this)" src="/handlers/VerCode.ashx" />:插入一个图片元素,其 src 属性指向验证码处理器 VerCode.ashx。当用户点击该图片时,触发JavaScript函数 changepic 进行验证码图像的刷新。

通过这样的HTML结构,用户可以在输入框中输入验证码,并通过点击图片刷新验证码图像,提供了一种交互式的验证码体验。


2、创建JavaScript函数

创建 changepic 函数方法:

function changepic(obj) {var timestamp = (new Date().getTime()) / 1000;$(obj).attr('src', 'VerCode.ashx?tims=' + timestamp);
}

changepic 函数用于刷新验证码图片,通过在 URL 中添加时间戳的方式,确保每次请求都是唯一的,避免浏览器缓存。


三、编写后端代码

后端代码我们采用C#实现。 

1、创建输出图形验证码的接口

创建C#验证码处理器 VerCode.ashx:

using CarRental.Common;
using System;
using System.Drawing;
using System.IO;
using System.Web;namespace Handlers
{public class VerCode : IHttpHandler, System.Web.SessionState.IRequiresSessionState{public void ProcessRequest(HttpContext context){}public bool IsReusable{get{return false;}}}
}

VerCode 类实现了 IHttpHandler 接口,用于处理 HTTP 请求。


2、创建验证码生成方法

/// <summary>
/// 随机构建验证码方法
/// </summary>
/// <returns>返回验证码字符串</returns>
public string CreateCode()
{char code;string checkCode = string.Empty;Random rd = new Random();for (int i = 0; i < 4; i++){int num = rd.Next();int _temp;if (num % 2 == 0){_temp = ('0' + (char)(num % 10));if (_temp == 48 || _temp == 49){_temp += rd.Next(2, 9);}}else{_temp = ('A' + (char)(num % 10));if (rd.Next(0, 2) == 0){_temp = (char)(_temp + 32);}if (_temp == 66 || _temp == 73 || _temp == 79 || _temp == 108 || _temp == 111){_temp++;}}code = (char)_temp;checkCode += code;}return checkCode;
}

CreateCode 方法用于生成随机验证码,包含数字和字母,并进行了一些特殊字符的处理,以增加验证码的复杂性。


3、 绘制验证码图片

① 配置验证码参数

我们先定义验证码图像的宽度、高度、字体大小以及用于生成随机数的 Random 对象。

int codeWeight = 80;
int codeHeight = 22;
int fontSize = 16;
Random rd = new Random();

② 生成验证码字符串

这一步很简单,我们直接调用之前写好的 CreateCode 方法。

string checkCode = CreateCode();

③ 构建验证码背景

创建一个位图对象,并在其上创建图形对象,然后用白色填充图像背景。

Bitmap image = new Bitmap(codeWeight, codeHeight);
Graphics g = Graphics.FromImage(image);
g.Clear(Color.White);

④ 画噪音线

在图像上绘制两条随机颜色的噪音线,增加验证码的复杂性。

for (int i = 0; i < 2; i++)
{int x1 = rd.Next(image.Width);int x2 = rd.Next(image.Width);int y1 = rd.Next(image.Height);int y2 = rd.Next(image.Height);g.DrawLine(new Pen(color[rd.Next(color.Length)]), new Point(x1, y1), new Point(x2, y2));
}

⑤ 画验证码

使用循环逐个绘制验证码字符串中的字符,每个字符使用随机颜色和字体。

for (int i = 0; i < checkCode.Length; i++)
{Color clr = color[rd.Next(color.Length)];Font ft = new Font(font[rd.Next(font.Length)], fontSize);g.DrawString(checkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, 0);
}

⑥ 画噪音点

在图像上绘制100个随机颜色的噪音点,增加验证码的随机性。 

for (int i = 0; i < 100; i++)
{int x = rd.Next(image.Width);int y = rd.Next(image.Height);image.SetPixel(x, y, Color.FromArgb(rd.Next()));
}

⑦ 画边框线

在图像周围绘制银色边框线,使验证码更加清晰。

g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

⑧ 将验证码图像保存到内存流

将生成的验证码图像保存到内存流中,准备输出到客户端。

MemoryStream ms = new MemoryStream(); image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);

⑨ 将验证码保存到Session中

将生成的验证码字符串保存到Session中,以便后续验证。

context.Session[ConstantValues.VerCodeSessionName] = checkCode;

⑩ 输出图像到客户端

配置HTTP响应,将验证码图像输出到客户端。

context.Response.ContentType = "Image/Gif";
context.Response.ClearContent();
context.Response.BinaryWrite(ms.ToArray());

最后,别忘记释放图像和图形资源,防止内存泄漏。

finally { image.Dispose(); g.Dispose(); }

4、完整后端代码

完整的 VerCode.cs 代码如下:

using TestMoudle.Common;
using System;
using System.Drawing;
using System.IO;
using System.Web;namespace Handlers
{public class VerCode : IHttpHandler, System.Web.SessionState.IRequiresSessionState{public void ProcessRequest(HttpContext context){int codeWeight = 80;int codeHeight = 22;int fontSize = 16;Random rd = new Random();string checkCode = CreateCode(); //构建验证码字符串Bitmap image = new Bitmap(codeWeight, codeHeight); //构建画图Graphics g = Graphics.FromImage(image); //构建画布g.Clear(Color.White); //清空背景色Color[] color = new Color[] { Color.Red, Color.Black, Color.Green, Color.Blue };string[] font = new string[] { "宋体", "黑体", "楷体" };//画噪音线for (int i = 0; i < 2; i++){int x1 = rd.Next(image.Width);int x2 = rd.Next(image.Width);int y1 = rd.Next(image.Height);int y2 = rd.Next(image.Height);g.DrawLine(new Pen(color[rd.Next(color.Length)]), new Point(x1, y1), new Point(x2, y2));}//画验证码for (int i = 0; i < checkCode.Length; i++){Color clr = color[rd.Next(color.Length)];Font ft = new Font(font[rd.Next(font.Length)], fontSize);g.DrawString(checkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, 0);}//画噪音点for (int i = 0; i < 100; i++){int x = rd.Next(image.Width);int y = rd.Next(image.Height);image.SetPixel(x, y, Color.FromArgb(rd.Next()));}//画边框线g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);MemoryStream ms = new MemoryStream();try{image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);context.Session[ConstantValues.VerCodeSessionName] = checkCode; //将验证码保存到Session中context.Response.ContentType = "Image/Gif";context.Response.ClearContent();context.Response.BinaryWrite(ms.ToArray());}finally{image.Dispose();g.Dispose();}}public bool IsReusable{get{return false;}}}
}

四、测试效果

我们运行项目,可以看到验证码图像顺利生成了,并且点击可以刷新图片内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《社交网络》计算机电影题材赏析及电影推荐

《社交网络》&#xff08;The Social Network&#xff09;是一部2010年上映的传记剧情片&#xff0c;由大卫芬奇执导&#xff0c;主要讲述了Facebook创始人马克扎克伯格的创业历程和与合作伙伴之间的法律纠纷。 剧情 开场&#xff1a; 马克扎克伯格&#xff08;由杰西艾森伯格…

Atcoder ABC341 A - Print 341

Print 341&#xff08;输出 341&#xff09; 时间限制&#xff1a;2s 内存限制&#xff1a;1024MB 【原题地址】 所有图片源自Atcoder&#xff0c;题目译文源自脚本Atcoder Better! 点击此处跳转至原题 【问题描述】 【输入格式】 【输出格式】 【样例1】 【样例输入1】 …

CentOS 中 YUM 源一键更新

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

离线环境解决IDEA连接数据库报需下载驱动的问题 Download missing driverfiles

去外网电脑上把这个目录下的MySQL ConnectorJ文件夹整体拷贝的内网电脑上就ok了&#xff01; C:\Users\like12\AppData\Roaming\JetBrains\IntelliJIdea2021.2\jdbc-drivers 参考&#xff1a;IDEA Download missing driver files 下载失败解决方法-CSDN博客

共享WiFi贴是什么,究竟安不安全?

在现代社会中&#xff0c;移动设备和互联网已经成为我们日常生活中不可或缺的一部分。为了方便我们的网络使用&#xff0c;越来越多的人选择使用公共WiFi&#xff0c;但是安全性成了很大的问题。而随着共享WiFi贴的出现&#xff0c;我们是否可以更加安全便捷地使用WiFi呢&#…

智慧城市的新宠儿:会“思考”的井盖

在城市化飞速发展的今天&#xff0c;我们或许未曾过多地关注那些平凡却至关重要的井盖。它们无声地矗立在城市的每个角落&#xff0c;守护着深藏于地下的城市生命线&#xff0c;然而&#xff0c;这些井盖并未满足于传统的角色&#xff0c;它们正逐步融入智慧城市的宏大画卷中&a…

四步玩转数字名片-- 推贴,让你的名片飞起来

四步玩转数字名片-- 推贴&#xff0c;让你的名片飞起来 名片设计路径&#xff1a; 1-进入编辑查看名片→点击【创建名片&#xff1a;完善名片信息】 2-进入编辑界面→编辑个人业务&#xff0c;公司组织业务 3-创建多种业务名片。 头像即第一印象&#xff1b; 好照片让客户的关…

Gitee教程2(完整流程)

1.配置git git config --global user.name "用户名" git config --global user.email "密码" 如何获取&#xff1f; gitee右上角加号点击新建仓库&#xff0c;仓库名随便起一个就行 找到这条命令&#xff0c;把这两句一个一个复制到vscode终端就行 2.创建g…

网络基础与通信原理:构建数字世界的框架

目录 初识计算机网络 网络介绍 按照拓扑分类 按地域分类 网络设备 交换机&#xff08;switch&#xff09; 路由器&#xff08;router&#xff09; 传输介质 双绞线 光纤 光纤速度 ISO ISO和OSI有什么关系呢&#xff1f; OSI七层模型 TCP/IP四层 TCP/IP协议族 …

VMware ESXi 8.0的安装、配置、使用

VMware ESXi 8.0的安装、配置、使用 ESXi的安装与配置下载镜像安装网络配置 Web控制台的管理操作激活开启直通网络配置修改电源模式创建虚拟机 其他ESXI秘钥克隆虚拟机 ESXi的安装与配置 下载镜像 官网&#xff1a;https://www.vmware.com/ 文档&#xff1a;https://docs.vm…

LeetCode--代码详解 59. 螺旋矩阵 II

59. 螺旋矩阵 II 题目 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&a…

【Python】 剪辑法欠采样 CNN压缩近邻法欠采样

借鉴&#xff1a;关于K近邻&#xff08;KNN&#xff09;&#xff0c;看这一篇就够了&#xff01;算法原理&#xff0c;kd树&#xff0c;球树&#xff0c;KNN解决样本不平衡&#xff0c;剪辑法&#xff0c;压缩近邻法 - 知乎 但是不要看他里面的代码&#xff0c;因为作者把代码…

深入探索STM32的存储选项:片内RAM、片内Flash与SDRAM

博客&#xff1a;深入探索STM32的存储选项&#xff1a;片内RAM、片内Flash与SDRAM 在嵌入式系统设计中&#xff0c;存储管理是一个至关重要的方面&#xff0c;尤其是对于基于STM32这类强大的微控制器来说。STM32系列微控制器因其高性能、低功耗以及灵活的存储选项而广受欢迎。本…

RabbitMQ集群架构

1.RabbitMQ集群模式介绍 普通集群 默认的集群模式&#xff0c;比如有节点node1、node2和node3&#xff0c;三个节点是普通集群&#xff0c;但是他们仅有相同的元数据&#xff0c;即交换机、队列的结构消息只存在其中的一个节点里面&#xff0c;假如消息A存储在node1节点&#x…

Python中HTTP请求的安全性考虑与实践:安全帽下的网络舞者

在Python的HTTP请求世界里&#xff0c;安全性就像是一个必不可少的舞伴&#xff0c;时刻陪伴着你的网络舞步。想象一下&#xff0c;你正在举办一场网络舞会&#xff0c;而安全性则是那个穿着防弹舞衣&#xff0c;戴着安全帽的忠诚舞伴&#xff0c;确保你在舞池中尽情舞动而不必…

数据结构---字典树(Tire)

字典树是一种能够快速插入和查询字符串的多叉树结构&#xff0c;节点的编号各不相同&#xff0c;根节点编号为0 Trie树&#xff0c;即字典树&#xff0c;又称单词查找树或键树&#xff0c;是一种树形结构&#xff0c;是一种哈希树的变种。 核心思想也是通过空间来换取时间上的…

C#写的一个计算DCI-P3色域和SRGB的小工具

文章最后附带分享链接与提取码 方便需要测试屏幕的小伙伴&#xff0c;只需要输入RGB就能得到覆盖率与比率&#xff0c;W计算色温&#xff0c;不测也要写上&#xff0c;不然会报错 链接&#xff1a;https://pan.baidu.com/s/1wdmAwmwiXjNvn1tGsvy0HA 提取码&#xff1a;1234

安卓学习笔记之五:Android Studio_骰子案例3(Kotlin搭配 Jetpack Compose实现)

使用 Compose 创建一款交互式 Dice Roller Android 应用。 完成&#xff1a; 定义可组合函数。使用组合创建布局。使用 Button 可组合项创建按钮。导入 drawable 资源。使用 Image 可组合项显示图片。使用可组合项构建交互式界面。使用 remember 可组合项将组合中的对象存储到…

【Docker】有用的命令

文章目录 DockerDocker 镜像与容器的差异Docker的好处Hypervisor运维 一、安装docker二、启动docker三、获取docker镜像四、创建镜像使用命令行创建镜像使用dockerfile创建镜像 五、docker报错 Docker docker镜像&#xff08;Image&#xff09; docker镜像类似于虚拟机镜像&…

linux 安装anaconda踩坑——哈希值对不上

下载安装包时执行命令 curl -O https://repo.anaconda.com/archive/Anaconda3-<INSTALLER_VERSION>-Linux-x86_64.sh 其中的<INSTALLER_VERSION>需要填写下载的anaconda版本号&#xff0c;于是我就点开官网提供的版本号链接&#xff0c;将我要下载的版本号copy了一…