导航

Kaptcha

Posted on 2017-10-17 09:08  耍流氓的兔兔  阅读(326)  评论(0编辑  收藏  举报

 

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

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

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