JavaWeb使用验证码实现简单登录

需求

在JavaWeb网站中，为登录页面增加验证码功能，防止恶意程序暴力破解密码，提高网站的安全性。

技术栈

前端：HTML、JavaScript
后端：Java、Servlet、JSP

实现步骤

1. 引入验证码jar包

可以使用第三方的验证码生成工具库，这里以Google的kaptcha为例。

在pom.xml文件中加入以下依赖：

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2. 配置web.xml

在web.xml中配置kaptcha过滤器，用于生成验证码图片：

<filter>
    <filter-name>KaptchaFilter</filter-name>
    <filter-class>com.google.code.kaptcha.servlet.KaptchaServlet</filter-class>
</filter>
<filter-mapping>
    <filter-name>KaptchaFilter</filter-name>
    <url-pattern>/kaptcha.jpg</url-pattern>
</filter-mapping>

3. 编写前端页面

在登录页面中，增加验证码输入框和显示验证码图片的区域：

<form action="login" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"/>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"/>
    </div>
    <div>
        <label for="verifyCode">验证码：</label>
        <input type="text" name="verifyCode" id="verifyCode" maxlength="4" style="width: 60px;"/>
        <img src="kaptcha.jpg" onclick="this.src='kaptcha.jpg?'+Math.floor(Math.random()*100)" style="cursor: pointer;" title="点击刷新验证码"/>
    </div>
    <button type="submit">登录</button>
</form>

以上代码中，我们使用了一个标签来显示验证码图片，同时在这个标签上绑定了JavaScript脚本，用于刷新验证码图片。

4. 编写Servlet处理验证码和登录

首先，我们需要获取用户输入的验证码值：

String verifyCode = request.getParameter("verifyCode");

然后，使用kaptcha工具库中的代码进行验证码的验证：

String kaptchaExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
if (!kaptchaExpected.equals(verifyCode)) {
    // 验证码不正确，返回错误信息
}

最后，校验用户名和密码是否正确，完成登录操作。

5. 完整代码示例

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取用户输入的验证码
        String verifyCode = request.getParameter("verifyCode");
        // 获取正确的验证码值
        String kaptchaExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        // 判断验证码是否正确
        if (!kaptchaExpected.equals(verifyCode)) {
            // 验证码不正确，返回错误信息
            response.getWriter().write("验证码不正确");
            return;
        }
        // 验证码正确，校验用户名和密码是否正确
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        if ("admin".equals(username) && "123456".equals(password)) {
            // 用户名和密码都正确，登录成功
            response.getWriter().write("登录成功");
        } else {
            // 用户名或密码错误，返回错误信息
            response.getWriter().write("用户名或密码错误");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

<form action="login" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"/>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"/>
    </div>
    <div>
        <label for="verifyCode">验证码：</label>
        <input type="text" name="verifyCode" id="verifyCode" maxlength="4" style="width: 60px;"/>
        <img src="kaptcha.jpg" onclick="this.src='kaptcha.jpg?'+Math.floor(Math.random()*100)" style="cursor: pointer;" title="点击刷新验证码"/>
    </div>
    <button type="submit">登录</button>
</form>