Login verification method, computer readable storage medium and login verification system

Abstract

The invention provides a login verification method, a computer readable storage medium and a login verification system. The login verification method comprises the following steps: if a login instruction is received, calling a graphic verification code generated by a canvas; the graphic verification code comprises an immovable background image and a sliding block image moving relative to the background image; the background image comprises a missing part, and the missing part corresponds to the sliding block image; acquiring a moving track of the sliding block diagram; and according to the moving track, verifying whether the login is secure login. A graphic verification code can be generated on a front-end page by calling the canvas, and due to the fact that the tracks of manually dragging the sliding block diagram and the tracks of mechanically dragging the sliding block diagram are different, whether the login is safe or not can be verified according to the moving tracks of the sliding block diagram, so that generation and verification of the graphic verification code can be completed on the front-end page, login verification is completed through the front end, and the verification efficiency is improved. The method does not depend on back-end resources, can improve verification efficiency, reduces server pressure, and improves user experience.

Description

Technical Field

[0001] The present application relates to the technical field of front-end page login verification, and in particular to a login verification method, a computer-readable storage medium, and a login verification system. Background Art

[0002] In the front-end page, it is usually necessary to verify the login to verify whether it is a normal human login or an abnormal machine login.

[0003] The method of using image verification code for login verification needs to rely on the backend server to verify the image, which increases the pressure on the server, slows the verification speed, and requires developers to configure the image, which has high development costs. The increased pressure on the backend server may cause the image to load slowly, causing users to delay login or even fail to log in, affecting the user experience. Summary of the invention

[0004] The present application provides a login verification method, a computer-readable storage medium, and a login verification system for completing verification through a front end.

[0005] This application provides a login verification method, including:

[0006] If a login instruction is received, a graphic verification code generated by the canvas is called; the graphic verification code includes an immovable background image and a slider image that moves relative to the background image; the background image includes a missing part, and the missing part corresponds to the slider image;

[0007] Obtaining the moving track of the slider graph;

[0008] Based on the movement trajectory, verify whether it is a safe login.

[0009] Optionally, obtaining the moving track of the slider graph includes:

[0010] Obtaining multiple position coordinates of the slider image;

[0011] The verifying whether the login is safe according to the movement track includes:

[0012] Obtaining multiple sets of position coordinates according to the multiple position coordinates obtained;

[0013] Determining the data fluctuation degree of the multiple sets of position coordinates; the data fluctuation degree is used to indicate whether the moving trajectory is smooth;

[0014] If the data fluctuation level indicates that the movement trajectory is smooth, it is determined to be unsafe login and login is prohibited;

[0015] If the data fluctuation level indicates that the movement trajectory is not smooth, it is confirmed as a safe login and the login is allowed.

[0016] Optionally, determining the data fluctuation degree of the multiple sets of position coordinates includes:

[0017] determining a standard deviation of the plurality of sets of position coordinates;

[0018] If the standard deviation is greater than a standard deviation threshold, determining that the degree of data fluctuation indicates that the movement trajectory is not smooth;

[0019] If the standard deviation is not greater than a standard deviation threshold, determining that the data fluctuation level indicates that the movement trajectory is smooth.

[0020] Optionally, determining the data fluctuation degree of the multiple sets of position coordinates includes:

[0021] Determine the variance of the multiple sets of position coordinates; if the variance is greater than a variance threshold, determine that the degree of data fluctuation indicates that the moving trajectory is not smooth; if the variance is not greater than the variance threshold, determine that the degree of data fluctuation indicates that the moving trajectory is smooth.

[0022] Optionally, determining the data fluctuation degree of the multiple sets of position coordinates includes:

[0023] Determine an average value of the multiple groups of position coordinates; if the average value is greater than an average value threshold, determine that the data fluctuation degree indicates that the movement trajectory is not smooth; if the average value is not greater than the average value threshold, determine that the data fluctuation degree indicates that the movement trajectory is smooth.

[0024] Optionally, the obtaining of multiple position coordinates of the slider image includes:

