自從網(wǎng)絡(luò)誕生以來(lái)，我們需要登錄的網(wǎng)址基本上都需要驗(yàn)證碼進(jìn)行驗(yàn)證，用來(lái)防止一些攻擊無(wú)限登錄和注冊(cè)行為。以往的驗(yàn)證碼驗(yàn)證體驗(yàn)非常的不好，而且容易破解。隨著近幾年的發(fā)展，類似 12306 這樣的網(wǎng)站上的二維碼經(jīng)常被吐槽。隨著阿里的滑動(dòng)驗(yàn)證碼的推出，越來(lái)越多的網(wǎng)站采用這種方式，后來(lái)各種推拽驗(yàn)證碼也如雨后春筍般的冒了出來(lái)。這些驗(yàn)證碼的使用都比較復(fù)雜，而且局限性比較多，最近我發(fā)現(xiàn)了 vaptcha 驗(yàn)證碼非常的不錯(cuò)，于是便通過(guò)本文推薦給大家！

VAPTCHA是“Variation Analysis based Public Turing Test to Tell Computers and Humans Apart”（基于變量分析法來(lái)區(qū)分人類和計(jì)算機(jī)的圖靈測(cè)試程序），又稱為手勢(shì)驗(yàn)證，是驗(yàn)證碼的一種。宣傳中介紹的是基于人工智能和大數(shù)據(jù)的新一代人機(jī)驗(yàn)證解決方案，我覺(jué)得這個(gè)實(shí)際可能并不存在，原因是目前使用的人并不多，大數(shù)據(jù)從哪里來(lái)？人工智能還在概念階段，極少有成功的應(yīng)用，我只能說(shuō)她現(xiàn)在可能是偽智能。但是我相信隨著時(shí)間的推移，這家公司的驗(yàn)證碼會(huì)被越來(lái)越多的人采用，于是就寫(xiě)了這篇文章分享給大家！

首先，使用 VAPTCHA 必須要再她的官網(wǎng)上進(jìn)行注冊(cè)一個(gè)賬號(hào)，企業(yè)和個(gè)人目前都被支持注冊(cè)。https://www.vaptcha.com/

注冊(cè)后，需要綁定郵箱才可以操作，所以大家要準(zhǔn)備好一個(gè)郵箱。

郵箱綁定好之后，就可以開(kāi)始接入 vaptcha 了。

再開(kāi)始之前，需要再 vaptcha 的后臺(tái)，創(chuàng)建一個(gè)驗(yàn)證單元，個(gè)人用戶目前只支持創(chuàng)建 3 個(gè)驗(yàn)證單元。驗(yàn)證單元需要綁定域名，如果你沒(méi)有域名，建議使用 github 上創(chuàng)建個(gè)人網(wǎng)站，用 github.com 這個(gè)域名即可。

創(chuàng)建驗(yàn)證單元后，請(qǐng)記住你的 VID 和 KEY，后面會(huì)用到。

使用 vaptcha 非常的簡(jiǎn)單。

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

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

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

<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啟動(dòng)中...</span>? ? ? ? </div>? ? </div></div>

vaptcha 會(huì)生成 vaptcha_token 參數(shù)，在你提交表單的時(shí)候，提交給你的后臺(tái)。類似如下：

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

token 提交到后臺(tái)后，你可以使用 RestTemplate 將 token 等參數(shù)提交到 http://api.vaptcha.com/v2/validate 進(jìn)行人機(jī)驗(yàn)證。

對(duì) vaptcha 感興趣的可以對(duì)前端的源碼進(jìn)行分析，它使用 canvas 進(jìn)行繪圖，和我的一些驗(yàn)證碼文章里提到的原理類似。demo 演示請(qǐng)點(diǎn)擊這里。

參考資料

• https://www.vaptcha.com/document

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/21358.html