.Net开发的拖动滑块行为验证码

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

安装使用

组件依赖 font-awesome
CSS

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

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

JS

<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. 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;
  }
  
}

 

 

截图

 

.Net 开发的拖动滑块行为验证码 .Net 开发的拖动滑块行为验证码

开源地址

https://gitee.com/LongbowEnterprise/SliderCaptcha

 

 

 

 

 

 

 

 

 

 

© 版权声明

☆ END ☆
喜欢就点个赞吧
点赞0 分享
图片正在生成中,请稍后...