[0025] During the movement of the slider graph, the current position coordinates of the slider graph are acquired once every preset time period to obtain the multiple position coordinates.

[0026] Optionally, the obtaining of multiple position coordinates of the slider image includes:

[0027] In the x-axis direction of the moving track, the current position coordinates of the slider image are acquired at every preset distance to obtain the multiple position coordinates.

[0028] Optionally, the obtaining of multiple position coordinates of the slider image includes:

[0029] In the y-axis direction of the moving track, the current position coordinates of the slider image are obtained at every preset distance to obtain the multiple position coordinates.

[0030] Optionally, obtaining the moving track of the slider graph includes:

[0031] If a mouse operation event for operating the slider graph is received, the mouse operation event is bound to the slider graph, and the current position coordinates of the slider graph are recorded; the mouse operation event includes mouse click, mouse drag and mouse release in sequence;

[0032] A moving track of the slider graph is generated according to a change in the current position coordinates of the slider graph.

[0033] Optionally, the graphic verification code is generated by the following steps:

[0034] Generate a complete picture on the canvas;

[0035] The complete image is divided into the background image and the slider image.

[0036] The present application provides a computer-readable storage medium on which a program is stored. When the program is executed by a processor, any of the above-mentioned login verification methods is implemented.

[0037] The present application also provides a login verification system, comprising:

[0038] A calling module, configured to call a graphic verification code generated by a canvas if a login instruction is received; the graphic verification code includes an immovable background image and a slider image that moves relative to the background image; the background image includes a missing portion, and the missing portion corresponds to the slider image;

[0039] An acquisition module, used for acquiring the moving track of the slider graph;

[0040] The verification module is used to verify whether it is a safe login based on the movement trajectory.

[0041] In some embodiments, calling canvas can generate a graphic verification code on the front-end page. The graphic verification code includes an immovable background image and a slider image that moves relative to the background image. The trajectories of manually dragging the slider image and machine dragging the slider image are different. According to the movement trajectory of the slider image, it can be verified whether it is a safe login. In this way, the generation and verification of the graphic verification code can be completed on the front-end page. The login verification is completed through the front-end without relying on back-end resources, which can improve verification efficiency, reduce server pressure, and enhance user experience.

[0042] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0044] Figure 1 Shown is a flow chart of an embodiment of the login verification method of the present application.

[0045] Figure 2 Shown is a schematic diagram of an embodiment of a login page used in the login verification method of the present application.

[0046] Figure 3 Shown is a structural block diagram of an embodiment of the login verification system of the present application. DETAILED DESCRIPTION

[0047] The present application provides a login verification method, a computer-readable storage medium, and a login verification system. The login verification method, computer-readable storage medium, and login verification system of the present application are described in detail below in conjunction with the accompanying drawings. In the absence of conflict, the features of the following embodiments and implementations can be combined with each other.

[0048] Figure 1 Shown is a flow chart of an embodiment of the login verification method 10 of the present application.

[0049] Figure 2 Shown is a schematic diagram of an embodiment of a login page 20 applied to the login verification method 10 of the present application.

[0050] like Figure 1 As shown, the login verification method 10 includes: steps 11 to 13.

[0051] Step 11: If a login instruction is received, the graphic verification code generated by the canvas is called.

[0052] like Figure 2 As shown, the login page 20 includes an "account" field, an account input box, and a "login" button. The login instruction can be triggered by the "login" button. When the "login" button is clicked, a login instruction is generated.

[0053] In some embodiments, the login page 20 further includes a "get verification code" button, and the login instruction is triggered by the "get verification code" button. When the "get verification code" button is clicked, a login instruction is generated.

[0054] The login page 20 includes a graphic verification code 21. The graphic verification code 21 includes an immovable background image 22 and a slider image 23 that moves relative to the background image 22. The background image 22 includes a missing portion 24, and the missing portion 24 corresponds to the slider image 23. The slider image 23 and the missing portion 24 have the same shape and size. The slider image 23 can be dragged to move relative to the background image 22. When the slider image 23 moves to the missing portion 24, the slider image 23 completely overlaps with the missing portion 24.

