vaptcha驗證碼接入

註冊

官網

• 新建驗證單元
• 拿到VID和KEY

代碼流程

開發文檔

例子

樣式

<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>

前端代碼

<!-- 點擊式按鈕建議高度介於36px與46px  -->
<!-- 嵌入式僅需設置寬度，高度根據寬度自適應，最小寬度爲200px -->
<div id="vaptchaContainer" 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://r.vaptcha.com/public/img/vaptcha-loading.gif" />
            </a>
            <span class="vaptcha-text">Vaptcha啓動中...</span>
        </div>
    </div>
</div>

重點

兩種獲得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後臺,然後自己進行額外操作.麻煩

<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
    //配置參數
    vid: '****', // 驗證單元id
    type: 'click', // 展現類型 點擊式
    container: '#vaptchaContainer', // 按鈕容器，可爲Element 或者 selector
    ... //其他配置參數省略
}).then(function (vaptchaObj) {
    vaptchaObj.render()// 調用驗證實例 vaptchaObj 的 render 方法加載驗證按鈕
    ... //其他事件處理
})
</script>

實戰

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

自己檢查返回的數據進行操作

完事~!