• ASP.NET实现前台验证码功能
  • Linda 发表于 2017/3/7 22:45:00 | 分类标签: 验证码代码 前台验证码实现
  • 背景: 因为移动端APP和Msite手机注册发送短信验证码没有添加图片验证码功能。公司的短信接口被恶意刷取。所以我们就觉得在移动端添加一个图片验证码功能。分享一下大体实现方式思路。PS demo是自己写的。跟公司代码还是有很大差距的。 

    1. 建立图片验证码 ValidationCodeHelper

    1.1 填写方法生成对应的.验证码: 默认是4位数字

     1         private static char[] _constant = {  
     2         '0','1','2','3','4','5','6','7','8','9',  
     3         'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',   
     4         'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'   
     5          };
     6 
     7         public static string CreateValidateCode(int length = 4, bool isNum = true)
     8         {
     9             var sb = new StringBuilder();
    10             var constant = isNum ? _constant.Take(10).ToArray() : _constant;
    11             var constant_count = constant.Count();
    12             Random rd = new Random();
    13             for (var index = 0; index < length; index++)
    14             {
    15                 sb.Append(constant[rd.Next(constant_count)]);
    16             }
    17             return sb.ToString();
    18         }

    1.2 通过验证码生成图片流, 此代码是从其他博友那里Copy过来的。自己对图片方面不擅长

     1 public static byte[] GetImage(string code)
     2         {
     3             Bitmap image = new Bitmap((int)Math.Ceiling(code.Length * 16.0), 27);
     4             Graphics g = Graphics.FromImage(image);
     5             try
     6             {
     7                 Random random = new Random();
     8                 g.Clear(Color.Gray);
     9                 for (int i = 0; i < 25; i++)
    10                 {
    11                     int x1 = random.Next(image.Width);
    12                     int x2 = random.Next(image.Width);
    13                     int y1 = random.Next(image.Height);
    14                     int y2 = random.Next(image.Height);
    15                     g.DrawLine(new Pen(Color.Silver), x1, x2, y1, y2);
    16                 }
    17                 Font font = new Font("Arial", 13, (FontStyle.Bold | FontStyle.Italic));
    18                 LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
    19                 g.DrawString(code, font, brush, 3, 2);
    20                 for (int i = 0; i < 100; i++)
    21                 {
    22                     int x = random.Next(image.Width);
    23                     int y = random.Next(image.Height);
    24                     image.SetPixel(x, y, Color.FromArgb(random.Next()));
    25                 }
    26                 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
    27                 MemoryStream stream = new MemoryStream();
    28                 image.Save(stream, ImageFormat.Jpeg);
    29                 return stream.ToArray();
    30             }
    31             catch (Exception ex)
    32             {
    33                 return null;
    34             }
    35             finally
    36             {
    37                 g.Dispose();
    38                 image.Dispose();
    39             }
    40         }

    2. 封装一个简单的CookieHelper类型主要是对Cookie进行加密。只是简单封装, 没有对CookieHelper添加泛型,未支持Object处理。公司里面的CookieHelper库更强大。可是不能分享代码出来。所以自己简单的写了一个。

     1     public class CookieHelper
     2     {
     3 
     4         #region 字符串加密解密
     5 
     6         private static string _MD5 = "8ff0c65d-a2ed-4e1e-af85-690c08b8d039";
     7 
     8         private static string Decrypt(string cipherString)
     9         {
    10             byte[] keyArray;
    11             byte[] toEncryptArray = Convert.FromBase64String(cipherString);
    12             MD5CryptoServiceProvider hashmd5 = new MD5CryptoServiceProvider();
    13             keyArray = hashmd5.ComputeHash(UTF8Encoding.UTF8.GetBytes(_MD5));
    14             hashmd5.Clear();
    15 
    16             TripleDESCryptoServiceProvider tdes = new TripleDESCryptoServiceProvider();
    17             tdes.Key = keyArray;
    18             tdes.Mode = CipherMode.ECB;
    19             tdes.Padding = PaddingMode.PKCS7;
    20             ICryptoTransform cTransform = tdes.CreateDecryptor();
    21             byte[] resultArray = cTransform.TransformFinalBlock(
    22                                  toEncryptArray, 0, toEncryptArray.Length);              
    23             tdes.Clear();
    24             return UTF8Encoding.UTF8.GetString(resultArray);
    25         }
    26 
    27         private static string Encrypt(string toEncrypt)
    28         {
    29             byte[] keyArray;
    30             byte[] toEncryptArray = UTF8Encoding.UTF8.GetBytes(toEncrypt);
    31             MD5CryptoServiceProvider hashmd5 = new MD5CryptoServiceProvider();
    32             keyArray = hashmd5.ComputeHash(UTF8Encoding.UTF8.GetBytes(_MD5));
    33             hashmd5.Clear();
    34 
    35             TripleDESCryptoServiceProvider tdes = new TripleDESCryptoServiceProvider();
    36             tdes.Key = keyArray;
    37             tdes.Mode = CipherMode.ECB;
    38             tdes.Padding = PaddingMode.PKCS7;
    39 
    40             ICryptoTransform cTransform = tdes.CreateEncryptor();
    41             byte[] resultArray =
    42               cTransform.TransformFinalBlock(toEncryptArray, 0,
    43               toEncryptArray.Length);
    44             tdes.Clear();
    45             return Convert.ToBase64String(resultArray, 0, resultArray.Length);
    46         }
    47 
    48 
    49         #endregion
    50 
    51 
    52         #region Cookie
    53 
    54         public static void SaveCookie(string name, string value, int expiredSecond = 0)
    55         {
    56             var encryptStr = Encrypt(value);
    57             var collection = HttpContext.Current.Response.Cookies;
    58             collection.Add(new HttpCookie(name)
    59             {
    60                 Value = encryptStr,
    61                 Expires = expiredSecond > 0 ? System.DateTime.Now.AddSeconds(expiredSecond) : System.DateTime.MaxValue
    62             });
    63         }
    64 
    65         public static string GetCookie(string name)
    66         {
    67             var cookie = HttpContext.Current.Request.Cookies.Get(name);
    68             if (cookie == null)
    69             {
    70                 return null;
    71             }
    72             else
    73             {
    74                 return Decrypt(cookie.Value);
    75             }
    76         }
    77 
    78         #endregion
    79     }

    3. Controller新增图片服务。设置图片的Cookie有效期是一分钟

     1 public class HomeController : Controller
     2     {
     3         public ActionResult Index()
     4         {
     5             return View();
     6         }
     7 
     8         public FileContentResult ImageValidator()
     9         {
    10             var code = ValidationCodeHelper.CreateValidateCode();
    11             CookieHelper.SaveCookie("PicCode", code, 60);
    12             var picByte = ValidationCodeHelper.GetImage(code);
    13             return File(picByte, "image/jpeg "); 
    14         }
    15 
    16         /// <summary>
    17         /// 检查图片验证码是否正确
    18         /// </summary>
    19         /// <param name="code"></param>
    20         /// <returns></returns>
    21         public ActionResult CheckPicCode(string code)
    22         {
    23             var cookieCode = CookieHelper.GetCookie("PicCode");
    24             if (string.IsNullOrWhiteSpace(cookieCode))
    25             {
    26                 return Json("验证码过期",JsonRequestBehavior.AllowGet);
    27             }
    28             if (code.Trim().ToUpper() == cookieCode.ToUpper())
    29             {
    30                 return Json("验证码正确",JsonRequestBehavior.AllowGet);
    31             }
    32             else
    33             {
    34                 return Json("验证码错误",JsonRequestBehavior.AllowGet);
    35             }
    36         }
    37     }

    4.前台页面. 通过修改img的src链接,来实现点击刷新图片.

     1 <head>
     2     <title></title>
     3     <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
     4 </head>
     5 <body>
     6     <input type="text" id="inpCode" />
     7     <img id="picCode" src="/Home/ImageValidator" />
     8     <button id="btnCheck" >校验</button>
     9 </body>
    10 </html>
    11 <script>
    12 
    13     $(function () {
    14 
    15         $("#picCode").on('click', function () {
    16             $(this).attr('src', "/Home/ImageValidator?v=" + new Date().getTime());
    17         })
    18 
    19         $("#btnCheck").on('click', function () {
    20             $.ajax({
    21                 type: 'get',
    22                 url: "/Home/CheckPicCode",
    23                 data: {
    24                     code:$("#inpCode").val()
    25                 },
    26                 success: function (data) {
    27                     alert(data);
    28                 }
    29             })
    30         })
    31 
    32     })
    33 
    34 </script>

    5. 基本代码实现了,点击图片刷新验证码,图片验证码有效期是一分钟.效果图如下:

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:Linda
  • 加入时间:2013/7/2 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