[0055] In response to the login instruction, the graphic verification code 21 generated by the canvas is called. The login page 20 includes a canvas element. The canvas element is used to generate the graphic verification code 21. Specifically, a canvas element is added to the HTML code of the login page 20. The canvas element can generate images in real time on the web page and can operate the image content. The canvas element is obtained through JavaScript code, and the drawing context is obtained. The graphic verification code 21 is drawn through methods such as beginPath(), moveTo(), lineTo(), arc(), etc. The beginPath() method is used to start a path or reset the current path. The moveTo() method is used to move the path to a specified point in the canvas without creating a line. The lineTo() method is used to add a new point in the canvas and then create a line from the point to the specified point in the canvas. The arc() method is used to create an arc / curve, which can be used to create a circle or a partial circle.

[0056] The graphic verification code 21 can be pre-generated and displayed on the login page 20 through a call when the login instruction is received. The graphic verification code 21 can also be dynamically generated on the login page 20 after the login instruction is received. The graphic verification code 21 is generated by the canvas, so that the graphic verification code 21 does not need to be pre-stored in the back-end server, and no pre-configuration is required, which reduces the pressure on the back-end server. The graphic verification code 21 can contain text, numbers, lines, noise, interference lines, etc. The content of the graphic verification code 21 is randomly generated. Each time a login instruction is received, a different graphic verification code 21 is called.

[0057] In some embodiments, the graphic verification code 21 is generated by the following steps: generating a complete image on a canvas; dividing the complete image into a background image 22 and a slider image 23 .

[0058] The complete image can be drawn by the drawImage() method of JavaScript. The content of the image is randomly generated. After the complete image is generated, the complete image is cut. The missing part is cut out from the complete image, and the missing part is used as the slider image 23, and the rest of the complete image is used as the background image 22. The slider image 23 can be moved relative to the background image 22. By using this method to generate the graphic verification code 21, only one complete image is needed, and there is no need to store the background image 22 and the slider image 23 separately, which saves storage space.

[0059] In some embodiments, the graphic verification code 21 is generated by the following steps: resetting the canvas; generating a complete image on the canvas; and dividing the complete image into a background image 22 and a slider image 23. Resetting the canvas before generating an image can prevent interference from the last generated image.

[0060] In some embodiments, the graphic verification code 21 is generated by the following steps: a first picture and a second picture are generated on a canvas, the second picture can be moved relative to the first picture, and the first picture includes a missing part, and the missing part corresponds to the second picture.

[0061] In some embodiments, the login verification method 10 further includes: if no login instruction is received, displaying a password login interface. The password login interface is used to input a password to complete the login.

[0062] Step 12, obtaining the moving track of the slider diagram 23.

[0063] The process of dragging the slider image 23 to the missing part of the background image 22 generates a moving track. The moving track of the slider image 23 is obtained for subsequent steps.

[0064] Step 13: Verify whether the login is safe based on the movement trajectory.

[0065] The trajectories of slider Figure 23 dragged by humans and slider Figure 23 dragged by machines are different. The trajectory of slider Figure 23 dragged by machines is usually relatively straight, while the trajectory of slider Figure 23 dragged by humans is usually an undulating curve. Therefore, based on the shape of the moving trajectory of slider Figure 23, it is possible to verify whether it is a safe login. The speeds of slider Figure 23 dragged by humans and slider Figure 23 dragged by machines are also usually different. The machine can drag slider Figure 23 at a relatively even speed, while the speed of slider Figure 23 dragged by humans varies more. Therefore, the moving speed of slider Figure 23 can also be calculated based on the moving trajectory of slider Figure 23, and based on the changes in the moving speed, it is possible to verify whether it is a safe login.

[0066] In some embodiments, calling canvas can generate a graphic verification code 21 on the front-end page 20. The graphic verification code 21 includes an immovable background image 22 and a slider image 23 that moves relative to the background image 22. The trajectory of the slider image 23 is used to verify whether it is a safe login. In this way, the generation and verification of the graphic verification code 21 can be completed on the front-end page 20. The login verification is completed through the front-end without relying on back-end resources, which can improve verification efficiency, reduce server pressure, and enhance user experience.

