JAVAWEB项目如何实现验证码 (转)

<h1>
    <span class="link_title"><a href="/lulei9876/article/details/8365500">
    JAVAWEB项目如何实现验证码        
       
    </a>
    </span>

     
</h1>
    <div class="article_manage clearfix">
    <div class="article_r">
        <span class="link_postdate">2012-12-21 21:19</span>
        <span class="link_view" title="阅读次数">56026人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(36)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('JAVAWEB%e9%a1%b9%e7%9b%ae%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e9%aa%8c%e8%af%81%e7%a0%81','8365500');return false;" title="收藏" target="_blank">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(8365500,2);return false;" title="举报">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '&lt;img src="' + obj.logo + '"/&gt;' + obj.name + "&amp;nbsp;&amp;nbsp;";
                    html += ' &lt;a href="' + obj.url + '" target="_blank"&gt;';
                    html += ' &lt;img src="' + obj.logo + '"&gt;';
                    html += ' &lt;em&gt;&lt;b&gt;' + obj.name + '&lt;/b&gt;&lt;/em&gt;';
                    html += ' &lt;/a&gt;';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }
        
    });
</script>
    <div class="bog_copyright">         
        <p class="copyright_p">版权声明:本文为博主原创文章,未经博主允许不得转载。</p>
    </div>

验证码基础

一.什么是验证码及它的作用

   验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意破解密码、刷票、论坛灌水、有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录。

 

二.图文验证码的原理

   在servlet中随机生成一个指定位置的验证码,一般为四位,然后把该验证码保存到session中.在通过Java的绘图类以图片的形式输出该验证码。为了增加验证码的安全级别,可以输出图片的同时输出干扰线,最后在用户提交数据的时候,在服务器端将用户提交的验证码和Session保存的验证码进行比较。

 

三.验证码所需的技术

    i.因为验证码中的文字,数字,应为都是可变的,故要用到随机生成数技术。

       ii.如果验证码中包含汉字,则要用到汉字生成技术.

       iii.可以使用Ajax技术实现局部刷新

       iv.可以使用图片的缩放和旋转技术,

       vi.随机绘制干扰线(可以是折现,直线等)

       vii.如果考虑到验证码的安全性,可以使用MD5加密.

 

验证码模块实例

