如何實(shí)現(xiàn)Java后端產(chǎn)生驗(yàn)證碼后臺(tái)驗(yàn)證功能

這篇文章主要介紹如何實(shí)現(xiàn)Java后端產(chǎn)生驗(yàn)證碼后臺(tái)驗(yàn)證功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

直接跳severlet在java后臺(tái)生成驗(yàn)證碼：

@RequestMapping(value="yzm.action") public void Yzm(HttpSession session,HttpServletResponse resp){ // 驗(yàn)證碼圖片的寬度。      int width = 60;       // 驗(yàn)證碼圖片的高度。      int height = 20;         // 驗(yàn)證碼字符個(gè)數(shù)      int codeCount = 4;         int x = 0;         // 字體高度      int fontHeight;         int codeY;         char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',          'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',          'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };      x = width / (codeCount + 1);       fontHeight = height - 2;       codeY = height - 4;     BufferedImage buffImg = new BufferedImage(width, height,           BufferedImage.TYPE_INT_RGB);       Graphics2D g = buffImg.createGraphics();       // 創(chuàng)建一個(gè)隨機(jī)數(shù)生成器類       Random random = new Random();       // 將圖像填充為白色       g.setColor(Color.WHITE);       g.fillRect(0, 0, width, height);       // 創(chuàng)建字體，字體的大小應(yīng)該根據(jù)圖片的高度來(lái)定。       Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);       // 設(shè)置字體。       g.setFont(font);       // 畫邊框。   //    g.setColor(Color.BLACK);   //    g.drawRect(0, 0, width - 1, height - 1);       // 隨機(jī)產(chǎn)生160條干擾線，使圖象中的認(rèn)證碼不易被其它程序探測(cè)到。       g.setColor(Color.BLACK);       for (int i = 0; i < 1; i++) {         int x2 = random.nextInt(width);         int y2 = random.nextInt(height);         int xl = random.nextInt(12);         int yl = random.nextInt(12);         g.drawLine(x2, y2, x + xl, y2 + yl);       }       // randomCode用于保存隨機(jī)產(chǎn)生的驗(yàn)證碼，以便用戶登錄后進(jìn)行驗(yàn)證。       StringBuffer randomCode = new StringBuffer();     int red = 0, green = 0, blue = 0;       // 隨機(jī)產(chǎn)生codeCount數(shù)字的驗(yàn)證碼。       for (int i = 0; i < codeCount; i++) {         // 得到隨機(jī)產(chǎn)生的驗(yàn)證碼數(shù)字。         String strRand = String.valueOf(codeSequence[random.nextInt(36)]);         // 產(chǎn)生隨機(jī)的顏色分量來(lái)構(gòu)造顏色值，這樣輸出的每位數(shù)字的顏色值都將不同。         red = random.nextInt(255);         green = random.nextInt(255);         blue = random.nextInt(255);         // 用隨機(jī)產(chǎn)生的顏色將驗(yàn)證碼繪制到圖像中。         g.setColor(new Color(red, green, blue));         g.drawString(strRand, (i + 1) * x, codeY);         // 將產(chǎn)生的四個(gè)隨機(jī)數(shù)組合在一起。         randomCode.append(strRand);       }       // 將四位數(shù)字的驗(yàn)證碼保存到Session中。       session.setAttribute("validateCode", randomCode.toString());       ServletOutputStream sos; try {  sos = resp.getOutputStream();  ImageIO.write(buffImg, "jpeg", sos);     sos.close();    } catch (IOException e) {  // TODO Auto-generated catch block  e.printStackTrace(); }    }

jsp顯示頁(yè)面的代碼，點(diǎn)擊圖片刷新

<td><img id="img" src="yzm.action"/>${validateCode}</td>      <td><input type="text" name="yzma"/><br/></td> $("#img").click(function(){ $(this).attr("src","yzm.action?"+new Date().getTime());  });

將文本框中的值傳入后臺(tái)，與最開(kāi)始生成驗(yàn)證碼的隨機(jī)數(shù)進(jìn)行比較即可完成驗(yàn)證。

頁(yè)面上拿到的session的值老是比驗(yàn)證碼晚一步，所以采取后臺(tái)進(jìn)行驗(yàn)證。這里我也不知道什么原因，望小伙伴們告知。。。

另一種思路，后臺(tái)生成隨機(jī)數(shù)，前端生成畫布，用ajax拿隨機(jī)數(shù)

//后臺(tái)只生成隨機(jī)數(shù) @RequestMapping(value="random.action") public void findRandom (HttpServletResponse response) throws IOException{  // 驗(yàn)證碼字符個(gè)數(shù)      int codeCount = 4;   char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',          'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',          'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };      // 創(chuàng)建一個(gè)隨機(jī)數(shù)生成器類        Random random = new Random();   // randomCode用于保存隨機(jī)產(chǎn)生的驗(yàn)證碼，以便用戶登錄后進(jìn)行驗(yàn)證。        StringBuffer randomCode = new StringBuffer();     for (int i = 0; i < codeCount; i++) {          // 得到隨機(jī)產(chǎn)生的驗(yàn)證碼數(shù)字。          String strRand = String.valueOf(codeSequence[random.nextInt(36)]);        // 將產(chǎn)生的四個(gè)隨機(jī)數(shù)組合在一起。          randomCode.append(strRand);        }     PrintWriter out = response.getWriter();     out.print(randomCode); }

jsp，jq，js代碼

<body>    <canvas id="canvas" width="70" height="34"></canvas>    <a href="javascript:;" rel="external nofollow" id="img" class="pull-right" >換一張</a>    <input type="text" class="form-control" id="yzms" name="yzms" readonly = "readonly"  > </body> <script type="text/javascript">    $.ajax({ url:"random.action", success:function(k){ console.log(k)  $("#yzms").attr("value",k);  drawPic(); }}) $("#img").on("click",function(){ var _this=$(this)  $.ajax({  url:"random.action",  success:function(k){  console.log(k)   $("#yzms").attr("value",k);   drawPic();  } }) })  /**生成一個(gè)隨機(jī)數(shù)**/ function randomNum(min,max){  return Math.floor( Math.random()*(max-min)+min); } /**生成一個(gè)隨機(jī)色**/ function randomColor(min,max){  var r = randomNum(min,max);  var g = randomNum(min,max);  var b = randomNum(min,max);  return "rgb("+r+","+g+","+b+")"; }    /**繪制驗(yàn)證碼圖片**/ function drawPic(){  var canvas=document.getElementById("canvas");  var width=canvas.width;  var height=canvas.height;  var ctx = canvas.getContext('2d');  ctx.textBaseline = 'bottom';  /**繪制背景色**/  ctx.fillStyle = randomColor(180,240); //顏色若太深可能導(dǎo)致看不清  ctx.fillRect(0,0,width,height);  /**繪制文字**/ /*  for(var i=0; i<4; i++){ */   var txt = $("#yzms").attr("value");   ctx.fillStyle = randomColor(50,160); //隨機(jī)生成字體顏色   ctx.font = randomNum(15,20)+'px SimHei'; //隨機(jī)生成字體大小   var x = 20;   var y = randomNum(20,30);   var deg = randomNum(-45, 45);   //修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度   ctx.translate(x,y);   ctx.rotate(deg*Math.PI/180);   ctx.fillText(txt, 0,0);   //恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度   ctx.rotate(-deg*Math.PI/180);   ctx.translate(-x,-y); /*  } */  /* /**繪制干擾線**/   for(var i=0; i<8; i++){   ctx.strokeStyle = randomColor(40,180);   ctx.beginPath();   ctx.moveTo( randomNum(0,width), randomNum(0,height) );   ctx.lineTo( randomNum(0,width), randomNum(0,height) );   ctx.stroke();  }   /**繪制干擾點(diǎn)**/  /* for(var i=0; i<100; i++){   ctx.fillStyle = randomColor(0,255);   ctx.beginPath();   ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);   ctx.fill();  } */ }

以上是“如何實(shí)現(xiàn)Java后端產(chǎn)生驗(yàn)證碼后臺(tái)驗(yàn)證功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！