[0067] In some embodiments, step 12 includes: obtaining multiple position coordinates of the slider map 23. Step 13 includes: obtaining multiple sets of position coordinates according to the obtained multiple position coordinates; determining the data fluctuation degree of the multiple sets of position coordinates; the data fluctuation degree is used to indicate whether the moving track is smooth; if the data fluctuation degree indicates that the moving track is smooth, it is confirmed as unsafe login and login is prohibited; if the data fluctuation degree indicates that the moving track is not smooth, it is confirmed as safe login and login is allowed.

[0068] In the process of the slider image 23 being dragged to the missing part of the background image 22, multiple position coordinates of the slider image 23 are obtained. The multiple position coordinates of the slider image 23 are used to reflect the trajectory of the slider image 23. The data fluctuation degree of multiple sets of position coordinates can reflect the fluctuation degree of the moving trajectory, thereby reflecting the shape of the moving trajectory. If the data fluctuation degree indicates that the trajectory is smooth, it means that the slider image 23 is moved by dragging the machine, so it is confirmed as an unsafe login and the login is prohibited. If the data fluctuation degree indicates that the trajectory is smooth, it means that the slider image 23 is moved by dragging the machine, so it is confirmed as a safe login and the login is allowed. By obtaining multiple position coordinates of the slider image 23, it can be simply and conveniently determined whether it is a safe login based on the data fluctuation degree of the multiple position coordinates.

[0069] In some embodiments, the obtaining of multiple position coordinates of the slider image 23 includes: during the movement of the slider image 23 , obtaining the current position coordinates of the slider image 23 once at a preset time interval to obtain multiple position coordinates.

[0070] The preset duration can be pre-set according to a specific usage scenario. Specifically, a timer can be set, and during the movement of the slider image 23, whenever the timer is triggered, the current position coordinates of the slider image 23 are obtained. In this way, during the movement of the slider image 23, a series of multiple position coordinates of the slider image 23 arranged in chronological order can be obtained.

[0071] In some embodiments, the obtaining of multiple position coordinates of the slider diagram 23 includes: obtaining the current position coordinate of the slider diagram 23 at every preset distance in the x-axis direction of the moving track to obtain multiple position coordinates.

[0072] When verifying the graphic verification code 21, if it is necessary to drag the slider image 23 horizontally to the missing part of the background image 22, you can focus on the movement of the slider image 23 in the x-axis direction. The preset distance can be set according to the specific usage scenario. Whenever the slider image 23 moves to a preset distance in the x-axis direction, its current position coordinates are obtained. In this way, the key moving points of the slider image 23 in the horizontal direction can be captured, and the fluctuation of the slider image 23 in the x-axis can be judged according to the coordinates of the key moving points.

[0073] In some embodiments, the obtaining of multiple position coordinates of the slider diagram 23 includes: obtaining the current position coordinate of the slider diagram 23 at every preset distance in the y-axis direction of the moving track to obtain multiple position coordinates.

[0074] By collecting multiple position coordinates of the slider graph 23 in the y-axis direction, the key moving points of the slider graph 23 in the vertical direction can be obtained, and the fluctuation of the slider graph 23 in the y-axis can be determined according to the coordinates of the key moving points.

[0075] In some embodiments, determining the degree of data fluctuation of multiple sets of position coordinates includes: determining the standard deviation of multiple sets of position coordinates; if the standard deviation is greater than a standard deviation threshold, determining that the degree of data fluctuation indicates that the moving trajectory is not smooth; if the standard deviation is not greater than the standard deviation threshold, determining that the degree of data fluctuation indicates that the moving trajectory is smooth.

[0076] The standard deviation is an indicator to measure the degree of dispersion of data distribution. The standard deviation threshold is used to determine whether the movement trajectory is smooth or not, and then used to determine whether it is a safe login. The standard deviation threshold can be set based on historical experience and experimental results. In multiple sets of position coordinates, if the standard deviation is large, it means that the degree of dispersion between these coordinate points is high, that is, the movement trajectory fluctuates greatly in all directions, and may contain more sharp turns or irregular movements, so it is judged as not smooth. On the contrary, if the standard deviation is small, it means that the coordinate points are relatively concentrated and the movement trajectory is relatively stable and smooth.

