ASP.NET中的无刷新验证码的开发(完整代码)

下面我将详细讲解ASP.NET中的无刷新验证码的开发，包括完整代码和示例说明。

环境准备

在开始开发之前，需要准备好以下环境：
- Visual Studio 2019
- .NET Framework 4.6.1或以上版本
- jQuery库

实现流程

本篇攻略中的无刷新验证码，是通过使用jQuery和ASP.NET的Web服务技术实现的。具体的实现流程如下：

1. 生成验证码图片

首先，需要生成随机的验证码图片以供用户识别。可以使用以下方式来生成验证码图片：

public void GenerateCaptchaImage(string captchaCode)
{
    Bitmap image = new Bitmap(80, 30);
    Graphics graphics = Graphics.FromImage(image);
    graphics.Clear(Color.White);

    // 绘制验证码
    graphics.DrawString(captchaCode, new Font("Arial", 16), Brushes.Black, new PointF(5, 5));

    // 绘制噪点
    Random random = new Random();
    for (int i = 0; i < 100; i++)
    {
        int x = random.Next(image.Width);
        int y = random.Next(image.Height);
        image.SetPixel(x, y, Color.FromArgb(random.Next()));
    }

    // 绘制边框
    graphics.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

    // 输出图片
    MemoryStream memoryStream = new MemoryStream();
    image.Save(memoryStream, ImageFormat.Png);
    Response.ClearContent();
    Response.ContentType = "image/png";
    Response.BinaryWrite(memoryStream.ToArray());
}

2. 生成随机验证码

然后，需要生成一个随机的验证码字符串，以供上一步生成图片时使用。可以使用以下方式来生成随机的验证码字符串：

public string GenerateCaptchaCode()
{
    string captchaCode = "";
    var random = new Random();
    for (int i = 0; i < 5; i++)
    {
        captchaCode += (char)('a' + random.Next(0, 26));
    }
    return captchaCode;
}

3. 调用Web服务获取验证码

接下来，前端页面通过Ajax调用Web服务获取验证码图片的URL和验证码字符串：

function getCaptcha() {
    $.ajax({
        url: '/CaptchaWebService.asmx/GetCaptcha',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $("#captchaImg").attr("src", data.ImageUrl);
            $("#captchaCode").val(data.CaptchaCode);
        },
        error: function (xhr, statusText, errorThrown) {
            alert(errorThrown);
        }
    });
}

这里的/CaptchaWebService.asmx/GetCaptcha是指向Web服务的URL，后面会在WebService中实现该方法。

4. Web服务实现获取验证码

在Web服务中，需要实现获取验证码的方法，该方法返回一个JSON对象，包括验证码图片的URL和验证码字符串：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void GetCaptcha()
{
    string captchaCode = GenerateCaptchaCode();
    GenerateCaptchaImage(captchaCode);
    string imageUrl = string.Format("/CaptchaImageHandler.ashx?c={0}", captchaCode);
    var result = new { ImageUrl = imageUrl, CaptchaCode = captchaCode };
    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(result));
}

5. 验证用户输入

最后，验证用户输入的验证码是否正确。前端页面可以通过以下方式获取用户输入的验证码：

var captchaCode = $("#inputCaptcha").val();

然后将该验证码字符串和Web服务返回的验证码字符串进行比较，判断用户输入的验证码是否正确。

完整代码

下面是完整的代码。其中，CaptchaImageHandler.ashx用于从URL中获取验证码字符串，并调用GenerateCaptchaImage方法生成验证码图片。CaptchaWebService.asmx用于提供获取验证码的Web服务。

