服务端部署

Vaptcha-java-sdk

Step1.环境准备

  • Vaptcha Java SDK 适用于 Java 7 及以上版本。demo使用的是springboot,同时maven使用建议在3以上。

  • 要使用Vaptcha Java SDK,您需要一个Vaptcha账号、一个验证单元以及一对VID和Key。请在Vaptcha验证管理后台查看。

Step2.SDK 获取和安装

  • 使用命令从Github获取:
git clone https://github.com/vaptcha/vaptcha-java-sdk.git

github手动下载获取

  • 引用Vaptcha SDK项目,在你的项目中使用以下代码即可导入SDK:
package com.vaptcha;

Step3.DEMO

demo的vid和key由Vaptcha官方免费提供,只可在localhost:4396下使用,缺少一些限制,可能存在安全隐患。在实际生产环境中,我们建议你登陆Vaptcha管理后台,在验证管理中添加对应的验证单元,并把domain参数设置为实际环境中的域名。

  1. 项目需要maven构建,所以需要先配置maven环境,具体见http://maven.apache.org/install.html
  2. 进入vaptcha-java-sdk目录执行:mvn install
  3. 进入demo目录执行:mvn clean package
  4. 进入demo目录下的target执行:java -jar demo-1.0-SNAPSHOT.jar
  5. 访问http://127.0.0.1:4396/index.html

Step4.SDK接口

  • 初始化Vaptcha
//验证单元ID
String VID = "xxxxxxxxxxxxxxxxxxxxxxxx";
// 验证单元密钥
String KEY = "xxxxxxxxxxxxxxxxxxxxxxxx";
Vaptcha vaptcha = new Vaptcha(VaptchaConfig.VID,VaptchaConfig.KEY);

SDK提供以下三个接口:

  • 获取流水号接口 getChallenge(sceneId) ,返回json字符串

    参数说明:

    sceneId: 选填,场景id,请在Vaptcha管理后台查看

  • 二次验证接口 validate(challenge, token[, sceneId]),返回Boolean

    参数说明:

    challenge: 必填,客户端验证通过后返回的流水号

    token: 必填, 客户端验证通过后返回的令牌

    sceneId: 选填,场景id,与getChallenge(sceneId)的场景id保持一致

  • 宕机模式接口 downTime(data),返回json字符串

    参数说明:

    data: GET请求返回的数据,Request["data"];

Vaptcha-python-sdk

Step1.环境准备

  • Vaptcha Python SDK 兼容python2.7+,如有较低版本用户,请联系Vaptcha技术支持。目前提供基于WSGI服务器的DEMO。

  • 要使用Vaptcha Python SDK,你需要一个Vaptcha账号、一个验证单元以及一对VID和Key。请在Vaptcha验证管理后台查看。

Step2.SDK获取和安装

  • 使用命令从Github获取:

    git clone https://github.com/vaptcha/vaptcha-python-sdk.git

    github手动下载获取

  • 进入/vaptcha-python-sdk目录,安装vaptchasdk

    也许你需要sudo命令,或者管理员身份下运行该命令

     python setup.py install
  • 引入vaptcha

    from vaptchasdk import vaptcha
  • 配置vidkey并创建vaptcha对象

    vid, key = 'xxxxxxxxxxxxxxxxxxxxxxxx', 'xxxxxxxxxxxxxxxxxxxxxxxx'
    _vaptcha = vaptcha(vid, key)
  • 运行demo

    demo中的vid和key使用的是Vaptcha官方为demo免费提供的,缺少一些限制,可能存在安全隐患。在实际生产环境中,我们建议你登陆Vaptcha管理后台,在验证管理中添加对应的验证单元,并把domain参数设置为实际环境中的域名。

    进入/vaptcha-python-sdk/demo目录,运行如下命令,并在http://localhost:4396中查看

    python server.py

Step3.SDK接口说明