[0077] In some embodiments, determining the degree of data fluctuation of multiple sets of position coordinates includes: determining the variance of multiple sets of position coordinates; if the variance is greater than a variance threshold, determining that the degree of data fluctuation indicates that the moving trajectory is not smooth; if the variance is not greater than the variance threshold, determining that the degree of data fluctuation indicates that the moving trajectory is smooth.

[0078] Variance is the square of the standard deviation and is also used to measure the degree of dispersion of data. The variance threshold is used to determine whether the movement trajectory is smooth or not, and then used to determine whether it is a safe login. The variance threshold can be set based on historical experience and experimental results. When evaluating the degree of data fluctuation of multiple sets of location coordinates, a large variance means a large degree of dispersion between the coordinate points, that is, the movement trajectory is highly volatile and may not be smooth. On the contrary, a small variance indicates that the coordinate points are relatively concentrated and the movement trajectory is relatively smooth.

[0079] In some embodiments, determining the degree of data fluctuation of multiple sets of position coordinates includes: determining the average value of the multiple sets of position coordinates; if the average value is greater than the average value threshold, determining that the degree of data fluctuation indicates that the moving trajectory is not smooth; if the average value is not greater than the average value threshold, determining that the degree of data fluctuation indicates that the moving trajectory is smooth.

[0080] The average value can reflect the discreteness of the data to a certain extent. In some embodiments, the determination of the data fluctuation degree of multiple sets of position coordinates includes: determining the average value of the ordinates of the multiple sets of position coordinates. In this way, the degree of fluctuation of the slider graph 23 in the y-axis direction can be determined. If the average value is small, it means that the fluctuation of the slider graph 23 on the y-axis is small, and it is determined to be an unsafe login operated by a machine. If the average value is large, it means that the fluctuation of the slider graph 23 on the y-axis is large, and it is determined to be a safe login operated by a human.

[0081] In some embodiments, step 12 includes: if a mouse operation event for operating the slider figure 23 is received, the mouse operation event is bound to the slider figure 23, and the current position coordinates of the slider figure 23 are recorded; the mouse operation events include mouse clicks, mouse drags, and mouse releases in sequence; and according to the changes in the current position coordinates of the slider figure 23, the movement trajectory of the slider figure 23 is generated.

[0082] When the mouse pointer moves over the slider 23 and performs operations such as mouse click, drag or release, these operations will be captured and corresponding mouse operation events will be generated. The mouse operation events are then passed to the program or code segment that handles these events.

[0083] Bind the corresponding mouse operation event processing function to the slider 23. When the corresponding mouse operation event occurs, the bound function will be automatically called to perform the corresponding operation.

[0084] Each time a mouse operation event occurs, the current position coordinates of the slider diagram 23 need to be recorded. In the process of dragging the slider diagram 23 with the mouse, the current position coordinates of multiple slider diagrams 23 are recorded. Based on these position coordinates, the movement trajectory of the slider diagram 23 is generated. Specifically, the multiple position coordinates are fitted to a curve as the movement trajectory of the slider diagram 23.

[0085] Figure 3 Shown is a structural block diagram of an embodiment of the login verification system 30 of the present application.

[0086] like Figure 3 As shown, the login verification system 30 includes: a calling module 31, an acquisition module 32 and a verification module 33.

[0087] The calling module 31 is used to call the graphic verification code 21 generated by the canvas if a login instruction is received. The graphic verification code 21 includes an immovable background image 22 and a slider image 23 that moves relative to the background image 22. The background image 22 includes a missing part, which corresponds to the slider image 23.

[0088] The acquisition module 32 is used to acquire the moving track of the slider diagram 23 .

[0089] The verification module 33 is used to verify whether it is a safe login based on the movement trajectory.

