单一功能学习----简单的验证码

一、验证码的作用

　　1、防止大量重复请求。一般在登录的时候需要验证码，验证码的作用就是拖延时间，让每次登录的操作时间间隔变长，这样可以防止有人暴力破解密码登录。

 

二、设计思路

　　1、最简单的验证码，就是一串数字了。小时候看到的就是这个样子的，4个数字。

　　2、这串数字应该是随机的。

　　3、这串数字是可以更换的（以前看到的换一张按钮）。

　　4、要有一个输入框，输入验证码。

　　5、每登录一次，若失败应该更换验证码。

　　6、稍微高级一点，验证码可以变成一张图片，防止恶意软件直接从前端代码获取验证码值。

　　7、更高级的验证码，可以改变验证的内容：比如验证中文，验证计算结果等；可以改变验证的方式，比如12306看名称选图，比如拖拽图片验证；可以改变验证码的获取方式，比如把验证码通过短信或电话发到用户的手机，通过邮件发到用户的邮箱等。（难度略大，在这里忽略掉这一条）

 

三、代码实现

　　1、最简单的验证码

　　　　①前端

    <div class="yanzhengma">
        <span>验证码：</span>
        <input type="text" name="yanzhengma" placeholder="请输入验证码">
        <span id="yanzhengmaInfo">1234</span>
        <span onclick="changeYanzhengmaInfo();">换一张</span>
    </div>

 

// 改变验证码的值
function changeYanzhengmaInfo() {
    var url = contextPath + '/changeYanzhengmaInfo.html?' + new Date().getTime();
    $.post(url,function(data) {
        $("#yanzhengmaInfo").text(data);
    });
}

 

　　　　②后端

    // 生成验证码
    @Action("/changeYanzhengmaInfo")
    public void changeYanzhengmaInfo() {
        // 生成随机数，四位数，不足四位数（小于1000）的，给设一个值，大于9999的给设一个值
        Random random = new Random();
        int r = random.nextInt(10000);
        if (r < 1000) {
            r = 2018;
        } else if (r > 9999) {
            r = 9999;
        }
        final String yanzhengma = random.nextInt(10000) + "";
        // 把值保存到session
        final HttpSession session = ServletActionContext.getRequest().getSession();
        session.setAttribute("captcha", yanzhengma);
        // 把值返回到前端
        this.sendResponseMsg(yanzhengma);
    }

    /**
     * 验证验证码.
     *
     * @throws UnsupportedEncodingException
     * @author 
     */
    @Action("/checkCaptcha")
    public void checkCaptcha() throws UnsupportedEncodingException {
        this.request.setCharacterEncoding(ENCODE_UTF_8);
        this.response.setContentType(CONTENT_TYPE);
        final String yanzhengma = this.request.getParameter("yanzhengma");

        String captcha = this.session.get("captcha");
        if (captcha == null) {
            sendFailMsg("", "验证码不存在,请刷新！");
            return;
        }
        if (captcha.equals(yanzhengma)) {
            this.sendSuccessMsg();
        } else {
            this.sendFailMsg(null, "验证码错误！");
        }
    }

 

 

　　2、图片形式的验证码

　　　　①前端

　　　　　　与上边的不同，这里获取的验证码是一张图片，所以这里要从后台获取到的数据应该是验证码图片的链接。通过换链接的方式来达到换验证码的效果。

    <li>
        <label class="u_label">验证码：</label>
        <input id="captcha" class="text-input captcha" name="captcha" type="text" placeholder="请输入验证码">
        <a href="javascript:;" style="margin-left:20px;"><img id="captcha-img" width="80" height="36" src="${contextPath}/captchaImage.html" /></a>
        <span><a href="javascript:changeCaptchaImg();" style="height: 40px; line-height: 40px; margin-left: 10px;">换一张</a></span>
    </li>
    <span id="captchadwrong" style="margin-left:84px;color:red;display: none">请输入正确的验证码</span>

 

// 改获取图片的链接
function changeCaptchaImg() {
    var imgUrl = contextPath + '/captchaImage.html?' + new Date().getTime();
    $('#captcha-img').attr('src', imgUrl);
}

// 验证验证码
function checkCaptcha() {
    var captchaValue = $("input[name='captcha']").val();
    var captcha = false;
    var captchadwrong = $('#captchadwrong');
    $.ajax({
        url: contextPath + '/checkCaptcha.html',
        type: 'post',
        dataType: 'json',
        async: false,
        data: { captcha: captchaValue },
        success: function(text) {
            captcha = text.success;
        }
    });
    if (captcha == false) { //失败
        captchadwrong.css('display', "inline-block");
        captchadwrong.text("请输入正确的验证码");
        return false;
    } else { //成功
        captchadwrong.css('display', "none");
        return true;
    }
}

 