​ SDK提供以下三个接口:

  • get_challenge(scene_id='')

    获取流水号接口,用于获取vid和challenge

    参数:

    scene_id:场景id,请在Vaptcha管理后台查看,类型:字符串,选填

    返回值:json字符串

    example:

    result = _vaptcha.get_challenge()
  • downtime(data)

    宕机模式接口,用户宕机模式的相关验证,仅用于和Vaptcha客户端sdk交互

    参数:

    data:由vapthca客户端sdk回传,类型:字符串

    返回值:json字符串

    example:

    result = _vaptcha.downtime(data)
  • validate(challenge,token,scene_id='')

    二次验证接口,用于与Vaptcha服务器的二次验证。

    参数:

    challenge:由用户客户端回传,类型:字符串

    token:由用户客户端回传,类型:字符串

    scene_id:由用户配置,与get_challenge接口的scene_id一致,类型:字符串,选填

    返回值:bool类型

    example:

    result = _vaptcha.validate(challenge, token)

Vaptcha-php-sdk

Step1.环境准备

  • Vaptcha SDK PHP版本适用于 php5.3及以上版本,且需要开启curl
  • 要使用Vaptcha SDK,您需要一个Vaptcha账号、一个验证单元以及一对VID和Key。请在Vaptcha验证管理后台查看。

Step2.SDK 获取和安装

  • 使用命令从Github获取:

    git clone https://github.com/vaptcha/vaptcha-php-sdk.git

    github手动下载获取

  • 推荐使用composer安装

    composer 是php的包管理工具, 通过composer.json里的配置管理依赖的包,同时可以在使用类时自动加载对应的包, 在你的composer.json中添加如下依赖。

    composer require Vaptcha/vaptcha-sdk;
  • 运行demo

    demo的vid和key由Vaptcha官方免费提供,只可在localhost:4396下使用,缺少一些限制,可能存在安全隐患。在实际生产环境中,我们建议你登陆Vaptcha管理后台,在验证管理中添加对应的验证单元,并把domain参数设置为实际环境中的域名。

    git clone https://github.com/vaptcha/vaptcha-php-sdk.git
    cd vaptcha-php-sdk
    composer install
    php -S localhost:4396

    打开http://localhost:4396/demo即可访问

Step3.SDK接口

使用接口前需先实例化Vaptcha

use Vaptcha\Vaptcha;
$v = new Vaptcha($vid, $key); // 实例化sdk,$vid 和 $key 对应验证单元中的Vid和Key

SDK提供以下三个接口:

  • 获取流水号接口 getChallenge($sceneId) ,返回Array,包含vid和challenge

    参数说明:

    $sceneId: 选填,场景id,请在Vaptcha管理后台查看

  • 宕机模式接口 downTime($data),返回json字符串

    参数说明:

    $data: GET请求返回的数据,$_GET['data'];

  • 二次验证接口 validate($challenge, $token[, $sceneId]),返回Boolean

    参数说明:

    $challenge: 必填,客户端验证通过后返回的流水号

    $token: 必填, 客户端验证通过后返回的令牌

    $sceneId: 选填,场景id,与getChallenge($sceneId)的场景id保持一致

Vaptcha-dotnet-sdk

Step1.环境准备

  • Vaptcha .NET SDK 适用于 .NET Framework 4.5 及以上版本。建议使用VS2012及以上版本。

  • 要使用Vaptcha .NET SDK,您需要一个Vaptcha账号、一个验证单元以及一对VID和Key。请在Vaptcha验证管理后台查看。

Step2.SDK 获取和安装

  • 使用命令从Github获取:
git clone https://github.com/vaptcha/vaptcha-dotnet-sdk.git

github手动下载获取

  • 引用Vaptcha SDK项目,在你的项目中使用以下代码即可导入SDK:
using VaptchaSDK;

Step3.配置接口

  • SDK中包含了三个需要配置的接口,分别是:GetChallenge(获取流水号),Validate(二次验证),DownTime(宕机模式提供与前端sdk交互),需要在站点中提供访问的url。

Step4.代码示例

  • 初始化Vaptcha及备注
// 验证单元ID
string VID = "xxxxxxxxxxxxxxxxxxxxxxxx";
// 验证单元密钥
string KEY = "xxxxxxxxxxxxxxxxxxxxxxxx";
Vaptcha vaptcha = new Vaptcha(VID, KEY);
  • 获取流水号
