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

Today, I will talk to you about how to use canvas to achieve graphics CAPTCHA, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Careful students can find that many websites will have a graphic CAPTCHA after logging in many times, or when submitting a form, or clicking to get a mobile phone CAPTCHA, and so on.

So what problem does the graphic CAPTCHA appear to solve?

What is a graphic CAPTCHA

Graphic CAPTCHA is a kind of CAPTCHA. CAPTCHA, an abbreviation for "Completely Automated Public Turing test to tell Computers and Humans Apart" (Turing test that automatically distinguishes computers from humans), is a fully automated public program that distinguishes whether a user is a computer or a human. Can prevent: malicious cracking of passwords, ticket brushing, forum irrigation, effectively prevent a hacker from constantly trying to crack a specific registered user with a specific program, in fact, using CAPTCHA is a common way for many websites.

Since the graphic CAPTCHA is to distinguish the operation between the machine and the human, we can draw a question on the graph that only the human can answer. It is more common to generate a text verification code on the picture, and then the text matching on the picture is verified by the user.

Although this verification method has been gradually eliminated by other more advanced methods (the text on the picture can still be recognized and read by the program), and the way in which the front end generates CAPTCHA is less secure than the back end, but our purpose is only to install x, to improve the security of the program is only an incidental effect.

Login form

First, we need to add an additional FormItem to the login form to enter the CAPTCHA and provide a canvas container for the graphical CAPTCHA. Sometimes the generated CAPTCHA is not understood, so you need to add a click event to the CAPTCHA to switch the CAPTCHA:

Attributes needed to log in

The form needs to add an additional valiCode to record the CAPTCHA entered by the user. Here we define that when the user fails to log in once, it needs to enter the graphic verification code, so add the count attribute, when the login fails, of course, count++, is not very strict, and the user refreshes the page count will clear zero. You can add more restrictions here, such as remote login, etc., since this case does not involve the back-end program at all, it is simply based on count.

Data () {return {form: {userName: ", / / username password:", / / password valiCode: "/ / CAPTCHA}, count: 0, / / number of logins show_num: [], / / text on the drawing}} production graphic CAPTCHA

The method getImgYanzheng bound to the canvas container on the page is drawing the graphic CAPTCHA.

. When drawing a graphic CAPTCHA, you need to define a content collection for your CAPTCHA. What you use here is: Arecedence Brecinct C _ (?) Several letters that are easy to be mistakenly identified are removed from the letters and text can be added at will (so the graphic CAPTCHA can also be made to randomly generate four text for users to click on, or generate idioms for users to fill in blanks, and so on). And the user case is ignored, so you need to use the toLowerCase method.

Here are some tips for canvas drawing.

Canvas drawing

The canvas element itself does not have the ability to draw. All drawing work must be done within JavaScript:

Var c=document.getElementById ("myCanvas"); var cxt=c.getContext ("2d")

Use id in JavaScript to find canvas elements, and then create context objects. GetContext ("2d") objects are built-in HTML5 objects with multiple ways to draw paths, rectangles, circles, characters, and add images. We can think of canvas as the scene and context as the canvas of the scene.

As the process of drawing CAPTCHA is drawn from left to right, it is necessary to plan the scope of use of the canvas, and add some random elements to make CAPTCHA not easily recognized by the program.

GetImgYanzheng () {var show_num = []; var canvas_width = 150; / document.getElementById ("canvas"). Style.width; var canvas_height = 30; / / document.getElementById ("canvas"). Style.height; var canvas = document.getElementById ("canvas"); / / get the object of canvas, var context = canvas.getContext ("2d") / / get the environment of canvas drawing, and the canvas canvas.width = canvas_width; canvas.height = canvas_height; var sCode = "A Brecedence Cpice"; var aCode = sCode.split (",") Var aLength = aCode.length; / / get the length of the array for (var I = 0; 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.