為您解碼網(wǎng)站建設(shè)的點點滴滴
發(fā)表日期:2019-09 文章編輯:小燈 瀏覽次數(shù):7915
自從網(wǎng)絡(luò)誕生以來,我們需要登錄的網(wǎng)址基本上都需要驗證碼進(jìn)行驗證,用來防止一些攻擊無限登錄和注冊行為。以往的驗證碼驗證體驗非常的不好,而且容易破解。隨著近幾年的發(fā)展,類似 12306 這樣的網(wǎng)站上的二維碼經(jīng)常被吐槽。隨著阿里的滑動驗證碼的推出,越來越多的網(wǎng)站采用這種方式,后來各種推拽驗證碼也如雨后春筍般的冒了出來。這些驗證碼的使用都比較復(fù)雜,而且局限性比較多,最近我發(fā)現(xiàn)了 vaptcha 驗證碼非常的不錯,于是便通過本文推薦給大家!
VAPTCHA是“Variation Analysis based Public Turing Test to Tell Computers and Humans Apart”(基于變量分析法來區(qū)分人類和計算機(jī)的圖靈測試程序),又稱為手勢驗證,是驗證碼的一種。宣傳中介紹的是基于人工智能和大數(shù)據(jù)的新一代人機(jī)驗證解決方案,我覺得這個實際可能并不存在,原因是目前使用的人并不多,大數(shù)據(jù)從哪里來?人工智能還在概念階段,極少有成功的應(yīng)用,我只能說她現(xiàn)在可能是偽智能。但是我相信隨著時間的推移,這家公司的驗證碼會被越來越多的人采用,于是就寫了這篇文章分享給大家!
首先,使用 VAPTCHA 必須要再她的官網(wǎng)上進(jìn)行注冊一個賬號,企業(yè)和個人目前都被支持注冊。https://www.vaptcha.com/
注冊后,需要綁定郵箱才可以操作,所以大家要準(zhǔn)備好一個郵箱。
郵箱綁定好之后,就可以開始接入 vaptcha 了。
再開始之前,需要再 vaptcha 的后臺,創(chuàng)建一個驗證單元,個人用戶目前只支持創(chuàng)建 3 個驗證單元。驗證單元需要綁定域名,如果你沒有域名,建議使用 github 上創(chuàng)建個人網(wǎng)站,用 github.com 這個域名即可。
創(chuàng)建驗證單元后,請記住你的 VID 和 KEY,后面會用到。
使用 vaptcha 非常的簡單。
第一步,引入 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 參數(shù),在你提交表單的時候,提交給你的后臺。類似如下:
window.vaptcha({? type: 'invisible'? //其他配置參數(shù)忽略}).then(function(vaptchaObj){? obj = vaptchaObj;//將VAPTCHA驗證實例保存到局部變量中? // 驗證碼加載完成后將事件綁定到按鈕? // 調(diào)用validate()方法的偽代碼,將該方法的調(diào)用綁定在'click'事件上,實際開發(fā)中需要更改為合適的調(diào)用方式? vaptchaObj.listen('success', function() {? ? ?data = {? ? ? //表單數(shù)據(jù)? ? ? token: vaptchaObj.getToken()? ? }? ? $.post('/login')? })? $('#login-button').on('click',function(){? ? //執(zhí)行驗證前需要先判斷驗證實例是否加載完成? ? vaptchaObj.validate();? })? $('#reset').on('click',function(){? ? //執(zhí)行驗證前需要先判斷驗證實例是否加載完成? ? vaptchaObj.reset();? })})
token 提交到后臺后,你可以使用 RestTemplate 將 token 等參數(shù)提交到 http://api.vaptcha.com/v2/validate 進(jìn)行人機(jī)驗證。
對 vaptcha 感興趣的可以對前端的源碼進(jìn)行分析,它使用 canvas 進(jìn)行繪圖,和我的一些驗證碼文章里提到的原理類似。demo 演示請點擊這里。
日期:2019-09 瀏覽次數(shù):6827
日期:2019-09 瀏覽次數(shù):4692
日期:2019-09 瀏覽次數(shù):5507
日期:2019-09 瀏覽次數(shù):10732
日期:2019-09 瀏覽次數(shù):10773
日期:2019-09 瀏覽次數(shù):4483
日期:2019-09 瀏覽次數(shù):4076
日期:2019-09 瀏覽次數(shù):3892
日期:2019-09 瀏覽次數(shù):3459
日期:2019-09 瀏覽次數(shù):4191
日期:2019-09 瀏覽次數(shù):7914
日期:2019-09 瀏覽次數(shù):3721
日期:2019-09 瀏覽次數(shù):4240
日期:2019-09 瀏覽次數(shù):3745
日期:2019-09 瀏覽次數(shù):3890
日期:2019-09 瀏覽次數(shù):4175
日期:2019-09 瀏覽次數(shù):5757
日期:2019-09 瀏覽次數(shù):3442
日期:2019-09 瀏覽次數(shù):4486
日期:2019-09 瀏覽次數(shù):3943
日期:2019-09 瀏覽次數(shù):4180
日期:2019-09 瀏覽次數(shù):4218
日期:2019-09 瀏覽次數(shù):3553
日期:2019-09 瀏覽次數(shù):4377
日期:2019-09 瀏覽次數(shù):5484
日期:2019-09 瀏覽次數(shù):5332
日期:2019-09 瀏覽次數(shù):3626
日期:2019-09 瀏覽次數(shù):8989
日期:2019-09 瀏覽次數(shù):4581
日期:2019-09 瀏覽次數(shù):3923
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.