Method for generating and verifying embedded graphic verification code of webpage

Abstract

The invention provides a method for generating and verifying an embedded graphic verification code of a webpage, and relates to the technical field of man-machine identification. The method comprises the following steps: manufacturing a shape library; making a background library; randomly selecting a graph from the shape library as a to-be-matched shape, and randomly selecting a plurality of graphs from the shape library as interference shapes; the shape to be matched and the interference shape are stacked on the background image, so that each shape is partially overlapped with at least one adjacent shape; processing the background image; placing a to-be-matched shape outside the left side of the background image; performing equal-ratio zooming on the whole area, and embedding and placing the whole area in a required position of a webpage to form a verification area; an operator drags the to-be-matched shape outside the left side of the background image through a mouse, and after the mouse is released, the shape matching verification process is triggered. According to the method, the graphic verification code and the behavior verification are combined, so that the verification complexity is increased, the operation difficulty of the user is reduced, the manual operation of the normal user is finally distinguished, and the malicious operation and the script behavior are blocked.

Description

Technical Field

[0001] The present invention relates to the technical field of human-machine identification, and in particular to a method for generating and verifying a chimeric graphic verification code of a web page. Background Art

[0002] Existing web page verification code technology is becoming increasingly mature, and various types of static and dynamic verification codes are becoming increasingly diversified, mainly including SMS verification codes, image verification codes, behavioral verification codes, etc., which play an important role in ensuring the security of user account information and preventing malicious operations. Complex verification codes provide stronger security guarantees than simpler verification codes, but at the same time they also have a greater negative impact on user experience and increase the difficulty and time cost of operations. Summary of the invention

[0003] The purpose of the present invention is to provide a method for generating and verifying a mosaic graphic verification code of a web page in order to solve the problem of generating and verifying the verification code in view of the above-mentioned deficiencies in the prior art.

[0004] To achieve the above purpose, the technical solution adopted by the present invention is as follows:

[0005] The present invention provides a method for generating and verifying a mosaic graphic verification code of a web page, the method comprising:

[0006] A. Prepare a variety of geometric shapes and create a shape library;

[0007] B. Prepare multiple photos and create a background library;

[0008] C. Randomly select a shape in the shape library as the shape to be matched, and randomly select multiple shapes in the shape library as interference shapes;

[0009] D. Randomly select one from the background library as the background image;

[0010] E. Overlay the shape to be matched and the interference shape on the background image, and the edges do not exceed the background image;

[0011] F. Rearrange the left-right order of the shape to be matched and the interference shape on the background image randomly, and make each shape partially overlap with at least one adjacent shape;

[0012] G. Process the background image, obtain the projection area of ​​the shape to be matched and the interference shape projected on the background image, and set the opacity of the projection area to a preset opacity, wherein the preset opacity is greater than or equal to 50% and less than or equal to 90%;

[0013] H. Place the shape to be matched outside the left side of the background image;

[0014] I. scaling the entire area consisting of the shape to be matched placed outside the left side of the background image and the background image in geometric proportions, and embedding it in the required position of the webpage to form a verification area;

[0015] J. The operator uses the mouse to drag the shape to be matched outside the left side of the background image, move it to the right in the background image, and place it in the vacant position with the same shape. After the operator releases the mouse, the shape matching verification process is immediately triggered.

[0016] Optionally, prepare a variety of geometric figures and create a shape library, specifically including: prepare 5 or more geometric figures, make them into vector graphics, scale them proportionally in a 100*100px square frame, and have a 10px margin between the figure and the frame, as a shape library.

[0017] Optionally, prepare multiple photos and create a background library, specifically including: prepare 5 or more photos, crop them into a 500*100px rectangle as the background library.

[0018] Optionally, the overlapping area of ​​each shape partially overlapping with at least one adjacent shape is greater than 1% and less than or equal to 20% of the area of ​​the single graphic.

[0019] Optionally, preset Opacity to 80%.

[0020] Optionally, after the operator drags the shape to be matched outside the left side of the background image with a mouse and moves it rightward into the background image, the method further includes: if the placement position of the shape to be matched can completely fit the vacancy of the corresponding shape in the projection area of ​​the background image, the verification is passed and the verification process ends; if it cannot completely fit, the verification fails;

[0021] The operator uses the mouse to select the shape to be matched on the left and starts timing. If the mouse is not released for more than 5 seconds, the verification is considered failed;

[0022] After verification fails, re-execute generation steps C to I, regenerate the verification area, and wait for the operator to perform the next operation;

[0023] After the verification fails for a preset number of times, the lock time is triggered. After unlocking, the verification area is regenerated and the operator can perform the next operation. The lock time is the preset duration.

[0024] The beneficial effects of the present invention include:

