往右划的验证码，是在验证什么？

JavaScript018

往右划的验证码，是在验证什么？,第1张

目前滑动验证码的功能主要还是增加用户的安全，验证的是这是人为操作还是机器操作，防止一些不法分子利用自动程序恶意注册登录、暴力破解密码以及批量操作（刷单、发帖）等行为。如果没有验证码，暴力破解密码后就可以直接登录，相反，如果设置了验证码，程序很难识别，那么就无法登录成功。除此之外，还可以防止黑客恶意攻击从而导致服务器压力太大而崩溃，比如论坛灌水、刷页、刷票等，有些论坛回复需要输入验证码就是出于这个目的。

1、识别判断出现的滑动验证码。

这个步骤并不复杂，在编程里有很多这样的调试工具，根据实际应用场景选择合适的专业工具。然后利用一段获取图片的代码自动获取到带有滑动验证码的图片的信息。最后通过相应代码获取它们的网络地址，并将其下载并保存到本地。

2、确定滑动验证码的滑动位置，如果是那种带有缺口位置的验证码，就需要拖动拼合滑块才能完成验证。

将保存在本地的带有滑动验证码的图片调出来然后分析图片中的相关信息。这个步骤，就需要用到图像匹配技术。通俗的讲，就是用相应的原生代码进行图像匹配识别以及坐标定位。

3、根据上述收集到相关信息计算滑块移动轨迹并模拟人移动滑块的整个过程。

计算出了滑块移动的轨迹图，接下来就需要模拟人移动滑块的过程。现在的滑动验证码识别安全性很高，绝大多数都加入了机器学习模型，也就是说，人在移动滑块的时候不可能是匀速的。所以说，只是简单的匀速滑动肯定是被认定为机器操作。因此模拟人拖动滑块的过程中需要加入几个过程，比如先加速，再减速，适当加入回退和随机抖动，尽可能的模拟人的行为。滑动的过程可以通过在代码中设置相应变量，再加上相应公式就可以解决，对于专业人员并不复杂。

1、手机网页无法滑动验证，导致该现象的原因有很多，有可能是网络的问题，导致网页加载崩溃，验证过程中无法滑动。也有可能是浏览器模式不兼容，可以尝试从极速模式转变成兼容模式。

2、滑动拼图验证的正确姿势：点击验证按钮后弹出滑动拼图的验证浮窗；按住滑块不放，向右拖动，仔细将图片中的拼块进行拼合；当拼图拼合完毕后松手，验证便顺利通过。

方法/步骤

打开网页编辑器编写div+css代码，先把界面做好，然后再做功能，代码如下所示：

<form name="form1">

请输入要产生的验证码的位数：<input type="text" name="digit" id="digit">

<br><br>

<input type="button" value="生成" onClick="deal()">

&nbsp<input type="button" value="刷新" onClick="qc()">

<br><br>

<div id="result"></div>

</form>

请点击输入图片描述

写好之后，我们写CSS代码，然后再调试一下，争取在前台显示的美观一些。CSS代码如下所示：

<style>

body{background:#ccc }

form{margin-left:20%margin-top:10%}

</style>

请点击输入图片描述

弄好之后用浏览器打开，界面如下图所示：

请点击输入图片描述

弄好前端界面之后，我们就需要写JS了，步骤主要如下所示，首先我们先定义一个参数，这个参数是我们输入文本框的数字，生成随机数用到了random方法，先看第一个方法，第一个方法我们用for循环来显示出随机数的个数。代码如下所示：

function cg(digit)

{

var result=""

for(i=0i<parseInt(digit)i++)

{

result=result+(parseInt(Math.random()*10)).toString()

}

return  result

}

请点击输入图片描述

第一个函数写好后我们来看第二个，第二个函数是输出生成的验证码，代码很少：如下所示（含删除代码）

function deal()

{

result.innerHTML="产生的验证码是："+cg(form1.digit.value)

}

function qc()

{

form1.digit.value=""

}

请点击输入图片描述

写好之后，我们验证一下，我在文本框内输入5，结果输出了5个数字，结果显示没有错误。

请点击输入图片描述

当然这么写也是有BUG的，例如输入0、负数、或者小于1的小数都不会生成验证码。如果大家有兴趣，可以修改这些BUG。

请点击输入图片描述