[0090] The present application also provides a computer-readable storage medium on which a program is stored. When the program is executed by a processor, the login verification method 10 described above is implemented.

[0091] The present application may take the form of a computer program product implemented on one or more computer-readable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing program code. Computer-readable storage media include permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer-readable storage media include but are not limited to: phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

Claims

1. A login verification method, characterized in that: include: If a login instruction is received, a graphic verification code generated by the canvas is called; the graphic verification code includes an immovable background image and a slider image that moves relative to the background image; the background image includes a missing part, and the missing part corresponds to the slider image; Obtaining the moving track of the slider graph; Based on the movement trajectory, verify whether it is a safe login.

2. The login verification method according to claim 1, characterized in that: The obtaining of the moving track of the slider graph includes: Obtaining multiple position coordinates of the slider image; The verifying whether the login is safe according to the movement track includes: Obtaining multiple sets of position coordinates according to the multiple position coordinates obtained; Determining the data fluctuation degree of the multiple sets of position coordinates; the data fluctuation degree is used to indicate whether the moving trajectory is smooth; If the data fluctuation level indicates that the movement trajectory is smooth, it is determined to be unsafe login and login is prohibited; If the data fluctuation level indicates that the movement trajectory is not smooth, it is confirmed as a safe login and the login is allowed.

3. The login verification method according to claim 2, characterized in that: Determining the data fluctuation degree of the multiple sets of position coordinates includes: determining a standard deviation of the plurality of sets of position coordinates; If the standard deviation is greater than a standard deviation threshold, determining that the degree of data fluctuation indicates that the movement trajectory is not smooth; If the standard deviation is not greater than a standard deviation threshold, determining that the data fluctuation level indicates that the movement trajectory is smooth.

4. The login verification method according to claim 2, characterized in that: Determining the data fluctuation degree of the multiple sets of position coordinates includes: Determine the variance of the multiple sets of position coordinates; if the variance is greater than a variance threshold, determine that the degree of data fluctuation indicates that the movement trajectory is not smooth; if the variance is not greater than the variance threshold, determine that the degree of data fluctuation indicates that the movement trajectory is smooth; or Determine an average value of the multiple groups of position coordinates; if the average value is greater than an average value threshold, determine that the data fluctuation degree indicates that the movement trajectory is not smooth; if the average value is not greater than the average value threshold, determine that the data fluctuation degree indicates that the movement trajectory is smooth.

5. The login verification method according to claim 2, characterized in that: The obtaining of multiple position coordinates of the slider image includes: During the movement of the slider graph, the current position coordinates of the slider graph are acquired once every preset time period to obtain the multiple position coordinates.

6. The login verification method according to claim 2, characterized in that: The obtaining of multiple position coordinates of the slider image includes: In the x-axis direction of the moving track, obtaining the current position coordinates of the slider image at every preset distance to obtain the multiple position coordinates; or In the y-axis direction of the moving track, the current position coordinates of the slider image are obtained at every preset distance to obtain the multiple position coordinates.

7. The login verification method according to claim 1, characterized in that: The obtaining of the moving track of the slider graph includes: If a mouse operation event for operating the slider graph is received, the mouse operation event is bound to the slider graph, and the current position coordinates of the slider graph are recorded; the mouse operation event includes mouse click, mouse drag and mouse release in sequence; A moving track of the slider graph is generated according to a change in the current position coordinates of the slider graph.

8. The login verification method according to claim 1, characterized in that: The graphic verification code is generated by the following steps: Generate a complete picture on the canvas; The complete image is divided into the background image and the slider image.

9. A computer-readable storage medium, characterized in that: A program is stored thereon, and when the program is executed by a processor, the login verification method described in any one of claims 1 to 8 is implemented.

10. A login verification system, characterized in that: include: A calling module, configured to call a graphic verification code generated by a canvas if a login instruction is received; the graphic verification code includes an immovable background image and a slider image that moves relative to the background image; the background image includes a missing portion, and the missing portion corresponds to the slider image; An acquisition module, used for acquiring the moving track of the slider graph; The verification module is used to verify whether it is a safe login based on the movement trajectory.

Images