溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何實現Java后端產生驗證碼后臺驗證功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
直接跳severlet在java后臺生成驗證碼：
@RequestMapping(value="yzm.action") public void Yzm(HttpSession session,HttpServletResponse resp){ // 驗證碼圖片的寬度。 int width = 60; // 驗證碼圖片的高度。 int height = 20; // 驗證碼字符個數 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(); // 創建一個隨機數生成器類 Random random = new Random(); // 將圖像填充為白色 g.setColor(Color.WHITE); g.fillRect(0, 0, width, height); // 創建字體，字體的大小應該根據圖片的高度來定。 Font font = new Font("Fixedsys", Font.PLAIN, fontHeight); // 設置字體。 g.setFont(font); // 畫邊框。 // g.setColor(Color.BLACK); // g.drawRect(0, 0, width - 1, height - 1); // 隨機產生160條干擾線，使圖象中的認證碼不易被其它程序探測到。 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用于保存隨機產生的驗證碼，以便用戶登錄后進行驗證。 StringBuffer randomCode = new StringBuffer(); int red = 0, green = 0, blue = 0; // 隨機產生codeCount數字的驗證碼。 for (int i = 0; i < codeCount; i++) { // 得到隨機產生的驗證碼數字。 String strRand = String.valueOf(codeSequence[random.nextInt(36)]); // 產生隨機的顏色分量來構造顏色值，這樣輸出的每位數字的顏色值都將不同。 red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); // 用隨機產生的顏色將驗證碼繪制到圖像中。 g.setColor(new Color(red, green, blue)); g.drawString(strRand, (i + 1) * x, codeY); // 將產生的四個隨機數組合在一起。 randomCode.append(strRand); } // 將四位數字的驗證碼保存到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顯示頁面的代碼，點擊圖片刷新
<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()); });
將文本框中的值傳入后臺，與最開始生成驗證碼的隨機數進行比較即可完成驗證。
頁面上拿到的session的值老是比驗證碼晚一步，所以采取后臺進行驗證。這里我也不知道什么原因，望小伙伴們告知。。。
另一種思路，后臺生成隨機數，前端生成畫布，用ajax拿隨機數
//后臺只生成隨機數 @RequestMapping(value="random.action") public void findRandom (HttpServletResponse response) throws IOException{ // 驗證碼字符個數 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' }; // 創建一個隨機數生成器類 Random random = new Random(); // randomCode用于保存隨機產生的驗證碼，以便用戶登錄后進行驗證。 StringBuffer randomCode = new StringBuffer(); for (int i = 0; i < codeCount; i++) { // 得到隨機產生的驗證碼數字。 String strRand = String.valueOf(codeSequence[random.nextInt(36)]); // 將產生的四個隨機數組合在一起。 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(); } }) }) /**生成一個隨機數**/ function randomNum(min,max){ return Math.floor( Math.random()*(max-min)+min); } /**生成一個隨機色**/ function randomColor(min,max){ var r = randomNum(min,max); var g = randomNum(min,max); var b = randomNum(min,max); return "rgb("+r+","+g+","+b+")"; } /**繪制驗證碼圖片**/ 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); //顏色若太深可能導致看不清 ctx.fillRect(0,0,width,height); /**繪制文字**/ /* for(var i=0; i<4; i++){ */ var txt = $("#yzms").attr("value"); ctx.fillStyle = randomColor(50,160); //隨機生成字體顏色 ctx.font = randomNum(15,20)+'px SimHei'; //隨機生成字體大小 var x = 20; var y = randomNum(20,30); var deg = randomNum(-45, 45); //修改坐標原點和旋轉角度 ctx.translate(x,y); ctx.rotate(deg*Math.PI/180); ctx.fillText(txt, 0,0); //恢復坐標原點和旋轉角度 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(); } /**繪制干擾點**/ /* 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(); } */ }
以上是“如何實現Java后端產生驗證碼后臺驗證功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
