|
|
| Строка 1: |
Строка 1: |
| - | 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. 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.
| |
| - | <source lang="java">
| |
| - | * { 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 }
| |
| - | </source>
| |
| - |
| |
| - | This is a simple stylesheet for our example. The .alert class is used to format text displaying whether we passed the test or not.
| |
| - |
| |
| - | <source lang="java">
| |
| - | <%@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>
| |
| - | </source>
| |
| - |
| |
| - | This is the file, where we define the html form, load the captcha image and react to submit action.
| |
| - |
| |
| - | <source lang="java">
| |
| - | <form method="post">
| |
| - | </source>
| |
| - |
| |
| - | 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.
| |
| - |
| |
| - | <source lang="java">
| |
| - | <img src="http://localhost:8080/captcha/CaptchaServlet">
| |
| - | </source>
| |
| - |
| |
| - | 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 <b>CaptchaServlet</b>.
| |
| - |
| |
| - | <source lang="java">
| |
| - | 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>");
| |
| - | }
| |
| - | }
| |
| - | </source>
| |
| - |
| |
| - | 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".
| |
| - |
| |
| - | [[image: java_ee_faq_captcha.png| center]]
| |
| - |
| |
| - | <source lang="java">
| |
| - | 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);
| |
| - | }
| |
| - | }
| |
| - | </source>
| |
| - |
| |
| - | 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.
| |
| - |
| |
| - | <source lang="java">
| |
| - | 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' }
| |
| - | };
| |
| - | </source>
| |
| - |
| |
| - | This is an array, from which we choose our string.
| |
| - |
| |
| - | <source lang="java">
| |
| - | BufferedImage bufferedImage = new BufferedImage(width, height,
| |
| - | BufferedImage.TYPE_INT_RGB);
| |
| - |
| |
| - | Graphics2D g2d = bufferedImage.createGraphics();
| |
| - | </source>
| |
| - |
| |
| - | We will draw into a buffered image.
| |
| - |
| |
| - | <source lang="java">
| |
| - | RenderingHints rh = new RenderingHints(
| |
| - | RenderingHints.KEY_ANTIALIASING,
| |
| - | RenderingHints.VALUE_ANTIALIAS_ON);
| |
| - |
| |
| - | rh.put(RenderingHints.KEY_RENDERING,
| |
| - | RenderingHints.VALUE_RENDER_QUALITY);
| |
| - |
| |
| - | g2d.setRenderingHints(rh);
| |
| - | </source>
| |
| - |
| |
| - | The rendering hints are used to increase the quality of the text.
| |
| - |
| |
| - | <source lang="java">
| |
| - | 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);
| |
| - | </source>
| |
| - |
| |
| - | Here we draw the gradient.
| |
| - |
| |
| - | <source lang="java">
| |
| - | Random r = new Random();
| |
| - | int index = Math.abs(r.nextInt()) % 5;
| |
| - |
| |
| - | String captcha = String.copyValueOf(data[index]);
| |
| - | request.getSession().setAttribute("captcha", captcha );
| |
| - | </source>
| |
| - |
| |
| - | 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.
| |
| - |
| |
| - | <source lang="java">
| |
| - | 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);
| |
| - | }
| |
| - |
| |
| - | </source>
| |
| - |
| |
| - | 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.
| |
| - |
| |
| - | <source lang="java">
| |
| - | response.setContentType("image/png");
| |
| - | OutputStream os = response.getOutputStream();
| |
| - | ImageIO.write(bufferedImage, "png", os);
| |
| - | os.close();
| |
| - | </source>
| |
| - |
| |
| - | Finally, we return the image through a byte stream. We set a content type to png image.
| |
| - | The <b>write()</b> 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.
| |
| - |
| |
| - | [[Категория:Java]]
| |
