向右滑动完成验证——实现与应用

一、基础实现

在实现向右滑动完成验证之前，我们需要先了解基础实现原理。可以通过监听鼠标移动事件，获取到鼠标在屏幕上的起始位置，以及鼠标在移动过程中的位移，最后根据位移判断验证是否成功。

function verification() {
  var slider = document.getElementById("slider");
  var icon = document.getElementById("icon");
  var label = document.getElementById("label");
  var originX = 0;
  var originY = 0;
  var currentX = 0; 

  // 鼠标按下事件
  slider.onmousedown = function(e) {
    originX = e.clientX;
    originY = e.clientY;
    document.onmousemove = function(e) {
      var offsetX = e.clientX - originX;
      var offsetY = e.clientY - originY;
      if (offsetX >= 200) {
        icon.style.display = "none";
        label.innerHTML = "验证通过";
        slider.className = "slide right";
      }
      slider.style.left = currentX + offsetX + "px";
    }
    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
      currentX = parseInt(slider.style.left);
    }
  }
}

上面的代码中，我们通过获取slider元素，监听鼠标按下、移动、抬起事件，控制slider的位置和显示状态，来实现向右滑动完成验证的基础功能。

二、通用优化

基础实现只是实现了验证功能，但是在实际应用中，我们需要对其进行一些通用的优化。

首先，在手机端通常会出现横滑页面的情况，我们需要解决横滑与验证功能的冲突，可以通过监听touch事件并阻止事件传播来实现：

slider.ontouchstart = function(e) {
  e.preventDefault();
  ...
}

其次，在验证过程中，可以添加动画效果，增强用户体验。我们可以在验证成功时，通过transition属性来实现slider的平滑滑动效果：

.slide.right {
  left: 200px;
  transition: 0.3s ease;
}

此外，我们还可以添加验证码失效的功能。当用户在规定的时间内未能完成验证，就提示用户重新获取验证码。

三、安全性考虑

考虑到诸多恶意行为，我们需要在实现向右滑动完成验证的过程中保障用户的安全性。

1、防刷的实现

我们可以在验证完成之后，将验证结果发送给后台，后台进行验证，并返回验证结果。后台可以通过一些手段来判断是否是机器人，比如通过IP地址、UA信息等。如果后台检测到有大量的请求，则可以将其视为恶意请求，拒绝服务。

2、验证码的生成与随机性

验证码的生成应具有足够的随机性，否则有可能被恶意破解。我们一般使用随机数来生成验证码（可应用于数字或字符的验证码），或使用图片验证码，能够增大验证码的难度。

3、验证时效的设置

为了避免攻击者使用截获并利用验证码的方式，我们一般会设置验证码的有效期限。

四、实际应用

向右滑动完成验证已经成为了现在各类网站和App中常见的一种功能。比如淘宝、支付宝、微信等都已经采用了这种验证方式，而且在体验上很优秀，能够一定程度上保护用户账号的安全。

下面我们以淘宝为例，看一下其实际应用中的效果实现。

// 淘宝登录页的js代码
$('#nocaptcha').nc({
  appId: 'xxxx',
  scene: 'register',
  token: '${token}',
  customWidth: 400,
  trans: {
    key1: "",
    key2: "",
    key3: "",
    fail_c: "拖动滑块将悬浮图像正确拼合"
  },
  callback: function (data) {
    if (data.code == '200') {
      // 验证成功逻辑
    }
  }
})

淘宝的实现中，使用了Token传输机制以及语言包的方式，来增强安全性和用户体验。Token是一串字符串，是后台用来验证请求是否合法的标志，必须要携带Token才能进行验证。而语言包则是提供了多种语言的验证提示，方便不同国家地区的用户使用。

五、策略更新

由于验证方式在一段时间内会被攻击者逐渐破解，我们需要不断更新客户端和服务器端的验证策略，来增强安全性，提高用户体验。

我们可以使用一些前沿的技术，比如使用AI进行用户识别等方式，来进行大规模和细节化的操作识别，以增加攻击者攻击的难度。

六、总结

向右滑动完成验证已经成为了现在各类网站和App中常见的一种验证方式，通过本文的讲解，我们了解了实现向右滑动完成验证的基础实现、通用优化及其安全性考虑、实际应用和策略更新等方面，希望这对于大家学习和应用有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/237090.html