Creating a captcha in a Servlet
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.style.css
* { 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. index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>This is the file, where we define the html form, load the captcha image and react to submit action.
<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>
<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". 
Figure: Captcha
CaptchaServlet.java
package com.zetcode;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.
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);
}
}
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,We will draw into a buffered image.
BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = bufferedImage.createGraphics();
RenderingHints rh = new RenderingHints(The rendering hints are used to increase the quality of the text.
RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
rh.put(RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHints(rh);
g2d.setRenderingHints(rh);Here we draw the gradient.
GradientPaint gp = new GradientPaint(0, 0,
Color.red, 0, height/2, Color.black, true);
g2d.setPaint(gp);
g2d.fillRect(0, 0, width, height);
Random r = new Random();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 index = Math.abs(r.nextInt()) % 5;
String captcha = String.copyValueOf(data[index]);
request.getSession().setAttribute("captcha", captcha );
int x = 0;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.
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);
}
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. In this chapter we have created a captcha in a Java Servlet.
0 comments:
Post a Comment