后台java 实现验证码生成

后台实现验证码生成

 

效果图如下:

1.适用需求

后台生成验证码,用于登陆验证。

 

2. 功能实现所需控件/文件:

无(普通标签)

 

3.功能点实现思路

1)前台思路:

(1)前台一个<input>用于输入验证码;一个<img>用于展示验证码。

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

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

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

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

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

 

前台部分代码:


/*验证码输入框*/

<input class="verifyInput"  name="verifyInput" placeholder="请输入验证码">   


/*验证码图片*/

<img class="verifyCode" onclick="changeCode()" src="getVerifyCode">

//src的getVerifyCode是后台访问地址;项目为SSM框架。


/*点击刷新验证码*/

function changeCode(){

         var src = " getVerifyCode?"+new Date().getTime(); //加时间戳,防止浏览器利用缓存

    $('.verifyCode').attr("src",src);                  //jQuery写法

}

 

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);

//单独的一个类方法,出于代码复用考虑,进行了封装。

//功能是生成验证码字符并加上噪点,干扰线,返回值为验证码字符                   

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) {

                            this.logger.error(e.getMessage());

                            e.printStackTrace();

                   }

         }
/*对图片进行处理的类和方法*/

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;

    }

}

 

4.功能实现心得:

验证码的功能实现思路很简单,从系统安全性和代码复用性这两点考虑,验证码必须后台生成,生成验证码的方法可以封装到静态工具类里。此外,后台用到许多Java自带的图片处理类值得学习。

——————————————————————————————————————————————

ps:转载分享任意,注明作者和原文链接即可 (●'◡'●)

当然,笔者能力有限,代码能够保证实现功能,但不能保证一定是性能最优的,如果有什么错误,不足,欢迎指正,一同进步!

  • 58
    点赞
  • 291
    收藏
    觉得还不错? 一键收藏
  • 31
    评论
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值