// CaptchaImageHandler.ashx.cs
public class CaptchaImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/png";
        string captchaCode = context.Request.QueryString["c"];
        GenerateCaptchaImage(captchaCode);
    }
    public bool IsReusable => false;
    private void GenerateCaptchaImage(string captchaCode)
    {
        Bitmap image = new Bitmap(80, 30);
        Graphics graphics = Graphics.FromImage(image);
        graphics.Clear(Color.White);

        // 绘制验证码
        graphics.DrawString(captchaCode, new Font("Arial", 16), Brushes.Black, new PointF(5, 5));

        // 绘制噪点
        Random random = new Random();
        for (int i = 0; i < 100; i++)
        {
            int x = random.Next(image.Width);
            int y = random.Next(image.Height);
            image.SetPixel(x, y, Color.FromArgb(random.Next()));
        }

        // 绘制边框
        graphics.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

        // 输出图片
        MemoryStream memoryStream = new MemoryStream();
        image.Save(memoryStream, ImageFormat.Png);
        HttpContext.Current.Response.BinaryWrite(memoryStream.ToArray());
    }
}

// CaptchaWebService.asmx.cs
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
public class CaptchaWebService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public void GetCaptcha()
    {
        string captchaCode = GenerateCaptchaCode();
        GenerateCaptchaImage(captchaCode);
        string imageUrl = string.Format("/CaptchaImageHandler.ashx?c={0}", captchaCode);
        var result = new { ImageUrl = imageUrl, CaptchaCode = captchaCode };
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(result));
    }

    private void GenerateCaptchaImage(string captchaCode)
    {
        Bitmap image = new Bitmap(80, 30);
        Graphics graphics = Graphics.FromImage(image);
        graphics.Clear(Color.White);

        // 绘制验证码
        graphics.DrawString(captchaCode, new Font("Arial", 16), Brushes.Black, new PointF(5, 5));

        // 绘制噪点
        Random random = new Random();
        for (int i = 0; i < 100; i++)
        {
            int x = random.Next(image.Width);
            int y = random.Next(image.Height);
            image.SetPixel(x, y, Color.FromArgb(random.Next()));
        }

        // 绘制边框
        graphics.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);

        // 输出图片
        MemoryStream memoryStream = new MemoryStream();
        image.Save(memoryStream, ImageFormat.Png);
        HttpContext.Current.Response.BinaryWrite(memoryStream.ToArray());
    }

    private string GenerateCaptchaCode()
    {
        string captchaCode = "";
        var random = new Random();
        for (int i = 0; i < 5; i++)
        {
            captchaCode += (char)('a' + random.Next(0, 26));
        }
        return captchaCode;
    }
}

示例说明

假设我们需要在一个ASP.NET网页中实现无刷新验证码验证，可以按照以下步骤进行：

示例1：生成验证码图片

在我们的ASP.NET页面中，添加一个按钮，点击该按钮可以生成一个新的验证码图片和验证码字符串：

<button id="btnRefreshCaptcha" type="button" onclick="getCaptcha()">刷新</button>
<img id="captchaImg" src="#" alt="验证码" /><br/><br/>
<input id="captchaCode" type="hidden" />

在Javascript中，使用getCaptcha()方法来调用Web服务，获取验证码图片和验证码字符串：

function getCaptcha() {
    $.ajax({
        url: '/CaptchaWebService.asmx/GetCaptcha',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            $("#captchaImg").attr("src", data.ImageUrl);
            $("#captchaCode").val(data.CaptchaCode);
        },
        error: function (xhr, statusText, errorThrown) {
            alert(errorThrown);
        }
    });
}

示例2：验证用户输入

在表单中，添加一个验证码输入框和一个提交按钮。在提交时，验证用户输入的验证码是否正确：

<form method="post" action="form-submit-action">
    <!-- 省略其他表单元素 -->
    <label>验证码：</label>
    <input id="inputCaptcha" type="text" name="captcha" />
    <button type="submit" onclick="return validateCaptcha()">提交</button>
</form>

在Javascript中，使用validateCaptcha()方法来验证用户输入的验证码是否正确：

function validateCaptcha() {
    var captchaCode = $("#inputCaptcha").val();
    var expectedCaptchaCode = $("#captchaCode").val();
    if (captchaCode === expectedCaptchaCode) {
        return true; // 验证通过，提交表单
    } else {
        alert("验证码输入错误！");
        return false; // 验证失败，不提交表单
    }
}

使用以上的示例代码，我们就可以在ASP.NET中实现无刷新验证码验证了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET中的无刷新验证码的开发(完整代码) - Python技术站