//获取流水号
string challenge=vaptcha.GetChallenge();
  • 二次验证
//获取流水号字段
string challenge = Request.Form["challenge"];
//获取token字段
string token = Request.Form["token"];
//获取场景字段
string sceneId = Request.Form["sceneId"];
//二次验证获取结果
bool result = vaptcha.Validate(challenge, token, sceneId);
  • 宕机模式 使用GET请求
//获取数据
string data = Request.Form["data"];
//执行宕机模式交互操作
Response.Write(vaptcha.DownTime(data));

Step5.DEMO

Vaptcha-nodejs-sdk

Step1.环境准备

  • Vaptcha SDK NodeJs版本适用于 node 4.0及以上版本。
  • 要使用Vaptcha SDK,您需要一个Vaptcha账号、一个验证单元以及一对VID和Key。请在Vaptcha验证管理后台查看。

Step2.SDK 获取和安装

  • 使用命令从Github获取:

    git clone https://github.com/vaptcha/vaptcha-node-sdk.git

    github手动下载获取

  • 推荐使用npm安装:

    npm install vaptcha-sdk --save
  • 运行demo

    demo的vid和key由Vaptcha官方免费提供,只可在localhost:4396下使用,缺少一些限制,可能存在安全隐患。在实际生产环境中,我们建议你登陆Vaptcha管理后台,在验证管理中添加对应的验证单元,并把domain参数设置为实际环境中的域名。

    git clone https://github.com/vaptcha/vaptcha-node-sdk.git
    cd vaptcha-node-sdk
    npm install
    npm start

    打开http://localhost:4396/demo即可访问

Step3.SDK接口

使用接口前需先实例化Vaptcha

const Vaptcha = require('vaptcha-sdk'); //引入sdk
new Vaptcha(vid, key);// 实例化sdk,vid 和 key 对应验证单元中的vid和Key

SDK提供以下三个接口:

  • 获取流水号接口 getChallenge(sceneId) ,返回Promise

    参数说明:

    sceneId: 选填,场景id,请在Vaptcha管理后台查看

  • 宕机模式接口 downTime(data),返回Promise

    参数说明:

    data: GET请求返回的字段名为data的数据。

  • 二次验证接口 validate(challenge, token[, sceneId]),返回Promise

    参数说明:

    challenge: 必填,客户端验证通过后返回的流水号

    token: 必填, 客户端验证通过后返回的令牌

    sceneId: 选填,场景id,与getChallenge(sceneId)的场景id保持一致

客户端部署

概述

客户端web部署相关的所有配置和接口的说明。

兼容性

兼容性 IE7+(IE8及以上)、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android上的内嵌Webview

安装

1.引入js和预加载动画

 
<style>
    .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
    }
</style>
<!-- 点击式按钮建议宽度不低于200px,高度介于36px与46px  -->
<!-- 嵌入式仅需设置宽度,高度根据宽度自适应,最小宽度为200px -->
<div id="vaptcha_container" style="width:300px;height:36px;">
   <!--vaptcha_container是用来引入Vaptcha的容器,下面代码为预加载动画,仅供参考-->
   <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">Vaptcha启动中...</span>
      </div>
  </div>
</div>
 
<script src="https://cdn.vaptcha.com/v.js"></script>

预加载动画效果如下:

Vaptcha预加载动画

2.请求服务器端获取vid和challenge

vid:验证id由Vaptcha管理后台添加验证单元时生成。

challenge:每次验证过程的标识,由服务器端SDK向Vaptcha接口获取。

 
//ajax伪代码
var vid,challenge;
_.get({
    url:'../api/getvaptcha',//服务器端接口,返回challenge和vid
    success:function(data){
      vid = data.vid;
      challenge = data.challenge;
    }
})

3.调用Vaptcha初始化函数进行初始化

