zoukankan      html  css  js  c++  java
  • Google Kaptcha验证码的使用

    原文:http://www.kailing.pub/article/index/arcid/92.html

    Kaptcha是什么?

    kaptcha 是谷歌开源的非常实用的验证码生成工具,基于SimpleCaptcha的开源项目。使用Kaptcha 生成验证码十分简单并且参数可以进行自定义。只需添加jar包配置下就可以使用,通过配置,可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。

    怎么使用Kaptcha?

    1.首先要项目使用Kaptcha肯定要依赖kaptcha的jar,maven项目的话直接加入如下依赖,非maven项目就自己下载jar包吧

    <dependency>
    <groupId>com.github.axet</groupId>
    <artifactId>kaptcha</artifactId>
    <version>0.0.9</version>
    </dependency>

    官方下载链接:https://code.google.com/archive/p/kaptcha/downloads,当然你得翻墙哈

    2.配置kaptcha

    以项目使用spring为例,配置一个默认的Kaptcha的bean,如下

    	<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha" scope="singleton">
    	    <property name="config">
    	        <bean class="com.google.code.kaptcha.util.Config">
    	            <constructor-arg>
    	                <props>
    	                	<prop key="kaptcha.session.key">kaptcha.code</prop>  
    	                	<!-- 无边框 -->
    	                    <prop key="kaptcha.border">no</prop>
    	                    <prop key="kaptcha.textproducer.font.color">black</prop>
    	                    <!-- 渲染效果:水纹:WaterRipple;鱼眼:FishEyeGimpy;阴影:ShadowGimpy -->
    	                    <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.WaterRipple</prop>
    	                    <!-- 不要噪点 -->
    	                    <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
    	                    <prop key="kaptcha.image.width">90</prop>
    	                    <prop key="kaptcha.image.height">33</prop>
    	                    <prop key="kaptcha.textproducer.font.size">25</prop>
    	                    <prop key="kaptcha.textproducer.char.length">4</prop>
    	                    <prop key="kaptcha.textproducer.char.space">5</prop>
    	                    <!-- 和登录框背景颜色一致 -->
    	                    <prop key="kaptcha.background.clear.from">247,247,247</prop>
    	                    <prop key="kaptcha.background.clear.to">247,247,247</prop>
    	                </props>
    	            </constructor-arg>
    	        </bean>
    	    </property>
    	</bean>

    3.将生成的验证码保存进session中,并输出由验证码生成的图片流到页面

            @Autowired
    	private Producer captchaProducer;
    	@RequestMapping(value = "/kaptchaImage", method = RequestMethod.GET)
        public void kaptcha(HttpServletRequest req, HttpServletResponse rsp) {
    		ServletOutputStream out = null;
    		try {
    	        HttpSession session = req.getSession();
    	        rsp.setDateHeader("Expires", 0);
    	        rsp.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    	        rsp.addHeader("Cache-Control", "post-check=0, pre-check=0");
    	        rsp.setHeader("Pragma", "no-cache");
    	        rsp.setContentType("image/jpeg");
    	        String capText = captchaProducer.createText();
    	        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
    	        BufferedImage image = captchaProducer.createImage(capText);
    	        out = rsp.getOutputStream();
    	        ImageIO.write(image, "jpg", out);
    	        out.flush();
            }catch(IOException e)
    		{
    			throw new SystemException(e);
    		} finally {
                try {
    				out.close();
    			} catch (IOException e) {
    				throw new SystemException(e);
    			}
            }
        }

    4.校验用户输入的验证码和保存进session的是否一直,达到验证目的

    @RequestMapping(value = "/login", method = RequestMethod.POST, produces = "text/html; charset=utf-8")
    	public String userLogin(String accountName, String password, String captcha, Boolean rememberMe, HttpServletRequest request) {
    		 //从session中取出kaptcha生成的验证码text值
    	        String expected = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
    	        //获取用户页面输入的验证码
    	        if(!captcha.equalsIgnoreCase(expected))
    	        {
    	        	request.setAttribute("error", "验证码错误!");
    				return "/login";
    	        }else
    	        {
                        xxxx验证码后的后续逻辑
                     }
    }

     更详细的Kaptcha验证码配置?

    • kaptcha.border  是否有边框  默认为true  我们可以自己设置yes,no  
    • kaptcha.border.color   边框颜色   默认为Color.BLACK  
    • kaptcha.border.thickness  边框粗细度  默认为1  
    • kaptcha.producer.impl   验证码生成器  默认为DefaultKaptcha  
    • kaptcha.textproducer.impl   验证码文本生成器  默认为DefaultTextCreator  
    • kaptcha.textproducer.char.string   验证码文本字符内容范围  默认为abcde2345678gfynmnpwx  
    • kaptcha.textproducer.char.length   验证码文本字符长度  默认为5  
    • kaptcha.textproducer.font.names    验证码文本字体样式  默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)  
    • kaptcha.textproducer.font.size   验证码文本字符大小  默认为40  
    • kaptcha.textproducer.font.color  验证码文本字符颜色  默认为Color.BLACK  
    • kaptcha.textproducer.char.space  验证码文本字符间距  默认为2  
    • kaptcha.noise.impl    验证码噪点生成对象  默认为DefaultNoise  
    • kaptcha.noise.color   验证码噪点颜色   默认为Color.BLACK  
    • kaptcha.obscurificator.impl   验证码样式引擎  默认为WaterRipple  
    • kaptcha.word.impl   验证码文本字符渲染   默认为DefaultWordRenderer  
    • kaptcha.background.impl   验证码背景生成器   默认为DefaultBackground  
    • kaptcha.background.clear.from   验证码背景颜色渐进   默认为Color.LIGHT_GRAY  
    • kaptcha.background.clear.to   验证码背景颜色渐进   默认为Color.WHITE  
    • kaptcha.image.width   验证码图片宽度  默认为200  
    • kaptcha.image.height  验证码图片高度  默认为50

    效果图如下

  • 相关阅读:
    作业
    Day2
    Day1
    让Antd 的Modal 可以拖动
    JS日期处理——月末、季度末
    前端常见问题收录
    前端面试题收录
    使用ES6 Set类型 数组去重
    小程序开发:用Taro搭建框架
    JS 树形结构与数组结构相互转换、在树形结构中查找对象
  • 原文地址:https://www.cnblogs.com/shihaiming/p/6993687.html
Copyright © 2011-2022 走看看