后端生成验证码

最新推荐文章于 2024-02-16 22:41:19 发布

@零度

最新推荐文章于 2024-02-16 22:41:19 发布

阅读量2.1k

点赞数 6

分类专栏：验证码文章标签： java

原文链接：https://blog.csdn.net/piaoyinluo2316/article/details/83754145

版权

验证码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.功能点实现思路

1）前台思路：

（1）前台一个用于输入验证码；一个用于展示验证码。

（2）验证码生成以及展示，点击刷新功能，可以为绑定click事件。

（3）click事件里面写ajax请求，通过后台生成处理好的带噪点的验证码图片。

注意：后台直接返回图片，不是验证码的字符!若返回字符，则验证码就失去了意义（前台很容易就可以获取验证码字符，进行多次恶意访问了）（这点考虑了系统安全性）

（4）关于返回的图片如何在标签内展示

直接利用img的src属性，属性值为后台生成验证码的方法请求路径即可。当点击验证码的时候，再动态设置src属性即可（原访问地址+随机时间戳，防止同一路径浏览器不另作访问的问题）

前端代码如下：

<body>

<div>

    <label>工号:</label>
    <input type="text" id="usercode"  /> </br>
    <label>验证码:</label>
    <input type="text" id="verifycode" />

    <img id="img-code" onclick="changeCode()" src="">
</br>
    <button type="button" id="submit">提交</button>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

    $(document.body).ready(function () {
        //首次获取验证码
        changeCode();
    });

    /*点击刷新验证码*/

    function changeCode() {

        var src = "login/getVerifyCode?" + Math.random(); //加时间戳，防止浏览器利用缓存

        $('#img-code').attr("src", src);                  //jQuery写法
    }

    $("#submit").click(function () {

        $.ajax({
            url:'login/goLogin',
            type:'GET',
            data:{
                userCode: $('#usercode').val().trim(),
                code: $('#verifycode').val().trim()
            }
        })
    });
</script>

2）后台思路：

后台思路很简单，利用BufferedImage类创建一张图片，再用Graphics2D对图片进行绘制(生成随机字符，添加噪点，干扰线)即可。注意生成的验证码字符串要放到session中，用于接下来登陆的验证码验证(当然也是后台)。

接口用于生成验证码返回给前端：

/* 获取验证码图片*/
    @RequestMapping("/getVerifyCode")
    public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
        try {
            int width = 200;
            int height = 69;

            BufferedImage verifyImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

            //生成对应宽高的初始图片
            String randomText = VerifyCode.drawRandomText(width, height, verifyImg);

            //单独的一个类方法，出于代码复用考虑，进行了封装。
            //功能是生成验证码字符并加上噪点，干扰线，返回值为验证码字符

            System.out.println(randomText);
            request.getSession().removeAttribute("verifyCode");
            request.getSession().setAttribute("verifyCode", randomText);
            response.setContentType("image/png");//必须设置响应内容类型为图片，否则前台不识别
            OutputStream os = response.getOutputStream(); //获取文件输出流
            ImageIO.write(verifyImg, "png", os);//输出图片流

            os.flush();
            os.close();//关闭流

        } catch (IOException e) {
            e.printStackTrace();
        }
    }

封装工具类：

package com.example.verifycode.util;

import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

public class VerifyCode {

    public static String drawRandomText(int width, int height, BufferedImage verifyImg) {

        Graphics2D graphics = (Graphics2D) verifyImg.getGraphics();

        graphics.setColor(Color.WHITE);//设置画笔颜色-验证码背景色

        graphics.fillRect(0, 0, width, height);//填充背景

        graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));

        //数字和字母的组合

        String baseNumLetter ="123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
        StringBuffer sBuffer = new StringBuffer();
        int x = 10;  //旋转原点的 x 坐标
        String ch = "";
        Random random = new Random();

        for (int i = 0; i < 4; i++) {

            graphics.setColor(getRandomColor());

            //设置字体旋转角度
            int degree = random.nextInt() % 30;  //角度小于30度
            int dot = random.nextInt(baseNumLetter.length());
            ch = baseNumLetter.charAt(dot) + "";
            sBuffer.append(ch);

            //正向旋转
            graphics.rotate(degree * Math.PI / 180, x, 45);
            graphics.drawString(ch, x, 45);
            //反向旋转
            graphics.rotate(-degree * Math.PI / 180, x, 45);
            x += 48;

        }

        //画干扰线
        for (int i = 0; i < 6; i++) {
            // 设置随机颜色
            graphics.setColor(getRandomColor());

            // 随机画线
            graphics.drawLine(random.nextInt(width), random.nextInt(height),
                    random.nextInt(width), random.nextInt(height));

        }

        //添加噪点

        for (int i = 0; i < 30; i++) {
            int x1 = random.nextInt(width);

            int y1 = random.nextInt(height);

            graphics.setColor(getRandomColor());

            graphics.fillRect(x1, y1, 2, 2);
        }
        return sBuffer.toString();

    }

    /**
     * 随机取色
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        Color color = new Color(ran.nextInt(256),
                ran.nextInt(256), ran.nextInt(256));

        return color;

    }
}

```前台思路：

（1）前台一个<input>用于输入验证码；一个<img>用于展示验证码。

（2）验证码生成以及展示，点击刷新功能，可以为<img>绑定click事件。

（3）click事件里面写ajax请求，通过后台生成处理好的带噪点的验证码图片。

注意：后台直接返回图片，不是验证码的字符!若返回字符，则验证码就失去了意义（前台很容易就可以获取验证码字符，进行多次恶意访问了）（这点考虑了系统安全性）

（4）关于返回的图片如何在<img>标签内展示

直接利用img的src属性，属性值为后台生成验证码的方法请求路径即可。当点击验证码的时候，再动态设置src属性即可（原访问地址+随机数，防止同一路径浏览器不另作访问的问题）

@零度

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
后端生成验证码

1.功能点实现思路1）前台思路：（1）前台一个用于输入验证码；一个用于展示验证码。（2）验证码生成以及展示，点击刷新功能，可以为绑定click事件。（3）click事件里面写ajax请求，通过后台生成处理好的带噪点的验证码图片。注意：后台直接返回图片，不是验证码的字符!若返回字符，则验证码就失去了意义（前台很容易就可以获取验证码字符，进行多次恶意访问了）（这点考虑了系统安全性）（4）关于返回的图片如何在标签内展示直接利用img的src属性，属性值为后台生成验证码的方法请求路径即可。当点击验证码
复制链接

扫一扫