神奇的验证码,我们一起来探究

发布时间:2012-08-22作者: 邯郸翱翔

一开始接触验证码,觉得很麻烦,每次登陆还得输入验证码,甚是麻烦,不是说过一切为了人民服务吗?为什么不给用户带来方便,我想没有哪位用户是愿意输入验证码的,特别是对于视力不是太好的朋友们,有时候很变态,明
 

一开始接触验证码,觉得很麻烦,每次登陆还得输入验证码,甚是麻烦,不是说过一切为了人民服务吗?为什么不给用户带来方便,我想没有哪位用户是愿意输入验证码的,特别是对于视力不是太好的朋友们,有时候很变态,明明记得是输入对了,但是最后显示的是验证码输入错误,这是否跟咱们的软件为人民服务冲突呢?最为难的是春运的时候买火车票,很多人都是买到票之后,由于验证码输入错误或者提交失败一直到提交成功的时候,显示的却是票不足,购票不成功,这多伤人啊。为此,我百思不得其解。直到那一天……

我恍然发现,咱们想的都是太自私了,都是为自己的方便着想,没有想到程序员的难处,当然程序员是想让大家方便,但是没有事事都是两全其美的,所以为了大家方便的同时,程序员遇到更大的一个难题就是安全,而验证码是一种区分用户是计算机和人的全自动程序,可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,百度社区),程序员利用比较简易的方式实现了这个功能。到现在也许有很多的用户反映到登陆输入验证码太麻烦了,所以看到有一些网站是第一次登陆不需要输入验证码,然后你输入用户名或者密码不对的时候,就是登陆不成功的时候,验证码才出来,毕竟那是电脑,没有人脑那么灵活,所以程序员就让给电脑一个灵感,但登陆不成功的时候,为了安全,就给出验证码,这就很好的有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试了,这就实现了安全。我们看一下网易163邮箱是怎么做的:

当你多次登陆不成功的时候,他会弹出这么一个窗口:

我们的验证码出来了,这就证明了咱们的验证码确实能有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试进行破解。所以当我们要输入验证码的时候,我们要想到这些,就不必心烦了,程序员想的不是不周到,是想让大家的数据更加安全,也为我们的秘密泄露加上了很好的保护套。

至于春运买火车票的,我看见很多人抱怨说输入验证码导致自己没买到票,这么说吧,要是不输入验证码,那更买不到了,至于人家的铁道部网站做的怎么样,咱们先不讨论。

相信很多人跟我一样,有过这样的背景,其实挺好,没有这样的疑惑,我们就没有进步的动力,就难以跟上时代的步伐。我写这篇博客就是想给大家解开这个迷惑,到底这是怎么做到的呢?

我在想,为什么验证码那么神奇呢?为什么验证码能区分用户是计算机和人呢?他是怎么做到的呢?原因很简单,我们来看看内部的代码运行情况:

我们做一个登陆页面,来看看验证码的背后是怎么工作的:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login_blog.aspx.cs" Inherits="WebApplication1.Login_blog" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>登陆验证码测试</title>  
  7.     <link href="css/Login_blog.css" rel="stylesheet" type="text/css" />  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.         <h3>  
  13.             登录验证码测试  
  14.         </h3>  
  15.         <div id="Login_blog">  
  16.             <p>  
  17.                 用户名:  
  18.                 <asp:TextBox ID="txtUserName" runat="server" CssClass="textbox"></asp:TextBox>  
  19.                 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="请输入用户名"  
  20.                     Text="*" ControlToValidate="txtUserName"></asp:RequiredFieldValidator>  
  21.             </p>  
  22.             <p>  
  23.                 密码:  
  24.                 <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="textbox"></asp:TextBox>  
  25.                 <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="请输入密码!"  
  26.                     Text="*" ControlToValidate="txtPassword"></asp:RequiredFieldValidator>  
  27.             </p>  
  28.             <p>  
  29.                 验证码:<img src="../handler/WaterMark.ashx" id="vimg" alt="" onclick="changeCode()" />  
  30.                 <asp:TextBox ID="txtCode" runat="server" CssClass="txtCode"></asp:TextBox>  
  31.                 <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="请输入验证码!"  
  32.                     Text="*" ControlToValidate="txtCode"></asp:RequiredFieldValidator>  
  33.             </p>  
  34.             <p>  
  35.                 <asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />  
  36.             </p>  
  37.             <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true"  
  38.                 ShowSummary="false" />  
  39.         </div>  
  40.     </div>  
  41.     </form>  
  42. </body>  
  43. </html>  
在Login_blog.aspx.cs里边这样
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using BLL;  
  8. using System.Web.Security;  
  9.   
  10. namespace WebApplication1  
  11. {  
  12.     public partial class Login_blog : System.Web.UI.Page  
  13.     {  
  14.         protected void Page_Load(object sender, EventArgs e)  
  15.         {  
  16.   
  17.         }  
  18.         //登录按钮   
  19.         protected void btnLogin_Click(object sender, EventArgs e)  
  20.         {  
  21.             //判断验证码是否输入正确   
  22.             string code = txtCode.Text.Trim();  
  23.             string rightCode = Session["Code"].ToString();  
  24.             if (code!=rightCode)  
  25.             {  
  26.                 Page.ClientScript.RegisterStartupScript(Page.GetType(), "message""<script language='javascript' defer>alert('验证码输入错误!');</script>");  
  27.                 return;  
  28.             }  
  29.             string name = txtUserName.Text.Trim();  
  30.             string pwd = txtPassword.Text.Trim();  
  31.   
  32.             bool b = LoginManager.Login(name, pwd);  
  33.             if (b)  
  34.             {  
  35.                 //登录成功   
  36.                 Session["admin"] = name;  
  37.                 Response.Redirect("http://blog.csdn.net/yi_zz");  
  38.             }  
  39.             else  
  40.             {  
  41.                     //登录失败   
  42.                 Page.ClientScript.RegisterStartupScript(Page.GetType(), "message""<script language='javascript' defer>alert('登陆失败,用户名或者密码错误!');</script>");  
  43.             }  
  44.         }  
  45.           
  46.   
  47.     }  
  48. }  
