patchca整合Spring MVC生成漂亮的验证码

patchca整合Spring MVC生成漂亮的验证码——–使用patchca生成验证码

先看下生成的效果

---

废话不多说直接上代码

自己到网上下载需要用的jar patchca-0.5.0.jar

Patchca是Piotr Piastucki写的一个java验证码，打包成jar文件发布，patchca简单但功能强大。

package com.cpic.health.ecs.base.controller;

import java.awt.Color;
import java.awt.image.BufferedImage;  
import java.io.PrintWriter;
import java.util.Random;

import javax.imageio.ImageIO;  
import javax.servlet.ServletOutputStream;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import javax.servlet.http.HttpSession;   

import org.patchca.color.ColorFactory;
import org.patchca.filter.predefined.CurvesRippleFilterFactory;
import org.patchca.filter.predefined.DiffuseRippleFilterFactory;
import org.patchca.filter.predefined.DoubleRippleFilterFactory;
import org.patchca.filter.predefined.MarbleRippleFilterFactory;
import org.patchca.filter.predefined.WobbleRippleFilterFactory;
import org.patchca.service.ConfigurableCaptchaService;
import org.patchca.utils.encoder.EncoderHelper;
import org.patchca.word.RandomWordFactory;
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.servlet.ModelAndView;  

import com.google.code.kaptcha.Constants;  
import com.google.code.kaptcha.Producer;  

/** 
* @ClassName: CaptchaController 
* @Description: 使用谷歌提供的验证码组件  kaptcha和从网上找的验证码组件  patchca来生成验证码
* @author singer
* @date 2016年7月22日 下午4:51:13 
*  
*/
@Controller  
public class CaptchaController {  


    private static ConfigurableCaptchaService cs = new ConfigurableCaptchaService();

    private static Random random = new Random();


    static{

        cs.setColorFactory(new ColorFactory() {

            public Color getColor(int x) {

                int [] c={25, 60, 170};
                int i=random.nextInt(c.length);
                for(int fi = 0;fi < c.length; fi++)
                {

                    if(fi==i)
                    {
                        c[fi]=random.nextInt(71);
                    }else
                    {
                        c[fi]=random.nextInt(256);
                    }
                }
                return new Color(c[0],c[1],c[2]);
            }
        });

        RandomWordFactory wf=new RandomWordFactory();
        wf.setCharacters("23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKMNPQRSTUVWXYZ");
        wf.setMaxLength(4);
        wf.setMinLength(4);
        cs.setWordFactory(wf);
    }

    protected void setResponseHeaders( HttpServletResponse response) {
        response.setContentType("image/jpeg");  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        response.setHeader("Pragma", "no-cache"); 
        long time=System.currentTimeMillis();
        response.setDateHeader("Last-Modified", time);
        response.setDateHeader("Date", time);
        response.setDateHeader("Expires", time);
    }

    @RequestMapping(value = "/getpatchcaImage")  
    public void getpatchcaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {  

        switch (random.nextInt(5)) {
        case 0:
            cs.setFilterFactory(new CurvesRippleFilterFactory(cs.getColorFactory()));
            break;
        case 1:
            cs.setFilterFactory(new MarbleRippleFilterFactory());
            break;
        case 2:
            cs.setFilterFactory(new DoubleRippleFilterFactory());
            break;

        case 3:
            cs.setFilterFactory(new WobbleRippleFilterFactory());
            break;

        case 4:
            cs.setFilterFactory(new DiffuseRippleFilterFactory());
            break;

        }

        HttpSession session=request.getSession(false);
        if(session==null)
        {
            session=request.getSession();
        }
        setResponseHeaders(response);
        String token=EncoderHelper.getChallangeAndWriteImage(cs, "png", response.getOutputStream());
        session.setAttribute("captchaToken", token);
        System.out.println("当前的 sessionId:"+session.getId()+",验证码："+token );

    }



