Java implementation of sliding verification code example code

Recently, sliding verification code has gradually become popular in many websites. On the one hand, it is novel and simple for user experience. On the other hand, compared with graphic verification code, its security has not been greatly reduced. Of course, so far, there is no absolute security verification, but the cost of bypassing attackers is increasing.

Next, analyze the core process of sliding verification code:

The back end randomly generates matting and background pictures with matting shadows, and the background saves the coordinates of random matting positions

The front end realizes sliding interaction, collages the matting on the matting shadow, and obtains the user's sliding distance value, such as the following example

The front end transmits the user sliding distance value to the back end, and the back end checks whether the error is within the allowable range.

Here, simply verifying the user's sliding distance is the most basic verification. For higher security considerations, the whole track of the user's sliding and the user's access behavior on the current page may also be considered. These can be very complex, and even with the help of user behavior data analysis model, the ultimate goal is to increase the difficulty of illegal simulation and bypass. This paper focuses on how to realize the generation of sliding verification code step by step based on Java.

It can be seen that the sliding graphic verification code is mainly composed of two pictures, the matting block and the original image with the matting block shadow. There are two important features to ensure the difficulty of being brutally cracked: the shape of the matting block is random and the position of the original image where the matting block is located is random. In this way, we can create random, irregular and searchable matting and matching of the original graph in a limited graph set.

How to use code to extract a small picture with a specific random shape from a large picture?

The first step is to determine an outline of the cutout image to facilitate the subsequent real start of image processing

The picture is composed of pixels. Each pixel corresponds to a color. The color can be expressed in RGB, plus a transparency. Understand a picture as a plane graph. The upper left corner is the origin, the right X axis and the down Y axis. A coordinate value corresponds to the color of the pixel at the position. In this way, a picture can be converted into a two-dimensional array. Based on this consideration, the contour is also represented by a two-dimensional array. The element value inside the contour is 1 and the element value outside the contour corresponds to 0.

At this time, we have to think about how to generate this contour shape. There are coordinate systems, rectangles and circles. Yes, mathematical graphic functions are used. Typically, the function equation of a circle and the function of the edge of a rectangle are used, similar to:

(x-a) ²+ (y-b) ²= r ² There are three parameters a, B and R, that is, the coordinates of the center of the circle are (a, b) and the radius R. These matting are placed on the coordinate system described above, and it is easy to calculate the specific values of the matting.

The example code is as follows:

Second, after having the contour, you can determine the matting according to the value of the two-dimensional array, and shadow the matting position on the original image.

The operation is as follows:

After the previous two steps, we get the matting and the original image with matting shadow. In order to increase confusion and improve the network loading effect, further processing of images is needed. Generally, there are two things to do, one is to blur the pictures to increase the difficulty of machine recognition, and the other is to do appropriate same quality compression. It is easy to think of Gaussian blur in fuzzy processing. The principle is well understood. You can go to Google to understand it. As for the implementation in Java, there are many versions. Now, without the help of any third-party jar, an example is provided:

After testing, the blur effect is very good. In addition, it is image compression, and homogeneous compression is done without the help of any third-party tools.

So far, the code processing flow of the core of the sliding verification code has been completed. There are many details that can be polished and optimized to make the sliding experience better. I hope it can help some students who are ready to build their own sliding verification code.

The above code implementation is very refined. On the one hand, in order to ensure performance, on the other hand, it is easy to understand. In addition, due to various reasons, it is inconvenient to introduce too many details. If you have any questions, you can leave a message for communication. After testing, the response time of the process of generating sliding graphics can be controlled at about 20ms. If the resolution of the original image is less than 300px * 150px, it can be about 10ms, which is within the acceptable range. If there is a more efficient way, I hope you can give me more advice. I also hope you can support programming tips.