大數(shù)據(jù)中自動(dòng)化“滑板驗(yàn)證”實(shí)現(xiàn)賬密登錄的解決思路是什么

本篇文章給大家分享的是有關(guān)大數(shù)據(jù)中自動(dòng)化“滑板驗(yàn)證”實(shí)現(xiàn)賬密登錄的解決思路是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

十年的海南網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整海南建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“海南網(wǎng)站設(shè)計(jì)”,“海南網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

很早以前只要使用賬號(hào)和密碼，就可以實(shí)現(xiàn)網(wǎng)站自動(dòng)化登錄。但是后來網(wǎng)站的登錄驗(yàn)證逐步升級(jí)，出現(xiàn)了滑塊驗(yàn)證。實(shí)際上更多更復(fù)雜的新驗(yàn)證方法不斷出現(xiàn)（滑塊驗(yàn)證已經(jīng)屬于比較傳統(tǒng)的驗(yàn)證方法了）。但是對(duì)圖像處理的思路還可以借鑒一下。

首先，我們使用賬密登錄。

然后頁面會(huì)彈出滑板掩碼的圖片如下。

在早期，網(wǎng)站會(huì)給出兩幅圖片，一副是有滑塊的圖像，一副是沒有滑塊的圖像。

請(qǐng)注意這里“滑板”和“滑塊”的區(qū)別：

• “滑板”是整個(gè)圖片，

• “滑塊”是下圖中左側(cè)的小方塊，

• 驗(yàn)證方法是拖動(dòng)滑塊到右側(cè)顏色空缺的位置。

但是到了后期，為了增加登錄難度，只給出一副圖像，就是包含了滑塊的滑板圖像。

所以，為了實(shí)現(xiàn)圖像識(shí)別，首先我們不得不消除滑塊。方法是：設(shè)置滑塊元素的隱藏。

我們使用node.js的puppeteer包。這個(gè)包能夠?qū)撁嬖剡M(jìn)行操作。

隱藏滑塊的代碼是：

await frame_slider.$eval('.tcaptcha-jpp',    (el, value)=> el.setAttribute('style', value),    'visibility: hidden');

然后圖像就變成下面的樣子了（左側(cè)的滑塊消失了）。

為了將滑塊移動(dòng)到缺口位置，首先我們要計(jì)算缺口位置的坐標(biāo)。

圖像由像素點(diǎn)組成。每個(gè)像素點(diǎn)包含三個(gè)顏色：紅色(Red)、綠色(Green)、藍(lán)色(Blue)。就是通常所說的RGB。后來又增加了一個(gè)透明度的標(biāo)識(shí)Alpha。于是每個(gè)像素點(diǎn)就有四個(gè)值：RGBA。

我們使用getPixels得到圖片的像素集合，再轉(zhuǎn)化成Buffer。

const pixels = await util.promisify(getPixels)(path).catch((e) => {console.log('----->e is: ', e)})const buf = Buffer.from(pixels.data);

于是我們就等到了整幅圖像的RGBA數(shù)據(jù)。

本文關(guān)鍵的解決思路如下：

1、取每行每列的RGB值；

2、將每列的RGB值，與其前一列的RGB值比較（得到RGB的差）；

3、觀察差值的范圍，然后取一個(gè)可識(shí)別出缺口位置的閾值，我取了50；
4、取閾值為50的含義是：當(dāng)差值大于50的時(shí)候，設(shè)置標(biāo)識(shí)為1，否則設(shè)置標(biāo)識(shí)為0；

5、然后將所有的列的標(biāo)識(shí)（1或 0）相加，得到每列標(biāo)識(shí)的合計(jì)數(shù)；

6、排名第一和第二的列的列數(shù)，就是缺口的左邊和右邊的位置；

7、列數(shù)小的為缺口的左側(cè)，列數(shù)大的為缺口的右側(cè)。

