Vaptcha驗證碼配置實現人機驗證

官網免費註冊地址：https://www.vaptcha.com/

登錄後創建驗證單元

提交之後就可以獲取vid和key

第一步，引入 vaptcha 提供的 js 腳本文件。

<script src="https://cdn.vaptcha.com/v2.js"></script>

第二步，在需要顯示驗證碼的地方，加入下面的代碼：

<div data-vid="你的vid" 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">Vaptcha啓動中...</span>
        </div>
    </div>
</div>

vaptcha 會生成 vaptcha_token 參數，在你提交表單的時候，提交給你的後臺。類似如下：

window.vaptcha({
  type: 'invisible'
  //其他配置參數忽略
}).then(function(vaptchaObj){
  obj = vaptchaObj;//將VAPTCHA驗證實例保存到局部變量中
  // 驗證碼加載完成後將事件綁定到按鈕
  // 調用validate()方法的僞代碼，將該方法的調用綁定在'click'事件上，實際開發中需要更改爲合適的調用方式
  vaptchaObj.listen('success', function() {
     data = {
      //表單數據
      token: vaptchaObj.getToken()
    }
    $.post('/login')
  })
  $('#login-button').on('click',function(){
    //執行驗證前需要先判斷驗證實例是否加載完成
    vaptchaObj.validate();
  })
  $('#reset').on('click',function(){
    //執行驗證前需要先判斷驗證實例是否加載完成
    vaptchaObj.reset();
  })
})

token 提交到後臺後，你可以使用 RestTemplate 將 token 等參數提交到 http://api.vaptcha.com/v2/validate 進行人機驗證。