zoukankan      html  css  js  c++  java
  • Kaptcha

    Kaptcha:google自动生成验证码组件

      kaptcha的使用比较方便,只需添加jar包依赖之后简单地配置就可以使用了

      kaptcha所有配置都可以通过web.xml来完成,如果你的项目中使用了Spring MVC,那么则有另外的一种方式来实现

            <!-- google验证码 -->
            <dependency>
                <groupId>com.github.axet</groupId>
                <artifactId>kaptcha</artifactId>
                <version>0.0.9</version>
            </dependency>

    springmvc项目中使用:

      1 在spring-mvc.xml中进行配置:

        kaptcha的参数介绍:http://blog.csdn.net/qq_21120027/article/details/52129066

        <!-- 配置google验证码 -->
        <bean name="producer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
            <property name="config">
                <bean class="com.google.code.kaptcha.util.Config">
                    <constructor-arg>
                        <props>
                            <prop key="kaptcha.border">no</prop>
                            <prop key="kaptcha.textproducer.font.color">black</prop>
                            <prop key="kaptcha.textproducer.char.space">5</prop>
                            <prop key="kaptcha.textproducer.char.length">5</prop>
                        </props>
                    </constructor-arg>
                </bean>
            </property>
        </bean>

      2 controller中生成验证码:

        @RequestMapping("/kaptcha.jpg")
        public void kaptcha(HttpServletResponse response) throws IOException{
            
            response.setHeader("Cache-Control", "no-store,no-cache");
            response.setContentType("image/jpeg");
            
            //生成文字
            String text = producer.createText();
            //生成图片
            BufferedImage image = producer.createImage(text);
            
            //保存到shiro session中
            SecurityUtils.getSubject().getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, text);
            
            ServletOutputStream out = response.getOutputStream();
            ImageIO.write(image, "jpg", out);
            out.flush();
            
        }

      3 login页面:

                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="验证码" v-model="user.kaptcha">
                    </div>
                    <div class="form-group" text-left>
                       <img id="kaptcha" :src="kaptcha.jpg" alt="验证码" @click="refreshCode" style="cusor:pointer;"/>
                       <a href="#" @click.prevent="refreshCode">点击刷新</a>
                    </div>

      4 点击刷新验证码:

                refreshCode: function(){
                    
                    $("#kaptcha").attr('src', vm.kaptcha);
                }

    使用验证码需要注意的地方:

      无论哪一项验证错误,都必须刷新验证码,否则验证码会过时或者被暴力破解

  • 相关阅读:
    javascript封装自定义滚动条方法,可自定义四个边框滚动条
    前端页面优化:javascript图片延迟加载
    VPS用LNMP安装WordPress
    结缘PDO
    Laravel踩坑笔记——illuminate/html被抛弃
    Android定时器实现方法[转]
    关于安装Android Studio的一些问题的解决方法
    nginx 多站点配置方法
    PHP5.6.x的新鲜事
    ThinkPHP学习手记——环境搭建
  • 原文地址:https://www.cnblogs.com/roxy/p/7679934.html
Copyright © 2011-2022 走看看