1.编写生成英文,数字,汉字随机生成的Servlet类.源代码如下:

  1. package com.servlet;  
  2.   
  3. import java.awt.*;  
  4. import java.awt.geom.*;  
  5. import java.awt.image.*;  
  6. import java.io.*;  
  7. import java.util.*;  
  8.   
  9. import javax.servlet.ServletException;  
  10. import javax.servlet.http.HttpServlet;  
  11. import javax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13. import javax.servlet.http.HttpSession;  
  14. import javax.imageio.ImageIO;  
  15.   
  16. public class PictureCheckCode extends HttpServlet {  
  17.   
  18.     private static final long serialVersionUID = 1L;  
  19.   
  20.     public PictureCheckCode() {  
  21.         super();  
  22.     }  
  23.   
  24.     public void destroy() {  
  25.         super.destroy();   
  26.     }  
  27.   
  28.     public void init() throws ServletException {  
  29.         super.init();  
  30.     }  
  31.     /*该方法主要作用是获得随机生成的颜色*/   
  32.     public Color getRandColor(int s,int e){  
  33.         Random random=new Random ();  
  34.         if(s>255) s=255;  
  35.         if(e>255) e=255;  
  36.         int r,g,b;  
  37.         r=s+random.nextInt(e-s);    //随机生成RGB颜色中的r值  
  38.         g=s+random.nextInt(e-s);    //随机生成RGB颜色中的g值  
  39.         b=s+random.nextInt(e-s);    //随机生成RGB颜色中的b值  
  40.         return new Color(r,g,b);  
  41.     }  
  42.   
  43.     @Override  
  44.     public void service(HttpServletRequest request, HttpServletResponse response)  
  45.             throws ServletException, IOException {  
  46.         //设置不缓存图片  
  47.         response.setHeader("Pragma""No-cache");  
  48.         response.setHeader("Cache-Control""No-cache");  
  49.         response.setDateHeader("Expires"0);  
  50.         //指定生成的响应图片,一定不能缺少这句话,否则错误.  
  51.         response.setContentType("image/jpeg");  
  52.         int width=86,height=22;     //指定生成验证码的宽度和高度  
  53.         BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //创建BufferedImage对象,其作用相当于一图片  
  54.         Graphics g=image.getGraphics();     //创建Graphics对象,其作用相当于画笔  
  55.         Graphics2D g2d=(Graphics2D)g;       //创建Grapchics2D对象  
  56.         Random random=new Random();  
  57.         Font mfont=new Font("楷体",Font.BOLD,16); //定义字体样式  
  58.         g.setColor(getRandColor(200,250));  
  59.         g.fillRect(00, width, height);    //绘制背景  
  60.         g.setFont(mfont);                   //设置字体  
  61.         g.setColor(getRandColor(180,200));  
  62.           
  63.         //绘制100条颜色和位置全部为随机产生的线条,该线条为2f  
  64.         for(int i=0;i<100;i++){  
  65.             int x=random.nextInt(width-1);  
  66.             int y=random.nextInt(height-1);  
  67.             int x1=random.nextInt(6)+1;  
  68.             int y1=random.nextInt(12)+1;  
  69.             BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL); //定制线条样式  
  70.             Line2D line=new Line2D.Double(x,y,x+x1,y+y1);  
  71.             g2d.setStroke(bs);  
  72.             g2d.draw(line);     //绘制直线  
  73.         }  
  74.         //输出由英文,数字,和中文随机组成的验证文字,具体的组合方式根据生成随机数确定。  
  75.         String sRand="";  
  76.         String ctmp="";  
  77.         int itmp=0;  
  78.         //制定输出的验证码为四位  
  79.         for(int i=0;i<4;i++){  
  80.             switch(random.nextInt(3)){  
  81.                 case 1:     //生成A-Z的字母  
  82.                      itmp=random.nextInt(26)+65;  
  83.                      ctmp=String.valueOf((char)itmp);  
  84.                      break;  
  85.                 case 2:     //生成汉字  
  86.                      String[] rBase={"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"};   
  87.                      //生成第一位区码  
  88.                      int r1=random.nextInt(3)+11;  
  89.                      String str_r1=rBase[r1];  
  90.                      //生成第二位区码  
  91.                      int r2;  
  92.                      if(r1==13){  
  93.                          r2=random.nextInt(7);     
  94.                      }else{  
  95.                          r2=random.nextInt(16);  
  96.                      }  
  97.                      String str_r2=rBase[r2];  
  98.                      //生成第一位位码  
  99.                      int r3=random.nextInt(6)+10;  
  100.                      String str_r3=rBase[r3];  
  101.                      //生成第二位位码  
  102.                      int r4;  
  103.                      if(r3==10){  
  104.                          r4=random.nextInt(15)+1;  
  105.                      }else if(r3==15){  
  106.                          r4=random.nextInt(15);  
  107.                      }else{  
  108.                          r4=random.nextInt(16);  
  109.                      }  
  110.                      String str_r4=rBase[r4];  
  111.                      //将生成的机内码转换为汉字  
  112.                      byte[] bytes=new byte[2];  
  113.                      //将生成的区码保存到字节数组的第一个元素中  
  114.                      String str_12=str_r1+str_r2;  
  115.                      int tempLow=Integer.parseInt(str_12, 16);  
  116.                      bytes[0]=(byte) tempLow;  
  117.                      //将生成的位码保存到字节数组的第二个元素中  
  118.                      String str_34=str_r3+str_r4;  
  119.                      int tempHigh=Integer.parseInt(str_34, 16);  
  120.                      bytes[1]=(byte)tempHigh;  
  121.                      ctmp=new String(bytes);  
  122.                      break;  
  123.                 default:  
  124.                      itmp=random.nextInt(10)+48;  
  125.                      ctmp=String.valueOf((char)itmp);  
  126.                      break;  
  127.             }  
  128.             sRand+=ctmp;  
  129.             Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),random.nextInt(110));  
  130.             g.setColor(color);  
  131.             //将生成的随机数进行随机缩放并旋转制定角度 PS.建议不要对文字进行缩放与旋转,因为这样图片可能不正常显示  
  132.             /*将文字旋转制定角度*/  
  133.             Graphics2D g2d_word=(Graphics2D)g;  
  134.             AffineTransform trans=new AffineTransform();  
  135.             trans.rotate((45)*3.14/180,15*i+8,7);  
  136.             /*缩放文字*/  
  137.             float scaleSize=random.nextFloat()+0.8f;  
  138.             if(scaleSize>1f) scaleSize=1f;  
  139.             trans.scale(scaleSize, scaleSize);  
  140.             g2d_word.setTransform(trans);  
  141.             g.drawString(ctmp, 15*i+1814);  
  142.         }  
  143.         HttpSession session=request.getSession(true);  
  144.         session.setAttribute("randCheckCode", sRand);  
  145.         g.dispose();    //释放g所占用的系统资源  
  146.         ImageIO.write(image,"JPEG",response.getOutputStream()); //输出图片  
  147.     }  
  148. }  

 

 2.配置Servlet

    在web.xml中的配置如下:

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <servlet>  
  8.     <description>输出验证码</description>  
  9.     <display-name>This is the display name of my J2EE component</display-name>  
  10.     <servlet-name>PictureCheckCode</servlet-name>  
  11.     <servlet-class><SPAN style="COLOR: #ff0000">com.servlet.PictureCheckCode</SPAN></servlet-class>  
  12.   </servlet>  
  13.   
  14.   <servlet-mapping>  
  15.     <servlet-name>PictureCheckCode</servlet-name>  
  16.     <url-pattern>/<SPAN style="COLOR: #ff0000">PictureCheckCode</SPAN></url-pattern>  
  17.   </servlet-mapping>  
  18.   <welcome-file-list>  
  19.     <welcome-file>index.jsp</welcome-file>  
  20.   </welcome-file-list>  
  21. </web-app>  


