行为验证码自定义类型设置 [ 技术分享 ]

前言

现在大部分的网站和手机软件都会使用到验证码的登录、注册、操作提醒功能。但是，你知道验证码到底有多少类型吗？今天小编就利用KgCaptcha中的设置给你详细介绍一下。

01 滑动拼图

滑动拼图验证是在滑块验证码的基础上增加了一个随机滑动距离，用户需要将滑块滑到拼图的缺口处，使拼图完整，才能通过验证码。

02 文字点选

在文字点选验证码使用上，用户只要根据提示，按照顺序点击图中文字，即可完成验证。

03 语序点选

在语序点选验证码使用上，用户需按照常用语的顺序点击正确的文字，即可完成验证。

04 字体识别

在字体识别验证码使用上，点击与其它字符不同字体的文字，用户仅需一次点击，即可进行安全验证。

05 空间推理

在空间推理验证码使用上，根据提示，点击对应的元素，即可进行安全验证。

代码片段

下面，我以滑动式和点选式验证码为示例。

滑动式验证码

鼠标移动滑块，限制右侧的拖出范围，获取css样式中left值，然后计算出滑动距离。最后当鼠标松开，发送数据并验证。

/* 鼠标移动 onmousemove|ontouchmove */
function eventMove(e){
    /* 相关元素基本属性设置 */
    kg.show(sDiv[1], 1); /* 显示拉出进度条 */

    kg.html(sDiv[5], "");
    sDiv[1].style.width = "0px";
    slide.style.borderColor = "#2A62FF";  /* 小箭头边框颜色 */
    slide.style.backgroundImage = 'url("' + kgConfig["icon"][3] + '")';

    /* 拉出进度条长度 */
    sDiv[1].style.width = strip.offsetLeft + 20 + "px";  /* 20 为按钮下的重叠部分 */

    /* 滑动条箭头位置移动 */
    slide.style.left = (kg.os === "Phone" ? e.changedTouches[0].clientX : e.clientX) - offsetX + "px";  /* 小箭头位置移动 */
    if (slide.offsetLeft <= -kgConfig["border"][0]) {
        slide.style.left = "-" + kgConfig["border"][0] + "px";
    }
    var sMax = kgConfig["bgSize"][0] - 50 - kgConfig["border"][0]*3  /* 50 按钮宽度 */
    if (slide.offsetLeft > sMax) {
        slide.style.left = sMax + "px";
    }

    /* 同步拼图长条位置移动 */
    strip.style.left = slide.offsetLeft + "px";  /* 拼图长条位置移动 */
    if (strip.offsetLeft <= 0) {  /* 左侧拖出限制 */
        strip.style.left = "0px";
    }
    var tMax = kgConfig["bgSize"][0] - 62  /* 右侧拖出限制，52为拼图小方块内容大小/72为条形宽度 */
    if (strip.offsetLeft > tMax) {
        strip.style.left = tMax + "px";
    }
}

点选式验证码

点击文字，记录用户每次点击的位置并生成数字圆点和点击次数，当点击次数达到指定次数则发送数据并进行验证。

/* 点击文字事件 */
KgDisplay[2].addEventListener("mousedown", function (e) {
    if (clickCount === 0){
        startTime = new Date().getTime();  /* 记录第一次点击时间 */
    }
    e = e || window.event

    /* 获取点击位置 */
    var clickCoord = kg.clickCoord(KgDisplay[2], e);

    if (strxy){strxy += ", "}
    strxy += "[" + clickCoord["x"] + ", " + clickCoord["y"] + "]";  /* 记录每次点击的坐标值 */

    clickCount ++;  /* 当前点击次数 */

    /* 生成数字圆点 */
    var cube = document.createElement('div');
    cube.className = "SmallCube";
    cube.style.left = clickCoord["x"]-14 + "px";  /* （宽24px + 边2px*2）/ 2 */
    cube.style.top = clickCoord["y"]-14 + "px";
    cube.innerHTML = clickCount.toString();
    KgDisplay[2].parentNode.insertBefore(cube, KgDisplay[2].nextSibling);
    if (clickCount >= kgConfig["strCount"]){  /* 4次点完了 */
        /* 发送数据并验证 */
        ...
    }
});

相关链接

SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/