可以参考下面这张图:

我们在一些网站注册的时候,经常需要填写以上图片的信息。

 

这种图片验证方式是我们最常见的形式,它可以有效的防范恶意攻击者采用恶意工具,调用“动态验证码短信获取”接口进行动态短信发送, 导致接入用户短信被刷,造成账号余额损失。同时这种动态发送方式会朝许多无关的手机用户,发送很多验证码短信,导致手机用户被骚扰,甚至引起用户投诉。这种恶意攻击究其原因是攻击者可以自动对接口进行大量调用。

 

如果网站在用户进行“动态验证码短信发送” 操作前,要求用户输入图片验证码,确认用户是真实有效后,服务器端再发送动态短信到用户手机上。这一种流程就可以有效的解决恶意攻击问题。

 

正确的加入图片验证码的方式是在短信验证码发送前,先让用户填写图片验证码,再发送短信验证码。

 

举一个正确的例子(下图)

说了这么多,具体是怎么实现的呢?

1、图片生成实体类:

复制代码
  1. package com.hexianwei.graphic;
  2.  
  3. import java.awt.Color;
  4. import java.awt.Font;
  5. import java.awt.Graphics2D;
  6. import java.awt.image.BufferedImage;
  7. import java.io.FileNotFoundException;
  8. import java.io.FileOutputStream;
  9. import java.io.IOException;
  10. import java.io.OutputStream;
  11. import java.util.Random;
  12.  
  13. import javax.imageio.ImageIO;
  14.  
  15.  
  16. public class ImageVerificationCode {
  17.  
  18. private int weight = 100; //验证码图片的长和宽
  19. private int height = 40;
  20. private String text; //用来保存验证码的文本内容
  21. private Random r = new Random(); //获取随机数对象
  22. //private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; //字体数组
  23. //字体数组
  24. private String[] fontNames = {"Georgia"};
  25. //验证码数组
  26. private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
  27.  
  28. /**
  29. * 获取随机的颜色
  30. *
  31. * @return
  32. */
  33. private Color randomColor() {
  34. int r = this.r.nextInt(225); //这里为什么是225,因为当r,g,b都为255时,即为白色,为了好辨认,需要颜色深一点。
  35. int g = this.r.nextInt(225);
  36. int b = this.r.nextInt(225);
  37. return new Color(r, g, b); //返回一个随机颜色
  38. }
  39.  
  40. /**
  41. * 获取随机字体
  42. *
  43. * @return
  44. */
  45. private Font randomFont() {
  46. int index = r.nextInt(fontNames.length); //获取随机的字体
  47. String fontName = fontNames[index];
  48. int style = r.nextInt(4); //随机获取字体的样式,0是无样式,1是加粗,2是斜体,3是加粗加斜体
  49. int size = r.nextInt(10) + 24; //随机获取字体的大小
  50. return new Font(fontName, style, size); //返回一个随机的字体
  51. }
  52.  
  53. /**
  54. * 获取随机字符
  55. *
  56. * @return
  57. */
  58. private char randomChar() {
  59. int index = r.nextInt(codes.length());
  60. return codes.charAt(index);
  61. }
  62.  
  63. /**
  64. * 画干扰线,验证码干扰线用来防止计算机解析图片
  65. *
  66. * @param image
  67. */
  68. private void drawLine(BufferedImage image) {
  69. int num = r.nextInt(10); //定义干扰线的数量
  70. Graphics2D g = (Graphics2D) image.getGraphics();
  71. for (int i = 0; i < num; i++) {
  72. int x1 = r.nextInt(weight);
  73. int y1 = r.nextInt(height);
  74. int x2 = r.nextInt(weight);
  75. int y2 = r.nextInt(height);
  76. g.setColor(randomColor());
  77. g.drawLine(x1, y1, x2, y2);
  78. }
  79. }
  80.  
  81. /**
  82. * 创建图片的方法
  83. *
  84. * @return
  85. */
  86. private BufferedImage createImage() {
  87. //创建图片缓冲区
  88. BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB);
  89. //获取画笔
  90. Graphics2D g = (Graphics2D) image.getGraphics();
  91. //设置背景色随机
  92. g.setColor(new Color(255, 255, r.nextInt(245) + 10));
  93. g.fillRect(0, 0, weight, height);
  94. //返回一个图片
  95. return image;
  96. }
  97.  
  98. /**
  99. * 获取验证码图片的方法
  100. *
  101. * @return
  102. */
  103. public BufferedImage getImage() {
  104. BufferedImage image = createImage();
  105. Graphics2D g = (Graphics2D) image.getGraphics(); //获取画笔
  106. StringBuilder sb = new StringBuilder();
  107. for (int i = 0; i < 4; i++) //画四个字符即可
  108. {
  109. String s = randomChar() + ""; //随机生成字符,因为只有画字符串的方法,没有画字符的方法,所以需要将字符变成字符串再画
  110. sb.append(s); //添加到StringBuilder里面
  111. float x = i * 1.0F * weight / 4; //定义字符的x坐标
  112. g.setFont(randomFont()); //设置字体,随机
  113. g.setColor(randomColor()); //设置颜色,随机
  114. g.drawString(s, x, height - 5);
  115. }
  116. this.text = sb.toString();
  117. drawLine(image);
  118. return image;
  119. }
  120.  
  121. /**
  122. * 获取验证码文本的方法
  123. *
  124. * @return
  125. */
  126. public String getText() {
  127. return text;
  128. }
  129.  
  130. public static void output(BufferedImage image, OutputStream out) throws IOException //将验证码图片写出的方法
  131. {
  132. ImageIO.write(image, "JPEG", out);
  133. }
  134. }
复制代码

2、在控制器中把图片响应给前端页面(ssm框架)

复制代码
  1. @RequestMapping("getVerifiCode")
  2. @ResponseBody
  3. public void getVerifiCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
  4. /*
  5. 1.生成验证码
  6. 2.把验证码上的文本存在session中
  7. 3.把验证码图片发送给客户端
  8. */
  9. ImageVerificationCode ivc = new ImageVerificationCode(); //用我们的验证码类,生成验证码类对象
  10. BufferedImage image = ivc.getImage(); //获取验证码
  11. request.getSession().setAttribute("text", ivc.getText()); //将验证码的文本存在session中
  12. ivc.output(image, response.getOutputStream());//将验证码图片响应给客户端
  13. }
复制代码

3、从session获得验证码字符(ssm框架)

复制代码
  1. @RequestMapping("Login_authentication")
  2. @ResponseBody
  3. public String Login_authentication(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
  4. request.setCharacterEncoding("utf-8");
  5. String session_vcode=(String) request.getSession().getAttribute("text"); //从session中获取真正的验证码
  6. return session_vcode;
  7. }
复制代码

4、前端请求图片

  1. <a href="javascript:getVerifiCode()">
  2. <img id="yzm_img" style="cursor:pointer;width: 100px;height: 36px;margin: 5px 0 0 5px;border-radius: 3px;" title="点击刷新验证码" src="Mcake/getVerifiCode"/>
  3. </a>
  1. function getVerifiCode() {
  2. $("#yzm_img").prop(\'src\',\'Mcake/getVerifiCode?a=\'+new Date().getTime());
  3. }

5、效果:

版权声明:本文为chinaifae原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/chinaifae/articles/10153700.html