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;由杰西艾森伯格…

docker部署llm模型的项目,需要安装什么驱动

Docker容器中部署大型语言模型&#xff08;LLM&#xff09;项目&#xff0c;尤其是需要利用GPU进行加速的情况下&#xff0c;确保主机系统正确安装了NVIDIA驱动和CUDA是第一步。接着&#xff0c;你需要使用NVIDIA提供的Docker工具&#xff0c;如NVIDIA Container Toolkit&#…

Atcoder ABC341 A - Print 341

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

CentOS 中 YUM 源一键更新

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

大模型与大模型参数

1、大模型&#xff1a; 大模型是指具有庞大参数数量的机器学习模型&#xff0c;通常由数十亿甚至数千亿个参数组成。这些模型在训练过程中需要处理大量的数据&#xff0c;并通过不断的调整参数来逐步提高对任务的准确性。 大模型的工作原理类似于小型模型&#xff0c;但由于其…

离线环境解决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呢&#…

从基础到高级:Linux用户与用户组权限设置详解

目录 博客前言&#xff1a; 一.简介 1.用户的定义 用户账户分类 2.用户组的定义 二.用户的相关linux语法 1.创建用户&#xff08;useradd&#xff09; 2.删除用户&#xff08;userdel&#xff09; 3.修改用户&#xff08;usermod&#xff09; 4.修改用户密码 5.su切…

计算机概论

计算机概论 1.CPU&#xff0c;负责大量运算2.内存3.操作系统 1.CPU&#xff0c;负责大量运算 1、频率是CPU 每秒可以进行的工作次数&#xff0c;如 3.0 GHz 的 CPU 每秒可以进行 3*10 的 9 次方次&#xff0c;各个组件通过南桥与北桥连接至 CPU 2、CPU 外频与倍频 外频&…

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

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

android PopWindow弹不出输入法和遮挡输入框的问题

背景&#xff0c;在popWindow弹输入法&#xff0c;注意两个地方&#xff0c; 当前版本号pop要获取焦点 兼容版本号 弹出软键盘 private fun showSoftInput() {if (Build.VERSION.SDK_INT > 30) {"版本大于等 30".log()binding.etNewUser.windowInsetsControll…

Python程序员面试准备:八股文题目与解答思路

目录 描述一下Python中的列表推导式(List Comprehension)及其用法。 代码示例&#xff1a; 解答思路&#xff1a; 解释一下Python中的装饰器(Decorator)及其作用。 代码示例&#xff1a; 输出&#xff1a; 解答思路&#xff1a; 谈谈Python中的GIL(Global Interprete…

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

四步玩转数字名片-- 推贴&#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…

提示词工程简单介绍

提示词工程&#xff0c;又称为Prompt Engineering&#xff0c;是自然语言处理&#xff08;NLP&#xff09;领域中的一个重要概念&#xff0c;特别是在与语言模型&#xff08;如ChatGPT&#xff09;交互时。它涉及使用精心设计的提示词或指令来引导模型生成特定类型的响应。 …

R语言【raster】——raster():创建一个RasterLayer对象

Package raster version 3.6-27 Description 创建RasterLayer对象的方法。RasterLayer对象可以从无到有&#xff0c;一个文件&#xff0c;一个范围对象&#xff0c;一个矩阵&#xff0c;一个“图像”对象&#xff0c;或者从Raster*&#xff0c; Spatial*&#xff0c; im (spat…

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;因为作者把代码…