效果图如下:
1.适用需求
后台生成验证码,用于登陆验证。
2. 功能实现所需控件/文件:
无(普通标签)
3.功能点实现思路
1)前台思路:
(1)前台一个<input>用于输入验证码;一个<img>用于展示验证码。
(2)验证码生成以及展示,点击刷新功能,可以为<img>绑定click事件。
(3)click事件里面写ajax请求,通过后台生成处理好的带噪点的验证码图片。
注意:后台直接返回图片,不是验证码的字符!若返回字符,则验证码就失去了意义(前台很容易就可以获取验证码字符,进行多次恶意访问了)(这点考虑了系统安全性)
(4)关于返回的图片如何在<img>标签内展示
直接利用img的src属性,属性值为后台生成验证码的方法请求路径即可。当点击验证码的时候,再动态设置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自带的图片处理类值得学习。
到此这篇关于java后台验证码生成的实现方法的文章就介绍到这了,更多相关java 验证码生成内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网!
- 本文固定链接: https://zxbcw.cn/post/212256/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)