3.测试验证码

      可以编写JSP页面来验证是否可以输出验证码图片,JSP代码如下:

    1.index.jsp:显示界面

  1. <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.     <head>  
  6.         <title>验证码</title>  
  7.         <script language="javascript">  
  8. function myReload() {  
  9.     document.getElementById("CreateCheckCode").src = document  
  10.             .getElementById("CreateCheckCode").src  
  11.             + "?nocache=" + new Date().getTime();  
  12. }  
  13. </script>  
  14.     </head>  
  15.   
  16.     <body>  
  17.         <form action="Check.jsp" method="post">  
  18.             <input name="checkCode" type="text" id="checkCode" title="验证码区分大小写"  
  19.                 size="8" ,maxlength="4" />  
  20.             <img src="PictureCheckCode" id="CreateCheckCode" align="middle">  
  21.             <a href="" onclick="myReload()"> 看不清,换一个</a>  
  22.             <input type="submit" value="提交" />  
  23.         </form>  
  24.     </body>  
  25. </html>  


 

2.Check.jsp :主要验证提交的数据是否和Session中保存的验证码是否相同

  1. <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>  
  2. <html>  
  3.   <head>  
  4.     <title>验证码校验</title>  
  5.   </head>  
  6.     
  7.   <body>  
  8.     <%  
  9.         String checkcode=request.getParameter("checkCode");  
  10.         if(checkcode.equals("")||checkcode==null){  
  11.             out.print("<script>alert('请输入验证码');window.location.href('index.jsp')</script>");  
  12.         }else{  
  13.             if(!checkcode.equalsIgnoreCase((String)session.getAttribute("randCheckCode"))){  
  14.                 out.print("<script>alert('验证码不正确,请重新输入');history.back(-1);</script>");  
  15.             }else{  
  16.                 out.print("登录成功");  
  17.             }  
  18.         }  
  19.      %>  
  20.   </body>  
  21. </html>  


 

 4.工程项目结构,及运行截图 

    <div id="digg" articleid="8365500">
        <dl id="btnDigg" class="digg digg_disable" onclick="btndigga();">
           
             <dt>顶</dt>
            <dd>47</dd>
        </dl>
       
          
        <dl id="btnBury" class="digg digg_disable" onclick="btnburya();">
          
              <dt>踩</dt>
            <dd>0</dd>               
        </dl>
        
    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
            function btndigga() {
                $(".tracking-ad[data-mod='popu_222'] a").click();
            }
            function btnburya() {
                $(".tracking-ad[data-mod='popu_223'] a").click();
            }
        </script>
