ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Java Web 项目学习(二) 生成验证码

2021-05-31 11:33:29  阅读:196  来源: 互联网

标签:Web Java kaptcha 验证码 path setProperty 浏览器 properties


Kaptcha导入jar包

  • 编写Kaptcha配置类,在Config包下(配置图片长宽、字的个数、范围、颜色、干扰的点、线)
    @Configuration
    public class KaptchaConfig {
    
        @Bean
        public Producer kaptchaProducer (){ //实例化接口
    
            Properties properties = new Properties();
            properties.setProperty("kaptcha.image.width","100");
            properties.setProperty("kaptcha.image.height","40");
            properties.setProperty("kaptcha.textproducer.font.size","32");
            properties.setProperty("kaptcha.textproducer.font.color","0,0,0");
            properties.setProperty("kaptcha.textproducer.char.string","0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
            properties.setProperty("kaptcha.textproducer.char.length","4");
            //properties.setProperty("kaptcha.noise.impl","4");//设置干扰的噪声类
            properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");
    
    
            DefaultKaptcha kaptcha = new DefaultKaptcha();
            Config config = new Config(properties);
            //Config 需要传入Properties对象<k,V >类似Map.所有的对象都是config去配的, 但是config依赖Properties对象
            kaptcha.setConfig(config);
            return kaptcha;
    
        }
    }
  • 生成随机字符串、生成图片
    Ctrl+Alt+T  Surrond with    (try-catch)
        private static final Logger logger =         LoggerFactory.getLogger(LoginController.class);
        @Autowired
        private UserService userService;
        @Autowired
        private Producer kaptchaProducer;
      /**
         * 生成验证码的方法
         * 返回值是void 向浏览器输出的是一个图片,不是字符串也不是一个网页。
         * 需要自己手动的向浏览器输出。需要用Response。
         * 生成验证码后,服务端需要记住,对再次登录时,验证 验证码是否正确。
         * 不能存浏览器端,容易被盗取(敏感信息) 跨请求,Cookie或者Session————Session
         */
        @RequestMapping(path="/kaptcha", method = RequestMethod.GET)
        public void getKaptcha(HttpServletResponse response, HttpSession session){
            //生成验证码
            String text = kaptchaProducer.createText();
            BufferedImage image = kaptchaProducer.createImage(text);
            //将验证码存入Session ,便于以后使用
            session.setAttribute("kaptcha",text);
            //将图片输出给浏览器
            response.setContentType("image/png"); //声明给浏览器返回的是什么格式的数据
            //response获取输出流
            try {
                //response.getWriter();//获取字符流
                OutputStream stream =response.getOutputStream();//获取字节流,图片,比较好一点
                ImageIO.write(image,"png",stream);
                //可不用关闭,因为整个流都是由Response去维护的,会自动关
            } catch (IOException e) {
                logger.error("响应验证码失败:"+e.getMessage());
            }
        }

    这访问http://localhost:8080/community/kaptcha,就可以看到生成的图片。刷新会更新。

     

     

     

  • 让其在页面显示,修改HTML文件
    • 修改对应的src
    • 刷新页面通过js实现的。指定id;定义javascript:refresh_kaptcha()函数,在尾部写。
      <img th:src="@{/kaptcha}" id= "kaptcha" style="width:100px;height:40px;" class="mr-2"/>
      <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>

       

    • javascript:refresh_kaptcha()函数,(非原生JS)
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
      <script>
              function  refresh_kaptcha(){
                  var path= CONTEXT_PATH + "kaptcha?p="+Math.random();
                  ${"#kaptcha"}.attr("src",path);
              }
      </script>
      • 直接采用  var path = "/communiy/kaptcha"  不利于以后修改,因此在global.js中的定义  var CONTEXT_PATH = "/community"  因为global在任何页面都引用了,因此可以直接用。
      •  "kaptcha?p="+Math.random();  欺骗浏览器,认为变了。原始img 的src=/community/kaptcha ,更改后的src 同样不变的话,浏览器可能认为相同资源不进行刷新。因此定义随机参数不使用。只为了让浏览器刷新。
      •  ${"#kaptcha"}.attr("src",path);  #是Id选择器,修改属性attr(属性名,值)

标签:Web,Java,kaptcha,验证码,path,setProperty,浏览器,properties
来源: https://www.cnblogs.com/codinghard/p/14830648.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有