jsp实现简单图片验证码功能

# JSP实现简单图片验证码功能攻略

为了保证用户输入的真实性和安全性，很多网站都会使用图片验证码来防止恶意程序和自动化工具对用户进行攻击。本攻略将为您介绍如何使用jsp实现简单的图片验证码功能。

前置条件：

本攻略假设您已经掌握了Java语言的基础，具备jsp编写基础。

攻略步骤

1. 在JSP页面上写出验证码的HTML代码

该代码可以放在你前台的注册页面或登录页面。我们先来简单地写一个前台验证码框：

<img src="getVerifyCode.jsp" onclick="javascript:this.src='getVerifyCode.jsp?time='+(new Date()).getTime()"/>
<input name="verifyCode" size="18" class="input_bye" type="text">

这里的 getVerifyCode.jsp 文件将在后面被创建，它是生成验证码的主要代码所在。

2. 生成验证码图片

我们需要在getVerifyCode.jsp中编写代码生成验证码图片。在生成验证码图片之前，我们需要了解以下硬性条件：

• 验证码应该使用随机字符，避免语义上的识别。
• 为了避免实现过于简单，应该使用一些干扰线条和噪点来使图像更像真实的图片。
• 验证码应该可以被识别并验证。

前两点可以在生成图片的时候实现，而后一点可以在验证用户输入的时候实现。
下面是 getVerifyCode.jsp 的实现代码：

<%@ page contentType="image/jpeg"%>
<%
String verifyCode = "";

// 生成5位随机数作为验证码
for (int i = 0; i < 5; i++) {
    int rand = (int) (Math.random() * 10);
    verifyCode += rand;
}

// 将验证码保存在会话中
session.setAttribute("verifyCode", verifyCode);

// 生成一个210px * 80px的空白图片对象
BufferedImage image = new BufferedImage(210, 80, BufferedImage.TYPE_INT_RGB);

// 得到该图片的绘制环境，用来接下来画图片
Graphics2D g = (Graphics2D) image.getGraphics();

// 设置图片的背景颜色和字体颜色
g.setColor(Color.WHITE);
g.fillRect(0, 0, 210, 80);
g.setColor(Color.BLACK);

// 设置字体
Font font = new Font("Arial", Font.BOLD, 36);
g.setFont(font);

// 在图片上随机画出6条干扰线条
for (int i = 0; i < 6; i++) {
    int startX = (int) (Math.random() * 210);
    int startY = (int) (Math.random() * 80);
    int endX = (int) (Math.random() * 210);
    int endY = (int) (Math.random() * 80);
    g.drawLine(startX, startY, endX, endY);
}

// 在图片上随机画出100个噪点
for (int i = 0; i < 100; i++) {
    int x = (int) (Math.random() * 210);
    int y = (int) (Math.random() * 80);
    g.drawLine(x, y, x, y);
}

// 在图片上绘制验证码
g.drawString(verifyCode, 40, 50);

// 将图片以JPEG格式输出
ImageIO.write(image, "JPEG", response.getOutputStream());
%>

3. 验证用户输入的验证码

用户在输入验证码之后要验证输入是否正确，也就是验证用户输入的验证码是否与生成验证码时保存到session中的内容一致。编写验证代码，如下所示：

<%
String verifyCode = (String) session.getAttribute("verifyCode");
String userInputVerifyCode = request.getParameter("verifyCode");

if (verifyCode != null && userInputVerifyCode != null
        && verifyCode.equals(userInputVerifyCode.toUpperCase())) {
    out.write("验证码输入正确！");
} else {
    out.write("验证码输入错误，请重新输入！");
}
%>

这部分代码应该放在验证码输入框的下方，可以通过Ajax方式提交验证，或是直接提交表单进行处理。

示例说明

以下是一个具体的示例，在JSP页面上加载验证码，并通过Ajax方式检查用户输入的验证码是否正确。

验证码HTML代码：

<img id="verifyCodeImg" src="getVerifyCode.jsp?time=0" onclick="javascript:changeVerifyCode();"/>
<input name="verifyCode" id="verifyCodeInput" size="18" class="form-control" type="text" placeholder="验证码">
<button onclick="checkVerifyCode()">验证</button>

Ajax验证代码：

function checkVerifyCode() {
    var inputVerifyCode = document.getElementById('verifyCodeInput').value;
    $.get("verifyCode.jsp", {verifyCode: inputVerifyCode}, function (data) {
        alert(data);
    });
}

验证码变更代码：

function changeVerifyCode() {
    var time = new Date().getTime();
    var verifyCodeImg = document.getElementById('verifyCodeImg');
    verifyCodeImg.src = "getVerifyCode.jsp?time=" + time;
}

总结

JSP实现简单图片验证码的过程分为生成验证码和验证用户输入两步，本文对这两步进行了详细的讲解，并提供了示例代码。当然，验证码还有很多更高级的实现方式和更复杂的应用场景，这里只是提供了一个简单的示例供参考。