<div style="clear:both; height:10px;"></div>


        <div class="similar_article">
                <h4></h4>
                <div class="similar_c" style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                      &nbsp;&nbsp;相关文章推荐
                    </div>
               
                    <div class="similar_wrap tracking-ad" data-mod="popu_36">                       
                        <ul class="similar_list fl">    
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/luohuaishao/article/details/41211187" title="JAVAWEB项目如何实现验证码" strategy="BlogCommendFromCsdn" target="_blank">JAVAWEB项目如何实现验证码</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://wsql.iteye.com/blog/1824255" title="JavaWeb项目的中文乱码的原因以及Servlet中处理GET请求和POST请求编码过滤器" strategy="BlogCommendFromCsdn" target="_blank">JavaWeb项目的中文乱码的原因以及Servlet中处理GET请求和POST请求编码过滤器</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/u014785563/article/details/52893719" title="javaWeb之JAVA实现验证码的制作" strategy="BlogCommendFromCsdn" target="_blank">javaWeb之JAVA实现验证码的制作</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://hongzhguan.iteye.com/blog/1444489" title="PowerShell实现从SVN检出JavaWeb项目并编译" strategy="BlogCommendFromCsdn" target="_blank">PowerShell实现从SVN检出JavaWeb项目并编译</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/qq441568267/article/details/52227929" title="javaweb项目验证码的实现" strategy="BlogCommendFromCsdn" target="_blank">javaweb项目验证码的实现</a>
                               </li>
                        </ul>
                          <ul class="similar_list fr">      
                               <li>
                                   <em>•</em>
                                   <a href="http://luanxiyuan.iteye.com/blog/2236958" title="javaweb项目发布到tomcat后无法访问,问题解决方案" strategy="BlogCommendFromCsdn" target="_blank">javaweb项目发布到tomcat后无法访问,问题解决方案</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/w695050167/article/details/17439107" title="《百度云平台验证码实现》-----javaweb" strategy="BlogCommendFromCsdn" target="_blank">《百度云平台验证码实现》-----javaweb</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://wwwlike.iteye.com/blog/871019" title="Javaweb项目参数get传递需要编码" strategy="BlogCommendFromCsdn" target="_blank">Javaweb项目参数get传递需要编码</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/chenchudongsg/article/details/39267721" title="JavaWEb基础之实现验证码" strategy="BlogCommendFromCsdn" target="_blank">JavaWEb基础之实现验证码</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://zretc.iteye.com/blog/1884847" title="JavaWeb中验证码的实现" strategy="BlogCommendFromCsdn" target="_blank">JavaWeb中验证码的实现</a>
                               </li>
                        </ul>
                    </div>
                </div>
            </div>   
原文地址:https://www.cnblogs.com/jpfss/p/7122405.html