一款媲美极验的开源行为验证解决方案，用户通过拖动滑块行为来完成校验，支持 PC 端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。

安装使用

组件依赖 font-awesome
CSS

<link href=”./src/slidercaptcha.css”>

将引入样式表的标签复制并粘贴到中，并放在所有其他样式表之前。

<script src=”./src/longbow.slidercaptcha.js”></script>

将引入脚本的<script> 标签复制并粘贴到 <body> 最后面。

用法

添加网页 Html 元素

<div id="captcha"></div>

API

通过 javascript 初始化控件

<div id="captcha"></div>
<script>
  sliderCaptcha({
      id: 'captcha'
  });
</script>

Options

可以根据自己需要设置宽度与高度等配置

<div id="captcha"></div>
<script>
  sliderCaptcha({
      id: 'captcha',
      width: 280,
      height: 150,
      sliderL: 42,
      sliderR: 9,
      offset: 5,
      loadingText: '正在加载中...',
      failedText: '再试一次',
      barText: '向右滑动填充拼图',
      repeatIcon: 'fa fa-redo',
      setSrc: function () {
          
      },
      onSuccess: function () {
          
      },
      onFail: function () {

      },
      onRefresh: function () {
      
      }
  });
</script>

方法

<div id="captcha"></div>
<script>
  var captcha = sliderCaptcha({
      id: 'captcha'
  });
  captcha.reset();
</script>

属性

名称	类型	默认值	说明
width	integer	280	背景图片宽度
height	integer	150	背景图标高度
sliderL	integer	42	拼图宽度
sliderR	integer	9	拼图突出半径
offset	integer	5	验证容错偏差值默认 5 个像素偏差即认为验证通过
loadingText	string	“正在加载中…”	图片加载时显示的文本信息
failedText	string	“再试一次”	验证失败时显示的文本信息
barText	integer	“向右滑动填充拼图”	拖动滑块准备拖动时显示的文本信息
repeatIcon	string	“fa fa-redo”	重新加载图标需引用 font-awesome
setSrc	function	“”	设置图片加载路径
onSuccess	function	null	验证通过时回调此函数
onFail	function	null	验证失败时回调此函数
onRefresh	function	null	点击重新加载图标时回调此函数
localImages	function		图床图片加载失败时调用此方法返回本地图片路径
remoteUrl	string	null	服务器端验证请求地址，请求方式默认为 post 方式
verify	function	function (arr, url) { return true; }	服务器端验证方法 arr 为客户端拖动滑块轨迹，url 为服务器端请求地址，返回值为布尔值

服务端认证

客户端代码示例

1. JavaScript
控件配置信息中有 remoteUrl 和 verify 两个配置项，合理正确的设置这两个配置项即可达到想要的服务器端认证逻辑

remoteUrl 默认值为 null 表示未启用服务器端认证方式，设置请求的 webapi 地址后启用服务器端认证方法控件默认请求服务器端方法如下，可适当进行更改

verify: function (arr, url) {
  var ret = false;
  $.ajax({
      url: url,
      data: JSON.stringify(arr),
      async: false,
      cache: false,
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      success: function (result) {
          ret = result;
      }
  });
  return ret;
}

完整示例代码

sliderCaptcha({
  id: 'captcha',
  repeatIcon: 'fa fa-redo',
  setSrc: function () {
      return 'https://imgs.blazor.zone/images/Pic' + Math.round(Math.random() * 136) + '.jpg';
  },
  onSuccess: function () {
      window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha';
  },
  remoteUrl: "api/Captcha"
});

服务器端代码示例

1. NETCore WebApi

/// <summary>
/// 滑块服务器端验证方法
/// </summary>
[Route("api/[controller]")]
[ApiController]
[AllowAnonymous]
public class CaptchaController : ControllerBase
{
  /// <summary>
  /// 服务器端滑块验证方法
  /// </summary>
  /// <returns></returns>
  [HttpPost]
  public bool Post([FromBody]List<int> datas)
  {
      var sum = datas.Sum();
      var avg = sum * 1.0 / datas.Count;
      var stddev = datas.Select(v => Math.Pow(v - avg, 2)).Sum() / datas.Count;
      return stddev != 0;
  }
}

2.JAVA SpringBoot

可能会存在精度问题，采用 BigDecimal 计算即可

@RestController
@RequestMapping("/sliderCaptcha")
public class SliderCaptchaController {

  @PostMapping("/isVerify")
  public boolean isVerify(List<Integer> datas) {
      int sum = 0;
      for (Integer data : datas) {
          sum += data;
      }
      double avg = sum * 1.0 / datas.size();
      
      double sum2 = 0.0;
      for (Integer data : datas) {
          sum2 += Math.pow(data - avg, 2);
      }
      
      double stddev = sum2 / datas.size();
      return stddev != 0;
  }
  
}