在调用初始化函数之前,需要等待js插件加载完成才能进行初始化。

 
var config={
  vid:'*******',
  challenge:'*******',
  container:'#vaptcha_container'
  //省略其他配置参数
}
window.vaptcha(config,function(vaptchaObj){
  //这里可以使用Vaptcha对象的实例方法,如init(),validate()
})

调用示例

嵌入式

点击式

隐藏式

  •  
    //根据服务端接口获取的vid与challenge创建实例
    //验证参数对象
    var config={
        vid:"", //验证单元id, string, 必填
        challenge:"", //验证流水号, string, 必填
        container:"#vaptcha_container",//验证码容器, HTMLElement或者selector, 必填
        type:"embed", //必填,表示点击式验证模式
        https:false,//协议类型,boolean,可选true,false,不填则自适应。
        outage:"", //服务器端配置的宕机模式接口地址
        success:function(token,challenge){//验证成功回调函数, 参数token, challenge 为string, 必填
            //执行表单验证失败时,需要重新初始化VAPTCHA
            //todo:执行人机验证成功后的操作
        },
        fail:function(){//验证失败回调函数  
            //todo:执行人机验证失败后的操作
        }
    }
    //Vaptcha对象
    var obj;
    window.vaptcha(config,function(vaptcha_obj){
        obj = vaptcha_obj;
        obj.init();
    });
  •  
    //根据服务端接口获取的vid与challenge创建实例
    //验证参数对象
    var config={
        vid:"", //验证单元id, string, 必填
        challenge:"", //验证流水号, string, 必填
        container:"#vaptcha_container",//验证码容器, HTMLElement或者selector, 必填
        type:"click", //必填,表示点击式验证模式
        effect:'float', //验证图显示方式, string, 可选择float, popup, 默认float
        https:false, //协议类型, boolean, 可选true, false,不填则自适应。
        color:"#3C8AFF ", //按钮颜色, string
        outage:"", //服务器端配置的宕机模式接口地址
        success:function(token,challenge){//验证成功回调函数, 参数token, challenge 为string, 必填
            //执行表单验证失败时,需要重新初始化VAPTCHA
            //todo:执行人机验证成功后的操作
        },
        fail:function(){//验证失败回调函数  
            //todo:执行人机验证失败后的操作
        }
    }
    //Vaptcha对象
    var obj;
    window.vaptcha(config,function(vaptcha_obj){
        obj = vaptcha_obj;
        obj.init();
    });
  •  
    //注意,隐藏式仅对VIP会员开放
    //根据服务端接口获取的vid与challenge创建实例
    //验证参数对象
    var config={
        vid:"", //验证单元id, string, 必填
        challenge:"", //验证流水号, string, 必填
        container:"#vaptcha_container",//验证码容器, HTMLElement或者selector, 必填
        type:"invisible", //必填,表示点击式验证模式
        https:false,//协议类型,boolean,可选true,false,不填则自适应。
        aiAnimation:"display", //是否显示智能检测动画, "hide"则为隐藏
        outage:"", //服务器端配置的宕机模式接口地址
        success:function(token,challenge){//验证成功回调函数, 参数token, challenge 为string, 必填
            //执行表单验证失败时,需要重新初始化VAPTCHA
            //todo:执行人机验证成功后的操作
            //ajax伪代码, 验证成功后的处理, 如提交表单操作
            _.post({
              url:'/api/login',
              data:{
                username:'***',
                password:'***',
                _token:token,//回传给服务器进行第二次验证
                _challenge:challenge//回传给服务器进行第二次验证
              },
              success:function(){
                //提交成功
              }
            })
        },
        fail:function(){//验证失败回调函数 
            //todo:执行人机验证失败后的操作
        },
        close:function(){//隐藏式关闭回调函数 
            //todo:执行人机验证关闭后的操作
        }
    }
    //Vaptcha对象
    var obj;
    window.vaptcha(config,function(vaptcha_obj){
        obj = vaptcha_obj;
    });
    _.on('click',function(){
      //执行验证时需要先判断验证实例是否加载完成,需要等待加载完成
      if(_obj){
        _obj.validate();
      }else{
        //下面log仅供demo查看,实际开发中需要更改为合适的提示方式
        console.log('Vaptcha验证实例还未加载完成,请等待加载完成后进行登陆操作');
      }
    })

