上一篇介绍了实现验证码生成的方法跟验证方法。本篇文章介绍如何在项目中使用。
目录
项目配置
在实际应用中,我们可以添加打包好的.nupkg文件,也可以使用添加现有项目的方式,把源码添加到现有项目中。
在appsettings.json
中,添加ImageCaptcha节点。
"ImageCaptcha": {
"ExpiresIn": 60,
"CacheKey": "",
"Tolerant": 0.02,
"Backgrounds": [
{
"Type": "file",
"Data": "wwwroot/captcha/background/1.jpg"
}
],
"Templates": [
{
"Slider": {
"Type": "file",
"Data": "wwwroot/captcha/template/1/slider.png"
},
"Notch": {
"Type": "file",
"Data": "wwwroot/captcha/template/1/notch.png"
}
}
]
}
ExpiresIn:缓存过期时长,单位秒。
CacheKey:缓存名称前缀。
Tolerant:容错值,凹槽位置与实际滑动位置匹配容错范围。
Backgrounds:验证码背景图
Templates:凹槽与滑块模板,如果不配置此项。使用默认的嵌入资源。需要注意的是,Templates下的滑块与凹槽,必须成对出现。
配置完appsettings.json后,进行代码配置,Program.cs中:
简单配置
builder.Services.AddSlideCaptcha(configuration);
详细配置:
builder.Services.AddSlideCaptcha(configuration, options =>
{
options.Backgrounds.Add(new Resource(FileResourceHandler.TYPE, @"wwwroot/captcha/background/1.jpg"));
options.Templates.Add(
TemplatePair.Create(
new Resource(FileResourceHandler.TYPE, @"wwwroot/captcha/template/1/slider.png"),
new Resource(FileResourceHandler.TYPE, @"wwwroot/captcha/template/1/notch.png"),
CaptchaTypeConstant.SLIDER
)
);
});
配置完成后,定义接口:ApiController
[Route("api/[controller]")]
public class CaptchaController : ControllerBase
{
private readonly ICaptcha _captcha;
public CaptchaController(ICaptcha captcha)
{
_captcha = captcha;
}
public async Task<AjaxResult<CaptchaData>> Captcha(string type = "SLIDER")
{
var captcha = await _captcha.GenerateCaptchaImageAsync(type);
return new AjaxResult<CaptchaData>
{
data = captcha,
success = true
};
}
[HttpPost]
public AjaxResult Validate(string id, SlideTrack track)
{
var result = new AjaxResult();
track.StartTime = track.StartTime.ToLocalTime();
track.EndTime = track.EndTime.ToLocalTime();
ValidateResult validateResult = _captcha.Validate(id, track);
//成功
if (validateResult.Result == ValidateResultType.Success)
{
result.message = "验证成功";
result.success = true;
return result;
}
//超时
if (validateResult.Result == ValidateResultType.Timeout)
{
result.success = false;
result.message = "验证超时, 请重新操作";
return result;
}
//失败
if (validateResult.Result == ValidateResultType.ValidateFail)
{
result.success = false;
result.message = "验证未通过, 请重新操作";
return result;
}
result.success = false;
result.message = "未知错误, 请重新操作";
return result;
}
}
代码中AjaxResult.cs
public class AjaxResult
{
/// <summary>
/// 是否成功
/// </summary>
public bool success { get; set; } = true;
/// <summary>
/// 错误代码
/// </summary>
public int code { get; set; } = 0;
/// <summary>
/// 返回消息
/// </summary>
public string message { get; set; }
}
AjaxResult.T.cs
public class AjaxResult<T> : AjaxResult
{
/// <summary>
/// 返回数据
/// </summary>
public T data { get; set; }
}
我们完成了在实际项目中搭建滑动验证码的服务。
下一篇,介绍前端滑动验证码的实现,前端验证码组件我写了2个,1个是普通HTML+CSS+Jquery的。另一个是vue3的。
下载方式:
点击下方公众号卡片,关注我,回复captcha
免费领取!