css文件中我们排一下版:

  1. /* 
  2. *登陆验证码测试 
  3. */  
  4.   
  5.      *  
  6. {  
  7.     margin :0;  
  8.     padding :0;  
  9.     }  
  10. body   
  11. {  
  12.     font-size :14px;  
  13. }  
  14.   
  15.   
  16. #loginfrm #login p  
  17. {  
  18.     padding-bottom :10px;  
  19.     }  
  20. .textbox  
  21. {  
  22.     width :150px;  
  23.     }  
  24. .txtCode  
  25. {  
  26.     width :73px;  
  27.     }  
我们在逻辑层写一点判断:
  1. /* 
  2.  * 创建人:宗毅    
  3.  * 创建时间:2012年8月11日19:38:27 
  4.  * 说明:登陆的业务逻辑类 
  5.  * 版权所有: 
  6. */  
  7. using System;  
  8. using System.Collections.Generic;  
  9. using System.Linq;  
  10. using System.Text;  
  11. namespace BLL  
  12. {  
  13.    public  class LoginManager  
  14.    {  
  15.        #region 用户登陆是否成功   
  16.        /// <summary>   
  17.        /// 用户登陆是否成功   
  18.        /// </summary>   
  19.        /// <param name="name">用户名</param>   
  20.        /// <param name="pwd">密码</param>   
  21.        /// <returns></returns>   
  22.        public static bool Login(string name, string pwd)  
  23.        {  
  24.            bool flag = false;  
  25.            if ("zongyi" == name && "czy" == pwd)  
  26.            {  
  27.                flag = true;  
  28.            }  
  29.            return flag;  
  30.        }  
  31.        #endregion   
  32.    }  
  33.       
  34. }  
最后看看验证码这部分的代码:
  1. /* 
  2.  * 验证码 
  3. */  
  4. using System;  
  5. using System.Web;  
  6. using System.Drawing;  
  7. using System.Drawing.Drawing2D;  
  8. using System.Web.SessionState;  
  9.   
  10. public class WaterMark : IHttpHandler, IRequiresSessionState  // 要使用session必须实现该接口,记得要导入System.Web.SessionState命名空间   
  11. {  
  12.   
  13.     public void ProcessRequest(HttpContext context)  
  14.     {  
  15.         string checkCode = GenCode(5);  // 产生5位随机字符   
  16.         context.Session["Code"] = checkCode; //将字符串保存到Session中,以便需要时进行验证   
  17.         System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22);  
  18.         Graphics g = Graphics.FromImage(image);  
  19.         try  
  20.         {  
  21.             //生成随机生成器   
  22.             Random random = new Random();  
  23.   
  24.             //清空图片背景色   
  25.             g.Clear(Color.White);  
  26.   
  27.             // 画图片的背景噪音线   
  28.             int i;  
  29.             for (i = 0; i < 25; i++)  
  30.             {  
  31.                 int x1 = random.Next(image.Width);  
  32.                 int x2 = random.Next(image.Width);  
  33.                 int y1 = random.Next(image.Height);  
  34.                 int y2 = random.Next(image.Height);  
  35.                 g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);  
  36.             }  
  37.   
  38.             Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold));  
  39.             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);  
  40.             g.DrawString(checkCode, font, brush, 2, 2);  
  41.   
  42.             //画图片的前景噪音点   
  43.             g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);  
  44.             System.IO.MemoryStream ms = new System.IO.MemoryStream();  
  45.             image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);  
  46.             context.Response.ClearContent();  
  47.             context.Response.ContentType = "image/Gif";  
  48.             context.Response.BinaryWrite(ms.ToArray());  
  49.         }  
  50.         finally  
  51.         {  
  52.             g.Dispose();  
  53.             image.Dispose();  
  54.         }  
  55.     }  
  56.   
  57.     /// <summary>   
  58.     /// 产生随机字符串   
  59.     /// </summary>   
  60.     /// <param name="num">随机出几个字符</param>   
  61.     /// <returns>随机出的字符串</returns>   
  62.     private string GenCode(int num)  
  63.     {  
  64.         string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";  
  65.         char[] chastr = str.ToCharArray();  
  66.         string code = "";  
  67.         Random rd = new Random();  
  68.         int i;  
  69.         for (i = 0; i < num; i++)  
  70.         {  
  71.             //code += source[rd.Next(0, source.Length)];   
  72.             code += str.Substring(rd.Next(0, str.Length), 1);  
  73.         }  
  74.         return code;  
  75.   
  76.     }  
  77.   
  78.     public bool IsReusable  
  79.     {  
  80.         get  
  81.         {  
  82.             return false;  
  83.         }  
  84.     }  
  85.   
  86. }  

我们看到这个界面:

这个登录验证码的窗体已经算完成了,我们看的出来验证码其实就是通过一张图片,来区分用户和计算机,就能达到很好的防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试;所以为了咱们的网络安全,这个验证码确实发挥了很大的作用。

关于我们
翱翔简介
青鸟简介
诚聘精英
在线咨询
热门课程
BCSP软件开发专业
云计算专业
大数据专业
Web前端专业
java开发专业
翱翔就业
就业案例
翱翔荣誉
微信 公众号 在线咨询 免费课程