ASP.NET Core 6 Web API 生成图形验证码并验证 - Base64 输出和 API 示例

ASP.NET Core 6 Web API 生成图形验证码并验证

本文将介绍如何使用 ASP.NET Core 6 Web API 生成图形验证码并输出 Base64 格式的图片数据，以及如何使用 API 验证用户输入的验证码。

生成图形验证码并输出 Base64 的接口

以下代码示例展示了如何创建一个 GET API 接口，用于生成图形验证码并输出 Base64 数据：

[HttpGet("captcha")]
public IActionResult GetCaptcha()
{
    var captcha = new Captcha();
    var imageBytes = captcha.GenerateImage();
    var base64 = Convert.ToBase64String(imageBytes);
    return Ok(new { ImageData = base64, CaptchaCode = captcha.Code });
}

其中，Captcha 是一个自定义的验证码生成器，具体实现可以参考下面的代码：

public class Captcha
{
    private const int Width = 120;
    private const int Height = 40;
    private const int FontSize = 20;
    private const string FontFamily = "Arial";
    private const int CodeLength = 4;

    private static readonly Random Random = new Random();
    private static readonly string[] CaptchaChars = { "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "2", "3", "4", "5", "6", "7", "8", "9" };

    public string Code { get; }

    public Captcha()
    {
        Code = GenerateCode();
    }

    public byte[] GenerateImage()
    {
        using var bmp = new Bitmap(Width, Height);
        using var g = Graphics.FromImage(bmp);

        g.Clear(Color.White);

        for (var i = 0; i < 5; i++)
        {
            var x1 = Random.Next(Width);
            var y1 = Random.Next(Height);
            var x2 = Random.Next(Width);
            var y2 = Random.Next(Height);
            g.DrawLine(Pens.LightGray, x1, y1, x2, y2);
        }

        var font = new Font(FontFamily, FontSize, FontStyle.Bold);
        var brush = new SolidBrush(Color.Black);

        for (var i = 0; i < Code.Length; i++)
        {
            var ch = Code[i].ToString();
            var x = i * (Width / CodeLength) + Random.Next(-5, 5);
            var y = Random.Next(Height / 2 - FontSize / 2, Height / 2 + FontSize / 2);

            g.DrawString(ch, font, brush, x, y);
        }

        var ms = new MemoryStream();
        bmp.Save(ms, ImageFormat.Png);
        return ms.ToArray();
    }

    private string GenerateCode()
    {
        var sb = new StringBuilder();
        for (var i = 0; i < CodeLength; i++)
        {
            var index = Random.Next(CaptchaChars.Length);
            sb.Append(CaptchaChars[index]);
        }
        return sb.ToString();
    }
}

校验图片验证码的接口

以下代码示例展示了如何创建一个 POST API 接口，用于校验用户输入的验证码：

[HttpPost("verify-captcha")]
public IActionResult VerifyCaptcha([FromBody] VerifyCaptchaRequest request)
{
    if (string.IsNullOrEmpty(request.CaptchaCode) || string.IsNullOrEmpty(request.EnteredCode))
    {
        return BadRequest("Captcha code and entered code are required.");
    }

    if (!string.Equals(request.CaptchaCode, request.EnteredCode, StringComparison.OrdinalIgnoreCase))
    {
        return BadRequest("Entered code does not match captcha code.");
    }

    return Ok();
}

public class VerifyCaptchaRequest
{
    public string CaptchaCode { get; set; }
    public string EnteredCode { get; set; }
}

客户端使用示例

客户端可以通过 GET 请求获取验证码图片的 Base64 数据，然后将验证码图片展示给用户，用户在输入框中输入验证码，然后 POST 请求提交验证码并进行校验。如果验证码校验通过，则返回 200，否则返回 400 并在响应体中包含错误信息。

总结

本文提供了一个完整的 ASP.NET Core 6 Web API 生成图形验证码并验证的代码示例，方便开发者在自己的项目中快速集成该功能。