验证实例及方法说明

1.实例

初始化函数window.vaptcha是一个入口函数,它有两个参数,第一个参数为配置对象config。第二个参数为回调函数,回调的第一个参数即是实例对象。

 
window.vaptcha({
  //配置参数忽略
},function(vaptchaObj){
  // 现在可以调用验证实例 vaptchaObj 的方法了
})

2.方法

  • init():仅供点击式和嵌入式使用。执行初始化操作,将按钮或者图片插入到配置参数中的容器中去。由用户来决定何时进行验证,验证结果分别放在配置参数success和fail里面作处理。

     
    window.vaptcha({
      //配置参数忽略
    },function(vaptchaObj){
      vaptchaObj.init();//执行该方法, 页面才生成验证码
    })
  • validate():仅供隐藏式使用。由开发者决定何时调用该方法进行验证,比如在表单提交时调用该方法,然后在success和fail回调函数里处理验证结果。

    目前推荐两种调用方式

    方案一:Vaptcha实例初始化完成后,将验证实例保存到局部变量内,等到用户提交表单时再执行validate()方法,执行验证,即加载和验证分离。

     
    var _obj;
    window.vaptcha({
      success:function(token,challenge){
        //ajax伪代码,验证成功后的处理,如提交表单操作
        _.post({
          url:'/api/login',
          data:{
            username:'***',
            password:'***',
            _token:token,//传回服务器端, 由SDK进行二次验证
            _challenge:challenge//传回服务器端, 由SDK进行二次验证
          },
          success:function(){
            //提交成功
          }
        })
      },
      fail:function(){
        
      },
      //其他配置参数忽略
    },function(vaptchaObj){
      _obj = vaptchaObj;//将Vaptcha验证实例保存到局部变量中
    })
      
    //调用validate()方法的伪代码,将该方法的调用绑定在'click'事件上,实际开发中需要更改为合适的调用方式
    _.on('click',function(){
      //执行验证前需要先判断验证实例是否加载完成
      if(_obj){
        _obj.validate();
      }else{
        //下面log仅供demo查看,实际开发中需要更改为合适的提示方式
        console.log('Vaptcha验证实例还未加载完成,请等待加载完成后进行登陆操作');
      }
    })

    方案二:提交表单时才执行引入Vaptcha验证实例的代码,即加载和验证一起完成。这种方案用户体验不是很好,不推荐使用。

     
    _.on('click',function(){
      window.vaptcha({
        //配置参数忽略
      },function(vaptchaObj){
        vaptchaObj.validate();
      })
    })

配置参数说明

应用到参数名参数类型必填默认值说明
通用vidstring验证id由Vaptcha管理后台添加验证单元时生成。
通用challengestring每次验证过程的标识,由服务器端SDK向Vaptcha接口获取。
通用outagestring服务器端配置的宕机模式接口地址
通用typestring验证图显示方式,可选'embed'、'click'、'invisible' ,对应的显示方式可查看demo
通用successfunction验证成功回调函数,参数为token,challenge,类型为string,这两个参数需要传回服务器端,由SDK执行二次验证。
通用failfunction验证错误和超时执行回调,如访问被拒,刷新过快等操作。
通用langstringen验证码语言类型,可选'zh-CN'、'en'
通用httpsbooleanfalse协议类型,可选true,false,不填则自适应。
嵌入式、点击式containerHTMLElement ,selectorVPATCHA容器,支持dom元素和选择器,设置方法如下:嵌入式:最小宽度200px,高度根据200:115自适应; 点击式:最小宽度200px,最小高度36px,最大高度46px
点击式colorstring#3C8AFF按钮颜色
点击式effectstringfloat点击式的显示方式,可选择浮动式和弹出式,即float,popup,默认为float
点击式stylestringdark点击式的显示风格,可选择light/dark,默认dark
隐藏式closefunction关闭弹窗时执行回调
隐藏式aiAnimationstringdisplaydisplay或hide,hide表示隐藏AI检测动画