[0025] The method for generating and verifying a mosaic graphic verification code of a web page provided by the present invention comprises: preparing a plurality of geometric figures and making a shape library; preparing a plurality of photos and making a background library; randomly selecting a figure in the shape library as a shape to be matched, and randomly selecting a plurality of figures in the shape library as interference shapes; randomly selecting one in the background library as a background image; superimposing the shape to be matched and the interference shape on the background image, and the edges do not exceed the background image; randomly rearranging the left and right order of the shape to be matched and the interference shape on the background image, and making each shape partially overlap with at least one adjacent shape; processing the background image, obtaining the shape to be matched The interference shape is projected on the projection area of ​​the background image, and the opacity of the projection area is set to a preset opacity, the preset opacity is greater than or equal to 50%, and less than or equal to 90%; the shape to be matched is placed outside the left side of the background image; the overall area composed of the shape to be matched placed outside the left side of the background image and the background image is scaled proportionally, and embedded in the required position of the webpage to form a verification area; the operator drags the shape to be matched outside the left side of the background image with the mouse, translates it to the right to the background image, and places it in a vacant position with the same shape, and the shape matching verification process is triggered immediately after the operator releases the mouse. The present invention combines the image verification code and the behavior verification code to increase the verification complexity while reducing the user's operation difficulty, and finally distinguishes normal user manual operations, thereby blocking malicious operations and script behaviors. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0027] Figure 1 The following is a design appearance diagram of a chimeric graphic verification code for a web page provided by an embodiment of the present invention;

[0028] Figure 2 The following is a flow chart of verifying the embedded graphic verification code of a web page provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0029] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0030] Existing web verification code technology is becoming increasingly mature, and various types of static and dynamic verification codes are becoming increasingly diversified, mainly including SMS verification codes, image verification codes, behavior verification codes, etc., which play an important role in protecting user account information security and preventing malicious operations. Complex verification codes provide stronger security guarantees than simple verification codes, but at the same time they also have a greater negative impact on user experience and increase the difficulty and time cost of operation. Therefore, it is necessary to propose an improved method for generating and verifying graphic verification codes.

[0031] The purpose of the present invention is to provide a method for generating and verifying a mosaic graphic verification code for a web page, through a series of matching actions of the operator on the geometric figures, while limiting the operation time to the time of human eye recognition plus manual operation, thereby performing human-machine operation recognition and avoiding non-manual verification actions such as script programs.

[0032] An embodiment of the present invention provides a method for generating and verifying a mosaic graphic verification code of a web page, the method comprising:

[0033] Step A: Prepare a variety of geometric shapes and create a shape library.

[0034] Optionally, prepare multiple geometric figures and create a shape library, specifically including: prepare 5 or more geometric figures, make them into vector graphics, scale them proportionally in a 100*100px square frame, and have a 10px margin between the figure and the frame as the shape library. px means pixel.

[0035] Step B: Prepare multiple photos and create a background library.

[0036] Optionally, prepare multiple photos and create a background library, specifically including: prepare 5 or more photos, crop them into a 500*100px rectangle as the background library.

[0037] Step C: randomly select a shape from the shape library as the shape to be matched, and randomly select multiple shapes from the shape library as interference shapes. When selecting multiple shapes, the selection may be repeated. For example, four shapes may be randomly selected from the shape library as interference shapes.

[0038] Step D: Randomly select one from the background library as the background image. Specifically, place it at the position (0, 0) (500, 0) (500, 100) (0, 100) of the xy coordinate system.

[0039] Step E: Overlay the shape to be matched and the interference shape on the background image, and the edges do not exceed the background image, that is, within the region of (0, 0) (500, 0) (500, 100) (0, 100) of the xy coordinate system.

[0040] Step F: randomly rearrange the left-right order of the shape to be matched and the interference shape on the background image, that is, randomly rearrange the x coordinates within the region, and make each shape partially overlap with at least one adjacent shape. Optionally, the overlapping area of ​​each shape partially overlapping with at least one adjacent shape is greater than 1% and less than or equal to 20% of the area of ​​a single graphic.

[0041] Step G: Process the background image, obtain the projection area of ​​the shape to be matched and the interference shape projected on the background image, and set the opacity of the projection area to a preset opacity, which is greater than or equal to 50% and less than or equal to 90%. Optionally, the preset opacity is 80%.

[0042] Step H: Place the shape to be matched outside the left side of the background image. For example, place the shape to be matched at the position (-100, 0) (0, 0) (0, 100) (-100, -100) of the xy coordinate system.

[0043] Step I: scale the entire area consisting of the shape to be matched placed outside the left side of the background image and the background image (specifically, an area of ​​600*100px) proportionally, and embed it in the required position of the web page to form a verification area.