    /** 
    * @author singer
    * @Description:  
    * @param @param res
    * @param @param resp
    * @param @param out  参数说明 
    * @return void    返回类型 
    * @throws 
    */
    @RequestMapping(value="/validateCode")
    public void validateCode(HttpServletRequest res, HttpServletResponse resp,PrintWriter out)
    {
          boolean flag=false;
          String authcode=res.getParameter("code");
          String code = (String) res.getSession().getAttribute("captchaToken");        //获取生成的验证码  
          System.out.println(authcode + "," + code);  
          if((code.toUpperCase()).equals(authcode.toUpperCase())) 
          {  
            flag= true;
          } 
          else
          {
            flag=false;
          }
          resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/plain;charset=utf-8");
        //向叶面输出数据
        try {
            out.write(String.valueOf(flag));
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

页面代码

$(function(){$(‘#kaptchaImage’).click(function(){
$(‘#imgCode’).attr(‘src’, ‘getpatchcaImage?’ + Math.floor(Math.random()*100) )
});
});

$(function(){
    $("#code").blur(function(){
        var code = $("#code").val();

        if(code==''||code==null)
        {
             $('#showMes').show();
             $('#showMes p').html("请输入验证码");
             $('#captcha').focus();
             return false;
        }else
            {
              $.ajax({
                   type:"POST",
                   url:"validateCode",
                   dataType:"text",
                   data:'code='+code,
                   success:function(data){
                       if(data=="true"){
                           $('#showMes').hide();
                          // $('#showMes p').html("验证码正确");
                       }else{
                           $('#showMes').show();
                           $('#showMes p').html("验证码不正确,请重新输入");
                           $('#code').focus();
                           $('#code').val('');
                       }
                   },
                   error:function(data){
                       alert("ajax调用失败!");
                   }
               });  
            }
        });
    }); 

“`

个人用户| 企业经办| 行销人员

                       <!-- 个人 -->
                       <div id="person" >
                        <div class="form-group">
                          <div class="col-xs-12">                   
                            <div class="control-wrapper">
                                <label for="username" class="control-label fa-label"></label>
                                <input type="text" class="form-control" id="phone" placeholder="证件号">
                            </div>                                  
                          </div>              
                        </div>

                        <div class="form-group">
                          <div class="col-md-12">
                            <div class="control-wrapper">
                                <label for="password" class="control-label fa-label"></label>
                                <input type="password" class="form-control" id="mescode" placeholder="密码">
                            </div>
                          </div>


                        </div>

                         <div class="form-group">
                          <div class="col-xs-7">                    
                            <div class="control-wrapper">
                                <label for="username" class="control-label fa-label"></label>
                                <input type="text" class="form-control" id="code" placeholder="请输入图片验证码">
                            </div>                                  
                          </div>   
                          <div class="col-xs-5 captcha-container">
                                <div class="captcha" sl-captcha="">

                                    <img title="看不清，换一张" id="imgCode" src="getpatchcaImage" class="captcha-img">
                                    <button type="button" class="btn btn-primary" id="kaptchaImage">

                                    <span class="glyphicon glyphicon-refresh"></span></button></div>
                              </div>           
                        </div>


                         <div class="error-info-position ng-scope"  id="showMes" style="display: none;">
                                <p ng-repeat="error in errors track by $index" ng-bind="error" class="alert alert-danger error-info ng-binding ng-scope" >图形验证码不正确</p>
                         </div>



                            <div class="form-group">
                              <div class="col-md-12">
                                    <input type="submit" value="登录" class="btn btn-success col-md-12 btn-lg">

                              </div>
                            </div>
                            </div>
                            <!-- 个人 结束-->

                            <!-- 企业开始 -->

                                <div id="buess" style="display: none;">
                                    <div class="form-group">
                                      <div class="col-xs-12">                   
                                        <div class="control-wrapper">
                                            <label for="username" class="control-label fa-label"></label>
                                            <input type="text" class="form-control" id="phone" placeholder="组织机构代码">
                                        </div>                                  
                                      </div>              
                                    </div>

                                    <div class="form-group">
                                      <div class="col-md-12">
                                        <div class="control-wrapper">
                                            <label for="password" class="control-label fa-label"></label>
                                            <input type="password" class="form-control" id="mescode" placeholder="密码">
                                        </div>
                                      </div>


                                    </div>

                                     <div class="form-group">
                                      <div class="col-xs-7">                    
                                        <div class="control-wrapper">
                                            <label for="username" class="control-label fa-label"></label>
                                            <input type="text" class="form-control" id="code" placeholder="请输入图片验证码">
                                        </div>                                  
                                      </div>   
                                      <div class="col-xs-5 captcha-container">
                                            <div class="captcha" sl-captcha="">

                                                <img title="看不清，换一张" id="imgCode" src="getpatchcaImage" class="captcha-img">
                                                <button type="button" class="btn btn-primary" id="kaptchaImage">

                                                <span class="glyphicon glyphicon-refresh"></span></button></div>
                                          </div>           
                                    </div>


                                     <div class="error-info-position ng-scope"  id="showMes" style="display: none;">
                                            <p ng-repeat="error in errors track by $index" ng-bind="error" class="alert alert-danger error-info ng-binding ng-scope" >图形验证码不正确</p>
                                     </div>



                                        <div class="form-group">
                                          <div class="col-md-12">
                                                <input type="submit" value="登录" class="btn btn-success col-md-12 btn-lg">

                                          </div>
                                        </div>
                                </div>

                            <!-- 企业结束 -->

                            <!-- 行销开始 -->

                                <div id="sale" style="display: none;">
                                    <div class="form-group">
                                          <div class="col-xs-12">                   
                                            <div class="control-wrapper">
                                                <label for="username" class="control-label fa-label"></label>
                                                <input type="text" class="form-control" id="phone" placeholder="员工号">
                                            </div>                                  
                                          </div>              
                                        </div>

                                        <div class="form-group">
                                          <div class="col-md-12">
                                            <div class="control-wrapper">
                                                <label for="password" class="control-label fa-label"></label>
                                                <input type="password" class="form-control" id="mescode" placeholder="密码">
                                            </div>
                                          </div>


                                        </div>

                                         <div class="form-group">
                                          <div class="col-xs-7">                    
                                            <div class="control-wrapper">
                                                <label for="username" class="control-label fa-label"></label>
                                                <input type="text" class="form-control" id="code" placeholder="请输入图片验证码">
                                            </div>                                  
                                          </div>   
                                          <div class="col-xs-5 captcha-container">
                                                <div class="captcha" sl-captcha="">

                                                    <img title="看不清，换一张" id="imgCode" src="getpatchcaImage" class="captcha-img">
                                                    <button type="button" class="btn btn-primary" id="kaptchaImage">

                                                    <span class="glyphicon glyphicon-refresh"></span></button></div>
                                              </div>           
                                        </div>


                                         <div class="error-info-position ng-scope"  id="showMes" style="display: none;">
                                                <p ng-repeat="error in errors track by $index" ng-bind="error" class="alert alert-danger error-info ng-binding ng-scope" >图形验证码不正确</p>
                                         </div>



                                            <div class="form-group">
                                              <div class="col-md-12">
                                                    <input type="submit" value="登录" class="btn btn-success col-md-12 btn-lg">

                                              </div>
                                            </div>
                                </div>

                            <!-- 行销结束 -->

                        <hr>
                        <div class="form-group">
                            <div class="col-md-12">

                                 <div class="card-footer">
                                <p class="footer-text text-center">&nbsp;<a href="#">忘记密码？</a></p>
                              </div>                
                            </div>
                        </div>
                      </form>
                </div>
            </div>
            </div>
        </div>
    </div>

资源地址:
http://download.youkuaiyun.com/detail/qq_25016607/9608602