vaptcha验证码接入

注册

官网

• 新建验证单元
• 拿到VID和KEY

代码流程

开发文档

例子

样式

前端代码

    

        

            
                
            
            Vaptcha启动中...
        
    

重点

两种获得token方式

//获取token的方式一：
    //vaptchaObj.renderTokenInput('.login-form')//以form的方式提交数据时，
    使用此函数向表单添加token值
    //获取token的方式二：
    vaptchaObj.listen('pass', function() {
    // 验证成功进行后续操作
    var data = {
      //表单数据
      token: vaptchaObj.getToken()
    }
    $.post('login',data, function(r) {
      if(r.code !== 200) {
        console.log('登录失败');
        vaptchaObj.reset(); //重置验证码
      }
    })

方式1:

• 表单里面最简单
  方式2:
• 自己进行post后台,然后自己进行额外操作.麻烦

实战

1. style 样式 和 前端代码都不说了.自己添加上去
2. 主要是js问题比较容易懵逼
3. 只介绍方式1获得tonke

js

vaptcha({
        vid: '********', // 验证单元id   上面的VID写这里
        type: 'click', // 显示类型 嵌入式
        scene: 0, // 场景值 默认0
        container: '#vaptchaContainer', // 容器，可为Element 或者 selector
        offline_server: window.location.href, //离线模式服务端地址
        //可选参数
        lang: 'zh-CN', // 语言 默认zh-CN,可选值zh-CN,en,zh-TW,jp
        https: true, // 使用https 默认 true
    }).then(function (vaptchaObj) {
            vaptchaObj.renderTokenInput('.login-form');
            vaptchaObj.render();
        }
    )

• 不验证
  

• 验证后
  
  会有token

• 前面js最好检查一下用户是否进行了验证

后端

1. 接受form数据
2. 检查token值
   拿到token值之后进行post vaptcha的url检查是否人为登录

地址: http://0.vaptcha.com/verify

自己检查返回的数据进行操作

完事~!