[0044] Figure 1 The design appearance diagram of the embedded graphic verification code of the web page provided by the embodiment of the present invention is shown. Figure 1 In the figure, five examples of the designed verification area are included.

[0045] Step J: The operator uses the mouse to drag the shape to be matched outside the left side of the background image, translates it to the right in the background image, and places it in a vacant position with the same shape. After the operator releases the mouse, the shape matching verification process is immediately triggered.

[0046] Figure 2 The verification flow chart of the embedded graphic verification code of the web page provided by the embodiment of the present invention is shown. After the operator drags the shape to be matched outside the left side of the background image with the mouse and translates it to the right into the background image, the method also includes: if the placement position of the shape to be matched can completely fit the vacancy of the corresponding shape in the projection area in the background image, the verification is passed and the verification process ends; if it cannot completely fit, the verification fails; the operator selects the shape to be matched on the left side with the mouse and starts timing. If the mouse is not released for more than 5 seconds, the verification is judged to have failed; after the verification fails, the generation steps C to I are re-executed to regenerate the verification area and wait for the operator to perform the next operation; after the verification fails for a preset number of times (for example, 3 times), the lock time (for example, 3 minutes) is triggered, and after unlocking, the verification area is regenerated, and the operator can perform the next operation, and the lock time is a preset duration.

[0047] In summary, the present invention combines image verification codes and behavior verification to increase verification complexity while reducing the user's operation difficulty, and ultimately distinguishes normal user manual operations, thereby blocking malicious operations and script behaviors.

[0048] The above embodiments are only for illustrating the technical concept and features of the present invention, and their purpose is to enable ordinary technicians in the field to understand the content of the present invention and implement it. They cannot be used to limit the protection scope of the present invention. Any equivalent changes or modifications made according to the spirit of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for generating and verifying a mosaic graphic verification code of a web page, characterized in that: The method comprises: A. Prepare a variety of geometric shapes and create a shape library; B. Prepare multiple photos and create a background library; C. randomly selecting a shape from the shape library as a shape to be matched, and randomly selecting multiple shapes from the shape library as interference shapes; D. Randomly select one from the background library as the background image; E. Overlaying the shape to be matched and the interference shape on the background image, with the edges not exceeding the background image; F. Rearrange the to-be-matched shapes and the interfering shapes randomly in left-right order on the background image, and make each shape partially overlap with at least one adjacent shape; G. Process the background image, obtain the projection area of ​​the shape to be matched and the interference shape projected on the background image, and set the opacity of the projection area to a preset opacity, wherein the preset opacity is greater than or equal to 50% and less than or equal to 90%; H. placing the shape to be matched outside the left side of the background image; I. scaling the entire area consisting of the shape to be matched placed outside the left side of the background image and the background image in geometric proportion, and embedding it in the required position of the webpage to form a verification area; J. The operator uses the mouse to drag the shape to be matched outside the left side of the background image, move it to the right in the background image, and place it in a vacant position with the same shape. After the operator releases the mouse, the shape matching verification process is immediately triggered.

2. The method for generating and verifying a webpage embedded graphic verification code according to claim 1, characterized in that: Prepare a variety of geometric shapes and create a shape library, including: prepare 5 or more geometric shapes, make them into vector graphics, scale them proportionally in a 100*100px square frame, and have a 10px margin between the shape and the border as a shape library.

3. The method for generating and verifying a webpage embedded graphic verification code according to claim 2, characterized in that: Prepare multiple photos and create a background library, including: prepare 5 or more photos, crop them into a 500*100px rectangle as the background library.

4. The method for generating and verifying a webpage embedded graphic verification code according to claim 3, characterized in that: The overlapping area of ​​each shape partially overlapping with at least one adjacent shape is greater than 1% and less than or equal to 20% of the area of ​​a single graphic.

5. The method for generating and verifying a webpage embedded graphic verification code according to claim 4, characterized in that: The preset opacity is 80%.

6. The method for generating and verifying a webpage embedded graphic verification code according to claim 1, characterized in that: After the operator drags the shape to be matched outside the left side of the background image with a mouse and moves it rightward to the background image, the method further includes: if the placement position of the shape to be matched can completely fit the vacancy of the corresponding shape in the projection area of ​​the background image, the verification is passed and the verification process ends; if it cannot completely fit, the verification fails; The operator uses the mouse to select the shape to be matched on the left and starts timing. If the mouse is not released for more than 5 seconds, the verification is considered failed; After verification fails, re-execute generation steps C to I, regenerate the verification area, and wait for the operator to perform the next operation; After a preset number of verification failures, the lock time is triggered. After unlocking, the verification area is regenerated and the operator can perform the next operation. The lock time is a preset duration.

Images