LazySlideCaptcha
介绍
LazySlideCaptcha是基于.Net Standard 2.1的滑动验证码模块。
项目同时提供一个基于vue2的演示前端组件和背景图裁剪工具。
图形验证码请移步lazy-captcha。
在线体验
快速开始
- 安装
- Package Manager
Install-Package Lazy.SlideCaptcha.Core
- .NET CLI
dotnet add package Lazy.SlideCaptcha.Core
- 注册并配置服务
builder.Services.AddSlideCaptcha(builder.Configuration);
// 如果使用redis分布式缓存
//builder.Services.AddStackExchangeRedisCache(options =>
//{
// options.Configuration = builder.Configuration.GetConnectionString("RedisCache");
// options.InstanceName = "captcha:";
//});
"CaptchaSlideOptions": {
"Backgrounds": [
{
"Type": "file",
"Data": "wwwroot/images/background/1.jpg"
},
{
"Type": "file",
"Data": "wwwroot/images/background/2.jpg"
}
]
}
背景图片要求尺寸要求为 552 X 344 , 快速开始可在 Demo 项目 wwwroot/images/background 下挑选。(仅用作演示,生产请自行制作。)也可以通过裁剪工具制作,非常简单,上传图片,拖动范围后保存自动生成 552 X 344 图片。
- 接口定义
[Route("api/[controller]")]
[ApiController]
public class CaptchaController : ControllerBase
{
private readonly ICaptcha _captcha;
public CaptchaController(ICaptcha captcha)
{
_captcha = captcha;
}
///
/// id
///
///
///
[Route("gen")]
[HttpGet]
public CaptchaData Generate()
{
return _captcha.Generate();
}
///
/// id
///
///
///
[Route("check")]
[HttpPost]
public bool Validate([FromQuery]string id, SlideTrack track)
{
return _captcha.Validate(id, track);
}
}
至此后端Api服务已搭建完成。
- 前端
前端提供演示组件lazy-slide-captcha,可通过npm安装。Demo项目为了演示方便直接采用script直接引入方式。
@{
ViewData["Title"] = "滑动验证码";
}
@section Scripts{
}
配置说明
支持配置文件和代码配置,同时配置则代码配置覆盖配置文件。
- 配置文件
"CaptchaSlideOptions": {
"ExpirySeconds": 60, // 缓存过期时长
"StoreageKeyPrefix": "", // 缓存前缀
"Tolerant": 0.02, // 容错值(校验时用,缺口位置与实际滑动位置匹配容错范围)
"Backgrounds": [ // 背景图配置
{
"Type": "file",
"Data": "wwwroot/images/background/1.jpg"
}
],
// Templates不配置,则使用默认模板
"Templates": [
{
"Slider": {
"Type": "file",
"Data": "wwwroot/images/template/1/slider.png"
},
"Hole": {
"Type": "file",
"Data": "wwwroot/images/template/1/hole.png"
}
}
]
}
- 代码配置
builder.Services.AddSlideCaptcha(builder.Configuration, options =>
{
options.Tolerant = 0.02f;
options.StoreageKeyPrefix = "slider-captcha";
options.Backgrounds.Add(new Resource(FileResourceHandler.TYPE, @"wwwroot/images/background/1.jpg"));
options.Templates.Add
(
TemplatePair.Create
(
new Resource(FileResourceHandler.TYPE, @"wwwroot/images/template/1/slider.png"),
new Resource(FileResourceHandler.TYPE, @"wwwroot/images/template/1/hole.png")
)
);
});
扩展
- Template自定义
Template 是指用于生成凹槽和拖块的图片,可通过Templates配置节点设置设置自定义Template。 默认五个 Template (不要配置,已经包含在类库内部)如下:
slider | hole | slider | hole |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
禁用默认 _Template_调用DisableDefaultTemplates即可:
builder.Services.AddSlideCaptcha(builder.Configuration)
.DisableDefaultTemplates();
- Validator自定义
类库提供 SimpleValidator , BasicValidator 两个实现。
SimpleValidator 仅位置验证,BasicValidator除位置验证外,同时对轨迹做验证。BasicValidator由于算法的原因,容易误判,因此类库默认用SimpleValidator_ 做为默认 Validator 。
自定义 Validator 继承 BaseValidator , BaseValidator 提供了基本的位置验证。
举一个栗子:
public class CustomValidator: BaseValidator
{
public override bool ValidateCore(SlideTrack slideTrack, CaptchaValidateData captchaValidateData)
{
// BaseValidator已做了基本滑块与凹槽的对齐验证,这里做其他验证
return true;
}
}
替换默认的Validator
builder.Services.AddSlideCaptcha(builder.Configuration);
.ReplaceValidator();
- ResourceProvider自定义
除了通过Options配置Background和Template外,你也可以通过自定义ResourceProvider的形式提供Background和Template。
public class CustomResourceProvider : IResourceProvider
{
public List Backgrounds()
{
return Enumerable.Range(1, 10)
.ToList()
.Select(e => new Resource(Core.Resources.Handler.FileResourceHandler.TYPE, $"wwwroot/images/background/{e}.jpg"))
.ToList();
}
// 这里返回自定义的Template
public List Templates()
{
return new List();
}
}
注册ResourceProvider
builder.Services.AddSlideCaptcha(builder.Configuration)
.AddResourceProvider();
- 自定义ResourceHandler
public class UrlResourceHandler : IResourceHandler
{
public const string Type = "url";
public bool CanHandle(string handlerType)
{
return handlerType == Type;
}
///
/// 这里仅演示,仍然从本地读取。实际需要通过Http读取
///
///
///
///
public byte[] Handle(Resource resource)
{
if (resource == null) throw new ArgumentNullException(nameof(resource));
return File.ReadAllBytes(resource.Data);
}
}
注册ResourceHandler
builder.Services.AddSlideCaptcha(builder.Configuration)
.AddResourceHandler();
项目参考
项目参考了tianai-captcha,vue-drag-verify非常优秀的项目,非常感谢。