8、獲得了缺口的位置，將滑塊拖動(dòng)到這個(gè)位置，就實(shí)現(xiàn)了滑塊驗(yàn)證。如下圖：

到此，滑板驗(yàn)證完成了，即實(shí)現(xiàn)了自動(dòng)化登錄。

參考了很多確定圖像缺口的代碼中，比較多的方法都很難實(shí)現(xiàn)近乎100%的準(zhǔn)確性。但是上述方法幾乎實(shí)現(xiàn)。所以這種解決方法值得參考。

完整代碼如下：

const getPixels = require("get-pixels");const util = require('util');
(async ()=> {    path = 'images/origin.png';    const pixels = await util.promisify(getPixels)(path).catch((e) => {console.log('----->e is: ', e)})    const buf = Buffer.from(pixels.data);    let bl = buf.toJSON().data.length/4    let btoj = buf.toJSON().data    let buf1 = []    for (var i=0; i<bl; i++) {        var j = i*4        buf1.push(btoj.slice(j,j+4))    }    let slider_bkg_width = 340    let slider_bkg_height = 195    let buf2 = []    for (var i=0; i<slider_bkg_height; i++) {        var j = i*slider_bkg_width        buf2.push(buf1.slice(j,j+slider_bkg_width))    }    let slider_block_height = 68      // 滑塊的高度    let slider_bkg_end = 339          // =340-1， 滑板的寬度，從最右側(cè)開始進(jìn)行掃描    let slider_bkg_top = 64           // 滑板的頂部    let slider_bkg_bottom = 259       // 滑板的底部    let sliger_bkg_height = 195       // 259 - 64    let slider_bkg_half_width = 169   // =340/2-1， 缺口位置一般都是滑板的右半部分，所以掃描結(jié)束位置，定在滑板的中線    let col_compu = []    for (var rgba=0; rgba<3; rgba++) {                                           // 一個(gè)RGBA單元包含4個(gè)元素，循環(huán)取前 3 個(gè)        for (var t=0; t<sliger_bkg_height; t++) {                                // t 代表每一行，從滑塊的 top 位置開始，一共掃描 68 行，也就是滑塊的高度            for (var w=slider_bkg_end; w>slider_bkg_half_width; w--) {           // w 代表每一列，從340列開始到170列為止，一共170列，代表從右向左數(shù)的滑板寬度的一半                col_compu.push({'col':w,'count':(buf2.slice(t,t+1)[0][w-1][rgba] - buf2.slice(t,t+1)[0][w][rgba])>50?1:0})            }        }    }    var result = {}    // 計(jì)算每一列的合計(jì)數(shù)    col_compu.map(i => result[i.col] = (result[i.col] || 0) + i.count)    // 排序    var keys = Object.keys(result).sort();    var comp = 0    var comp_col = 0    for (var ttt=0; ttt<keys.length; ttt++) {        [comp_col, comp] = result[keys[ttt]] > comp ? [keys[ttt], result[keys[ttt]]] : [comp_col, comp]    }    console.log('----->comp is: ', comp)    console.log('----->comp_col is: ', comp_col)
    var result2 = result    result2[comp_col] = 0    var keys2 = Object.keys(result2).sort();    var comp2 = 0    var comp_col2 = 0    for (var tttt=0; tttt<keys2.length; tttt++) {        [comp_col2, comp2] = result2[keys2[tttt]] > comp2 ? [keys2[tttt], result2[keys2[tttt]]] : [comp_col2, comp2]    }
    let realcol = comp_col<comp_col2?comp_col:comp_col2    console.log('=====----->realcol is: ', realcol)
})();

以上就是大數(shù)據(jù)中自動(dòng)化“滑板驗(yàn)證”實(shí)現(xiàn)賬密登錄的解決思路是什么，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：大數(shù)據(jù)中自動(dòng)化“滑板驗(yàn)證”實(shí)現(xiàn)賬密登錄的解決思路是什么
URL網(wǎng)址：http://muchs.cn/article24/gpjeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)