asp.net登录验证码实现方法

实现一个 ASP.NET 登录验证码的方法如下：

1. 安装 NuGet 包

使用NuGet包管理器控制台：

Install-Package Microsoft.AspNet.WebPages.OAuth -Version 3.2.3

1. 在应用程序配置文件中添加配置

在应用程序的 web.config 配置文件中，添加以下配置来设置验证码选项：

<appSettings>
  <add key="ValidationCode:Width" value="100" />
  <add key="ValidationCode:Height" value="36" />
  <add key="ValidationCode:Length" value="4" />
</appSettings>

上面的配置是设置验证码宽度为 100 像素，高度为 36 像素，验证码长度为 4。

1. 实现验证码生成

在 ASP.NET 的 MVC 控制器中实现验证码的生成代码：

public ActionResult ValidationCode()
{
    int width = int.Parse(ConfigurationManager.AppSettings["ValidationCode:Width"]);
    int height = int.Parse(ConfigurationManager.AppSettings["ValidationCode:Height"]);
    int length = int.Parse(ConfigurationManager.AppSettings["ValidationCode:Length"]);

    var validationCode = new ValidationCode(width, height, length);
    var code = validationCode.CreateValidationCode();
    var image = validationCode.CreateImageOnPage(code);

    Response.ClearContent();
    Response.ContentType = "image/Gif";
    image.Save(Response.OutputStream, ImageFormat.Gif);
    Response.End();

    return null;
}

上述代码通过读取 web.config 文件中的配置项，从而设置验证码的大小和长度。ValidationCode 类封装了验证码的生成和绘制方法，CreateValidationCode() 方法用于生成验证码，CreateImageOnPage() 方法用于在页面上绘制验证码。

1. 在登录页面中添加验证码控件

在 ASP.NET 所使用的登录页面视图文件中，添加以下代码来生成验证码：

<img src="@Url.Action("ValidationCode")" />
<input type="text" name="VerifyCode" id="VerifyCode" />

这里使用 ASP.NET 的 Url.Action() 方法来生成验证码的 URL 地址，从而显示验证码图片。

1. 验证码判断

在登录验证的处理程序中，添加以下代码来判断输入的验证码是否正确：

string verifyCode = Request.Form["VerifyCode"];
if (string.Equals(Session["VerifyCode"] as string, verifyCode, StringComparison.OrdinalIgnoreCase) == false)
{
    ModelState.AddModelError("VerifyCode", "Verification code is invalid.");
}

上述代码从表单中获取验证码输入值，然后与会话中保存的验证码进行比对，如果不一致，就认为验证码输入错误。

实现过程中，需要注意以下几点：

• 在生成验证码的代码中，需要使用 Response.End() 方法来结束响应，否则还会向客户端输出无用的 HTML 代码。
• 在验证验证码的代码中，需要将验证码的输入值与 Session 中保存的验证码进行比对，而不是每次生成一个验证码时就保存一个新的 Session，否则会导致验证码无法正确验证。
• 在开启验证码的情况下，需要通过 JavaScript 来禁用浏览器的表单自动填充功能，否则会导致验证码无法正确验证。

示例代码：

以下是一个基于 ASP.NET MVC 框架的完整登录验证码实现代码示例：

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web;
using System.Web.Configuration;

namespace ASP.NET.Web.App.Helpers
{
    public class ValidationCode
    {
        private int width;
        private int height;
        private int length;

        public ValidationCode(int width, int height, int length)
        {
            this.width = width;
            this.height = height;
            this.length = length;
        }

        private const string VNum = "23456789";//数字
        private const string VLow = "abcdefghijklmnopqrstuvwxyz";//小写字母
        private const string VUpp = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//大写字母

        private string CreateRandomCode()
        {
            var allChar = $"{VNum}{VLow}{VUpp}";
            var ran = new Random();
            var sb = new System.Text.StringBuilder(length);
            for (var i = 0; i < length; i++)
            {
                sb.Append(allChar[ran.Next(allChar.Length)]);
            }

            // 将验证码保存到 Session 中
            HttpContext.Current.Session["VerifyCode"] = sb.ToString();

            return sb.ToString();
        }

        public string CreateValidationCode()
        {
            return CreateRandomCode();
        }

        public Bitmap CreateImageOnPage(string code)
        {
            Bitmap bmp = new Bitmap(width, height);
            Graphics g = Graphics.FromImage(bmp);

            //产生随机双胞胎
            var random = new Random();
            var num = random.Next(10, 100);
            string currentNum = num.ToString();

            Pen pen = new Pen(Color.Black, 1);
            for (int i = 0; i < 1; i++)
            {
                Point beginPoint = new Point(random.Next(bmp.Width), random.Next(bmp.Height));
                Point endPoint = new Point(random.Next(bmp.Width), random.Next(bmp.Height));

                g.DrawLine(pen, beginPoint, endPoint);//划线
            }

            //画图
            char[] chars = code.ToCharArray();
            StringFormat format = new StringFormat(StringFormatFlags.NoClip);
            format.Alignment = StringAlignment.Center;
            format.LineAlignment = StringAlignment.Center;
            Color[] color ={ Color.Red, Color.Black, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.DarkBlue };
            string[] font ={ "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋体" };
            int cindex, findex;
            for (int i = 0; i < chars.Length; i++)
            {
                if (random.Next(9) > 1) continue;//随机跳过一些字符，减少干扰项
                cindex = random.Next(7);
                findex = random.Next(5);
                Brush brush = new SolidBrush(color[cindex]);
                Font fontt = new Font(font[findex], 14, (FontStyle.Bold | FontStyle.Italic));
                Point _point = new Point(18 + i * 20, 16);
                g.DrawString(chars[i].ToString(), fontt, brush, _point, format);
            }
            //显示验证码图形
            g.DrawString(currentNum, new Font("微软雅黑", 10), Brushes.DarkRed, 1, 1);
            g.Dispose();
            return bmp;
        }
    }
}

控制器中的操作方法：

public ActionResult ValidationCode()
{
    int width = int.Parse(WebConfigurationManager.AppSettings["ValidationCode:Width"]);
    int height = int.Parse(WebConfigurationManager.AppSettings["ValidationCode:Height"]);
    int length = int.Parse(WebConfigurationManager.AppSettings["ValidationCode:Length"]);

    var validationCode = new ValidationCode(width, height, length);
    var code = validationCode.CreateValidationCode();
    var image = validationCode.CreateImageOnPage(code);

    Response.ClearContent();
    Response.ContentType = "image/Gif";

    image.Save(Response.OutputStream, ImageFormat.Gif);

    Response.End();

    return null;
}

登陆页面视图文件中的代码：

<div class="form-group">
    <label for="VerifyCode" class="col-sm-2 control-label">验证码</label>
    <div class="col-sm-6">
        <img src="@Url.Action("ValidationCode")" onclick="this.src = this.src + '?'" />
        <input type="text" name="VerifyCode" id="VerifyCode" placeholder="请输入验证码" class="form-control" data-val="true" data-val-required="验证码不能为空" aria-required="true" aria-describedby="VerifyCode-error" />
        <span class="field-validation-error" data-valmsg-for="VerifyCode" data-valmsg-replace="true"></span>
    </div>
</div>

以上就是 ASP.NET 实现登录验证码的完整攻略。