想做一个登陆页面,但想要更加的贴近于真实的场景就得加上验证码。加上验证码的好处是可以有效防止恶意登录注册,验证码每次都不同,这就可以排除,用软件自动申请用户或者自动登陆,有效防止这种问题。

这里我们的验证码使用了simplecaptcha这个开源的组件

jar包下载

基本使用

simplecaptcha提供了四种形式的验证码。

  1. StickyCaptchaServlet

  2. SimpleCaptchaServlet

  3. ChineseCaptchaServlet:这个验证码还没测试 ^_^

  4. `AudioCaptchaServlet:可以为视障用户提供音频验证码

这里我用的是SimpleCaptchaServletStickyCaptchaServlet在页面刷新的时候,他不会刷新验证码,而且我加的js(点击验证码刷新也对SimpleCaptchaServlet不生效)

配置Servlet

根据上面提到的,根据自己的需要的验证码来配置相应的Servlet。

我们这里以SimpleCaptchaServlet为例:

<servlet>
    <servlet-name>SimpleCaptchaServlet</servlet-name>
    <servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>SimpleCaptchaServlet</servlet-name>
    <url-pattern>/simpleImg</url-pattern>
</servlet-mapping>
// 在你的html页面引入img标签,src地址是你Servlet中配的地址
<img src="simpleImg" title="看不清,换一张" id="securityCode"/>
// 这里用的jquery
$("#securityCode").click(
        function () {
          // 刷新验证码,加随机数是为了防止缓存
          $(this).attr('src', 'simpleImg?' + Math.floor(Math.random() * 100))
        })
// JavaScript代码
var sc = document.getElementById("securityCode");
sc.onclick = function () {
    sc.setAttribute("src","simpleImg?" + Math.floor(Math.random() * 100))
}
  • 这里给src属性设置属性值的时候,加上Math.floor(Math.random() * 100是为了防止缓存,导致刷新不起作用。
  • js和jquery只需要有一个就行,当然前提是你得懂点前端的基础。
package com.securityCode;
import com.google.gson.Gson;
import nl.captcha.Captcha;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;

public class CheckSecurityCode extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /**
         * 处理验证码
         */
        HttpSession session = req.getSession();
        Captcha captcha = (Captcha) session.getAttribute(Captcha.NAME);
        String answer = req.getParameter("answer");
        resp.setContentType("text/html;charset=utf-8");
        if (captcha.isCorrect(answer)) {
            Systom.out.println("验证码正确");
        }else {
            Systom.out.println("验证码错误");
        }
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

演示

最后这里贴出我的效果图。

这里的前端页面来自Etui۹(・༥・´)و ̑̑

当然simplecaptcha的功能还不止这么简单。除此之外它还支持自定义验证码,详细的内容请移步simplecaptcha官网