web网页中的验证码实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/78946852

前言

   

   技巧点总结非常重要,等到在自己做项目中突然想用到了,可以来看看自己的博客,算是积累自己代码库的一种方式。下面小编对于牛腩新闻系统中的“验证码功能”方法做一下总结。


一、代码段

   使用一个一般处理程序文件.ashx, WaterMark.ashx

1.先创建WaterMark.ashx文件,编写如下代码:

<%@ WebHandler Language = "C#"  Class="WaterMark" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Windows;
//需要添加的引用
using System.Drawing;
using System.Drawing.Drawing2D;//二维的图形或图像
using System.Web.SessionState;

namespace NewSystem.handler
{
    /// <summary>
    /// WaterMark 的摘要说明
    /// </summary>
    public class WaterMark : IHttpHandler, IRequiresSessionState
    //要使用session必须实现该接口
    {

        public void ProcessRequest(HttpContext context)
        {
            //产生5位随机字符
            string checkCode = GenCode(5);
            //将字符串保存到session中,以便需要时进行验证
            context.Session["Code"] = checkCode;
            //产生宽70,高22的位图
            System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22);
            //从指定的image(容器,用户装载图画)中创建新的Graphics
            //(工具,用于操作图画)
            Graphics g = Graphics.FromImage(image);

            try
            {
                //生成随机生成器
                Random random = new Random();

                //清空图片背景色
                g.Clear(Color.White);

                //画图片的背景噪音线
                int i;
                for (i = 0; i < 25; i++)
                {
                    int x1 = random.Next(image.Width);
                    int x2 = random.Next(image.Width);
                    int y1 = random.Next(image.Width);
                    int y2 = random.Next(image.Width);

                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);

                }

                //设置字体样式
                Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold));
                System.Drawing.Drawing2D.LinearGradientBrush
                brush = new System.Drawing.Drawing2D.LinearGradientBrush(
               new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed,
               1.2F, true);

                //文本字符串格式,字体样式,文本样式,文本起始左上角x,y

                g.DrawString(checkCode, font, brush, 2, 2);

                g.DrawString(checkCode, font, brush, 2, 2);//文本字符串格式,字体样式,文本样式,文本起始左上角x,y

                //画图片的前景噪音点
                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
                System.IO.MemoryStream ms = new System.IO.MemoryStream();//声明一个类对象,读写内存不是磁盘,
                image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);//指定的文件,指定的格式,图像格式
                context.Response.ClearContent();//清楚缓冲区流的所有内容输出
                context.Response.ContentType = "image/Gif";
                context.Response.BinaryWrite(ms.ToArray());//将一个二进制字符串写入HTTP流中(将流内容写入字符数组)
            }
            finally
            {
                g.Dispose();//释放资源
                image.Dispose();//释放image占用的资源
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        /// <summary>
        /// 产生随机字符串
        /// </summary>
        /// <param name="num">随机出几个字符</param>
        /// <returns>随机出的字符串</returns>
        private string GenCode(int num)
        {
            string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";            
            char[] chastr = str.ToCharArray();
            string code = "";
            Random rd = new Random();
            int i;
            for (i = 0; i < num; i++)
            {
                //产生随机截取位置
                code += str.Substring(rd.Next(0, str.Length), 1);

            }

            return code;
        }
    }


}

2.应用

 

在相应的.aspx文件的HTML中编写代码(我使用的是登录界面login.aspx)

(1)在<head>元素中,添加具有changeCode方法的脚本文件,其中还加了一个时间,是为了解决浏览器的缓存问题;

  在<body>元素中,添加对waterMark.ashx的引用。

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台登录-牛腩新闻发布系统</title>

    <link href="../CSS/login.css" rel="stylesheet" type="text/css" />
    <script  lang="javescript" type="text/javascript">
        function changeCode() {
            var imgNode = document.getElementById("vimg");           
            imgNode.src = "../handler/WaterMark.ashx?t=" + (new Date()).valueOf(); //加时间是为了解决缓存问题

        }

    </script>

</head>
 <body>                                                                                                                                       <p>
                    验证码:<img src="../handler/WaterMark.ashx"
                        id="vimg" alt="" onclick="changeCode()" />
                    <asp:TextBox ID="txtCode" runat="server" CssClass="textcode">


                    </asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
                        runat="server" ErrorMessage="请输入验证码!" Text="*" ControlToValidate="txtCode">
                    </asp:RequiredFieldValidator>

               </p>                                                                                            </body>                                                                                                       

二、效果图

                      


三、分析理解验证码

1.验证码的好处

    一开始在使用这个验证码的时候感觉很麻烦,登录的时候总是输入验证码,但是今天自己不这么想了,我发现了一个理解验证码的说法:验证码虽然有时候很麻烦,但是可以有效保证我们的信息安全,验证码是一种区分用户是计算机还是人的全自动程序(自己有点不太理解这点),它可以防止恶意破解密码、刷票、论坛灌水,防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断地登录尝试。

2.降低验证码的使用次数

  现在大多数网站采取了一种方法:第一次登录时不需要输入验证码,当输入信息错误时,为了安全则填写验证码。


小结

   自己在做牛腩项目的时候,这块功能没有仔细地理解,通过一次总结确实重新理了一遍思路,很喜欢这种思考的感觉。


猜你喜欢

转载自blog.csdn.net/m18633778874/article/details/78946852