frank

VAPTCHA:新一代手势验证码快速接入教程
1 简介VAPTCHA 是 Variation Analysis based Public Turing Test...
扫描右侧二维码阅读全文
18
2018/12

VAPTCHA:新一代手势验证码快速接入教程

1 简介

VAPTCHA 是 Variation Analysis based Public Turing Test to Tell Computers and Humans Apart(基于变量分析法来区分人类和计算机的图灵测试程序),又称为手势验证,是验证码的一种。

随着互联网的普及,为了防止黑客利用程序机器人恶意注册、暴力破解密码、论坛灌水、刷票等,2002年由卡内基梅隆大学的路易斯·冯·安、Manuel Blum、Nicholas J.Hopper 以及 IBM 的 John Langford 发明了验证码,通过生成一组随机字符串让用户识别并填写,从而区分人和计算机,为了对抗破解程序对字符进行识别,验证码会对字符进行环境干扰和变形。与传统验证码需要用户填写程序处理后很难识别的字符不同,VAPTCHA 的“验证码”是一个清晰可见的轨迹图。它的验证流程是,系统随机生成一条路径轨迹,用户用鼠标绘制一样的轨迹,只有达到特定相似率才能通过验证。

2 接入

2.1 注册账户

进入 VAPTCHA 注册页面注册账户(可以使用Google、Facebook、Twitter、微信、QQ第三方登录)

VAPTCHA 注册界面

2.2 创建验证单元

登录完毕后,会看到如下界面(由于我已经注册并使用,所以界面会略有不同)

VAPTCHA 管理页面

点击创建验证单元,按照下图配置

VAPTCHA 验证单元配置界面

会看到下面有一个VID(详见下图),点击复制,后面会用到

VAPTCHA 验证单元界面

2.3 前端接入

首先是通过js获取流水号以及验证码

<script src="https://cdn.vaptcha.com/v2.js"></script>
<script>
document.getElementById("***").setAttribute("disabled", true); //在验证未通过时禁止点击按钮的id,填写时带上#
vaptcha({
    vid: '***', // 验证单元id
    type: 'click', // 显示类型 点击式
    container: '.vaptcha-container'
}).then(function (vaptchaObj) {
    vaptchaObj.listen('pass', function() {
        document.getElementById("***").removeAttribute("disabled"); //同上
    })
    vaptchaObj.render()
})
</script>

添加css样式

.vaptcha-container {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
}

.vaptcha-init-main {
    display: table;
    width: 100%;
    height: 100%;
    background-color: #EEEEEE;
}

.vaptcha-init-loading {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.vaptcha-init-loading>a {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: none;
}

.vaptcha-init-loading>a img {
    vertical-align: middle
}

.vaptcha-init-loading .vaptcha-text {
    font-family: sans-serif;
    font-size: 12px;
    color: #CCCCCC;
    vertical-align: middle
}

最后请将如下代码拷贝到要显示验证的地方,即可完成接入

<div class="vaptcha-container" style="width: 300px;height: 36px;">
    <div class="vaptcha-init-main">
        <div class="vaptcha-init-loading">
            <a href="/" target="_blank">
                <img src="https://cdn.vaptcha.com/vaptcha-loading.gif" />
            </a>
            <span class="vaptcha-text">Loading...</span>
        </div>
    </div>
</div>

3 后序

今天就将到这啦,欢迎大家尝试VAPTCHA。

此外,我还为typecho写了一个插件:VAPTCHA,使用typecho的朋友们可以快速使用了。

Last modification:December 20th, 2018 at 12:43 pm
If you think my article is useful to you, please feel free to appreciate

3 comments

  1. frank

    嗯,是有这个问题,貌似是pjax的原因,其他地方是可以的哦

  2. 云泽

    不验证OωO也可以通过

  3. 云泽

Leave a Comment

Loading...