　　　　②后端

　　　　　　首先，需要引入一个jar包：simplecaptcha-1.2.1.jar

    @Action("/captchaImage")
    public void createCaptchaImage() {
        // 自定义设置字体颜色和大小 最简单的效果 多种字体随机显示
        final List<java.awt.Color> textColors = Arrays.asList(this.getRandColor(50, 200), this.getRandColor(50, 200));
        final List<Font> fontList = Lists.newArrayList();
        fontList.add(new Font("Viner Hand ITC", Font.TYPE1_FONT, 52));// 可以设置斜体之类的
         fontList.add(new Font("Kristen ITC", Font.ITALIC, 45));
        fontList.add(new Font("Bradley Hand ITC", Font.HANGING_BASELINE, 52));
        fontList.add(new Font("Comic Sans ms", Font.PLAIN, 45));
        // 图片的背景（渐变，从 white 色到 white 色）
        final GradiatedBackgroundProducer gbp = new GradiatedBackgroundProducer(Color.white, Color.white);
        // 生成验证码对象：包括值Answer，时间Timestamp，图片Image，图片里包括颜色，宽高等信息
        final Captcha captcha = new Captcha.Builder(CAPTCHA_WIDTH, CAPTCHA_HEIGHT).addNoise().addNoise()
                // .gimp(new ShearGimpyRenderer
                // (this.getRandColor(50, 200)))
                .addText(new DefaultTextProducer(RANDOM_NUMBER, MY_CHARS),
                        new DefaultWordRenderer(textColors, fontList))
                .addBackground(gbp).build();
        // // 在session中存储生成的验证码
        final HttpSession session = ServletActionContext.getRequest().getSession();
        OutputStream out = null;
        try {
            out = this.response.getOutputStream();
            this.response.reset();
            this.response.setContentType("image/jpeg");
            this.response.setHeader("Pragma", "No-cache");
            this.response.setHeader("Cache-Control", "no-cache");
            this.response.setDateHeader("Expires", 0);
            ImageIO.write(captcha.getImage(), "JPG", out);
            session.setAttribute(CAPTCHA, captcha);
            out.flush();
            out.close();
            this.response.flushBuffer();
        } catch (final IOException e) {
            CaptchaImageAction.LOGGER.error("发送验证码IO异常", e);
        } finally {
            if (out != null) {
                try {
                    out.close();
                } catch (final IOException e) {
                    CaptchaImageAction.LOGGER.error("发送验证码IO异常", e);
                }
            }
        }
    }


    /*
     * 给定范围获得随机颜色
     */
    private Color getRandColor(final int fc, final int bc) {
        int tmpFc = fc;
        int tmpBc = bc;
        final Random random = new Random();
        if (tmpFc > MAX_RANDOM_NUMBER) {
            tmpFc = MAX_RANDOM_NUMBER;
        }
        if (tmpBc > MAX_RANDOM_NUMBER) {
            tmpBc = MAX_RANDOM_NUMBER;
        }
        final int r = tmpFc + random.nextInt(tmpBc - tmpFc);
        final int g = tmpFc + random.nextInt(tmpBc - tmpFc);
        final int b = tmpFc + random.nextInt(tmpBc - tmpFc);
        return new Color(r, g, b);
    }


    /**
     * 验证验证码.
     *
     * @throws UnsupportedEncodingException
     * @author
     */
    @Action("/checkCaptcha")
    public void checkCaptcha() throws UnsupportedEncodingException {
        this.request.setCharacterEncoding(ENCODE_UTF_8);
        this.response.setContentType(CONTENT_TYPE);
        final String captcha = this.request.getParameter(CaptchaImageAction.CAPTCHA);

        Object object = this.session.get(CaptchaImageAction.CAPTCHA);
        if (object == null) {
            sendFailMsg("", "验证码不存在,请刷新！");
            return;
        }
        final Captcha captchaInSession = (Captcha) object;
        final String answer = captchaInSession.getAnswer();
        // 忽略大小写比较
        if (answer.equalsIgnoreCase(captcha)) {
            this.sendSuccessMsg();
        } else {
            this.sendFailMsg(null, "验证码错误！");
        }
    }

 

　　　　③效果图