Java EE Creating a captcha in a Servlet
Материал из Wiki.crossplatform.ru
(Новая: In this part of the JEE tutorials we will use a captcha test in our form. A <b>captcha</b> is a type of challenge-response test used in computing to determine whether the user is human....)
Следующая правка →
Версия 09:51, 25 февраля 2009
In this part of the JEE tutorials we will use a captcha test in our form.
A captcha is a type of challenge-response test used in computing to determine whether the user is human. Captcha is a contrived acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart". (Wikipedia) Using captchas on Internet is almost inevitable, because the forums and message boards are infested with spam.
Captcha
In the following example, we will demonstrate a captcha system in a small example. We have a html form. At the bottom of the form, we have a input tag named code. Here the user has to copy the characters of an image, which is displayed below the input box. This is the most common captcha system on the Internet. The main part of the captcha system is a image, displaying random alphanumeric characters. The characters are usually blurred or otherwise made a bit more difficult to read.
* { font-size: 12px; font-family: Verdana } input, textarea { border: 1px solid #ccc } tr { margin: 5px; padding:5px;} .alert { font-size:15px; color:red; font-weight:bolder }
This is a simple stylesheet for our example. The .alert class is used to format text displaying whether we passed the test or not.
<%@page contentType="text/html" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Captcha</title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <form method="post"> <table cellspacing="15"> <tr> <td>Name</td> <td><input type="text" name="name"></td> </tr> <tr> <td>Message</td> <td> <textarea type="text" cols="25" rows="8" name="message"></textarea></td> </tr> <tr> <td>Are you human?</td> <td><input type="text" name="code"></td> </tr> </table> <br> <img src="http://localhost:8080/captcha/CaptchaServlet"> <br><br> <input type="submit" value="submit"> </form> <br><br> <% String captcha = (String) session.getAttribute("captcha"); String code = (String) request.getParameter("code"); if (captcha != null && code != null) { if (captcha.equals(code)) { out.print("<p class='alert'>Correct</p>"); } else { out.print("<p class='alert'>Incorrect</p>"); } } %> </center> </body> </html>
This is the file, where we define the html form, load the captcha image and react to submit action.
<form method="post">
If we don't provide the action parameter, the processing is transfered to the same file by default. e.g index.jsp in our case.
<img src="http://localhost:8080/captcha/CaptchaServlet">
This is the way, how we get the image from the servlet. We provide the location of the servlet to the src parameter of the html img tag. Each time we refresh the page, we get a new image from the CaptchaServlet.
String captcha = (String) session.getAttribute("captcha"); String code = (String) request.getParameter("code"); if (captcha != null && code != null) { if (captcha.equals(code)) { out.print("<p class='alert'>Correct</p>"); } else { out.print("<p class='alert'>Incorrect</p>"); } }
This code receives the parameters from the request. The message and name parameters are ignored. The captcha is a string, that is set randomly by the servlet. This string is being shown in the image. The code is the text, which is put by the user. If these two strings match, we output "Correct" string, otherwise "Incorrect".
package com.zetcode; import java.awt.Color; import java.awt.Font; import java.awt.GradientPaint; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.image.BufferedImage; import java.io.*; import java.net.*; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.*; import javax.servlet.http.*; public class CaptchaServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int width = 150; int height = 50; char data[][] = { { 'z', 'e', 't', 'c', 'o', 'd', 'e' }, { 'l', 'i', 'n', 'u', 'x' }, { 'f', 'r', 'e', 'e', 'b', 's', 'd' }, { 'u', 'b', 'u', 'n', 't', 'u' }, { 'j', 'e', 'e' } }; BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g2d = bufferedImage.createGraphics(); Font font = new Font("Georgia", Font.BOLD, 18); g2d.setFont(font); RenderingHints rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); GradientPaint gp = new GradientPaint(0, 0, Color.red, 0, height/2, Color.black, true); g2d.setPaint(gp); g2d.fillRect(0, 0, width, height); g2d.setColor(new Color(255, 153, 0)); Random r = new Random(); int index = Math.abs(r.nextInt()) % 5; String captcha = String.copyValueOf(data[index]); request.getSession().setAttribute("captcha", captcha ); int x = 0; int y = 0; for (int i=0; i<data[index].length; i++) { x += 10 + (Math.abs(r.nextInt()) % 15); y = 20 + Math.abs(r.nextInt()) % 20; g2d.drawChars(data[index], i, 1, x, y); } g2d.dispose(); response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(bufferedImage, "png", os); os.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } }
In the Captcha servlet, we create an image of 150*50 size. To create the image, we use the Java 2D vector library. The image is filled with red - black gradient. We draw randomly a string into the image.
char data[][] = { { 'z', 'e', 't', 'c', 'o', 'd', 'e' }, { 'l', 'i', 'n', 'u', 'x' }, { 'f', 'r', 'e', 'e', 'b', 's', 'd' }, { 'u', 'b', 'u', 'n', 't', 'u' }, { 'j', 'e', 'e' } };
This is an array, from which we choose our string.
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g2d = bufferedImage.createGraphics();
We will draw into a buffered image.
RenderingHints rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh);
The rendering hints are used to increase the quality of the text.
g2d.setRenderingHints(rh); GradientPaint gp = new GradientPaint(0, 0, Color.red, 0, height/2, Color.black, true); g2d.setPaint(gp); g2d.fillRect(0, 0, width, height);
Here we draw the gradient.
Random r = new Random(); int index = Math.abs(r.nextInt()) % 5; String captcha = String.copyValueOf(data[index]); request.getSession().setAttribute("captcha", captcha );
Here we randomly choose an index into the array. We also set the chosen string into the session, so that we can compare it later to the parameter, specified by the user.
int x = 0; int y = 0; for (int i=0; i<data[index].length; i++) { x += 10 + (Math.abs(r.nextInt()) % 15); y = 20 + Math.abs(r.nextInt()) % 20; g2d.drawChars(data[index], i, 1, x, y); }
This is the code, that draws the string into the image. We must make sure, that the text fits into the boudaries of the image.
response.setContentType("image/png"); OutputStream os = response.getOutputStream(); ImageIO.write(bufferedImage, "png", os); os.close();
Finally, we return the image through a byte stream. We set a content type to png image. The write() method of the ImageIO class writes the data from the buffered image into the servlet output stream. This way we send binary data to the client.
