Shulou(Shulou.com)06/01 Report--

What this article shares with you is about the solution of big data's automatic "skateboard verification" to achieve account secret login. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Don't say much, let's take a look at it with the editor.

A long time ago, as long as the use of accounts and passwords, you can automatically log in to the website. But then the login authentication of the site was gradually upgraded, and slider verification appeared. In fact, more and more complex new verification methods are emerging (slider verification is already a more traditional verification method). But the idea of image processing can also be used for reference.

First of all, we use the account secret login.

Then the page will pop up a picture of the skateboard mask as follows.

In the early days, the site gave two images, one with a slider and one without a slider.

Please note the difference between "skateboard" and "slider" here:

The skateboard is the whole picture.

The slider is the small square on the left in the following picture.

The verification method is to drag the slider to the location of the color gap on the right.

But in the later stage, in order to increase the difficulty of login, only one image is given, that is, the skateboard image containing the slider.

Therefore, in order to achieve image recognition, we first have to eliminate the slider. The method is to set the hiding of the slider element.

We use node.js 's puppeteer package. This package can operate on page elements.

The code to hide the slider is:

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

Then the image looks like the following (the slider on the left disappears).

In order to move the slider to the notch position, we first need to calculate the coordinates of the notch location.

The image consists of pixels. Each pixel contains three colors: red (Red), green (Green), and blue (Blue). It is commonly known as RGB. Later, a transparent logo Alpha was added. So each pixel has four values: RGBA.

We use getPixels to get the pixel set of the picture, and then convert it to Buffer.

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

So we wait for the RGBA data of the whole image.

The key ideas of this paper are as follows:

1. Take the RGB value of each row and column

2. Compare the RGB value of each column with the RGB value of the previous column (get the difference of RGB)

3. Observe the range of the difference, and then take a threshold that can identify the location of the gap. I take 50.

4. The meaning of setting the threshold to 50 is: when the difference is greater than 50, set the identification to 1, otherwise set the identification to 0

5. Then add the identities of all the columns (1 or 0) to get the total number of identities for each column

6. The number of columns in the first and second columns is the left and right positions of the gap.

7. The small number of columns is the left side of the gap, and the large number of columns is the right side of the gap.

8. Get the position of the gap, drag the slider to this position, and realize the slider verification. As shown below:

At this point, the skateboard verification is complete, that is, the automatic login is realized.

Referring to a lot of code to determine the image gap, many methods are difficult to achieve nearly 100% accuracy. But the above methods are almost realized. Therefore, this solution is worthy of reference.

The complete code is as follows:

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 item0; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.