java后臺驗(yàn)證碼生成的實(shí)現(xiàn)方法
效果圖如下:
后臺生成驗(yàn)證碼,用于登陸驗(yàn)證。
2. 功能實(shí)現(xiàn)所需控件/文件:無(普通標(biāo)簽)
3.功能點(diǎn)實(shí)現(xiàn)思路1)前臺思路:
(1)前臺一個(gè)<input>用于輸入驗(yàn)證碼;一個(gè)<img>用于展示驗(yàn)證碼。
(2)驗(yàn)證碼生成以及展示,點(diǎn)擊刷新功能,可以為<img>綁定click事件。
(3)click事件里面寫ajax請求,通過后臺生成處理好的帶噪點(diǎn)的驗(yàn)證碼圖片。
注意:后臺直接返回圖片,不是驗(yàn)證碼的字符!若返回字符,則驗(yàn)證碼就失去了意義(前臺很容易就可以獲取驗(yàn)證碼字符,進(jìn)行多次惡意訪問了)(這點(diǎn)考慮了系統(tǒng)安全性)
(4)關(guān)于返回的圖片如何在<img>標(biāo)簽內(nèi)展示
直接利用img的src屬性,屬性值為后臺生成驗(yàn)證碼的方法請求路徑即可。當(dāng)點(diǎn)擊驗(yàn)證碼的時(shí)候,再動態(tài)設(shè)置src屬性即可(原訪問地址+隨機(jī)時(shí)間戳,防止同一路徑瀏覽器不另作訪問的問題)
前臺部分代碼:
/*驗(yàn)證碼輸入框*/ <input name='verifyInput' placeholder='請輸入驗(yàn)證碼'> /*驗(yàn)證碼圖片*/ <img onclick='changeCode()' src='http://www.cgvv.com.cn/bcjs/getVerifyCode'> //src的getVerifyCode是后臺訪問地址;項(xiàng)目為SSM框架。 /*點(diǎn)擊刷新驗(yàn)證碼*/ function changeCode(){ var src = 'http://www.cgvv.com.cn/bcjs/ getVerifyCode?'+new Date().getTime(); //加時(shí)間戳,防止瀏覽器利用緩存 $(’.verifyCode’).attr('src',src); //jQuery寫法 }
2)后臺思路:
后臺思路很簡單,利用BufferedImage類創(chuàng)建一張圖片,再用Graphics2D對圖片進(jìn)行繪制(生成隨機(jī)字符,添加噪點(diǎn),干擾線)即可。注意生成的驗(yàn)證碼字符串要放到session中,用于接下來登陸的驗(yàn)證碼驗(yàn)證(當(dāng)然也是后臺)。
部分代碼如下:
/* 獲取驗(yàn)證碼圖片*/ @RequestMapping('/getVerifyCode ') public void getVerificationCode(HttpServletResponse response,HttpServletRequest request) { try { int width=200; int height=69; BufferedImage verifyImg=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //生成對應(yīng)寬高的初始圖片 String randomText = VerifyCode.drawRandomText(width,height,verifyImg); //單獨(dú)的一個(gè)類方法,出于代碼復(fù)用考慮,進(jìn)行了封裝。 //功能是生成驗(yàn)證碼字符并加上噪點(diǎn),干擾線,返回值為驗(yàn)證碼字符 request.getSession().setAttribute('verifyCode', randomText); response.setContentType('image/png');//必須設(shè)置響應(yīng)內(nèi)容類型為圖片,否則前臺不識別 OutputStream os = response.getOutputStream(); //獲取文件輸出流 ImageIO.write(verifyImg,'png',os);//輸出圖片流 os.flush(); os.close();//關(guān)閉流 } catch (IOException e) { this.logger.error(e.getMessage()); e.printStackTrace(); } }
/*對圖片進(jìn)行處理的類和方法*/ public class VerifyCode { public static String drawRandomText(int width,int height,BufferedImage verifyImg) { Graphics2D graphics = (Graphics2D)verifyImg.getGraphics(); graphics.setColor(Color.WHITE);//設(shè)置畫筆顏色-驗(yàn)證碼背景色 graphics.fillRect(0, 0, width, height);//填充背景graphics.setFont(new Font('微軟雅黑', Font.BOLD, 40));//數(shù)字和字母的組合String baseNumLetter= = '123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ'; StringBuffer sBuffer = new StringBuffer();int x = 10; //旋轉(zhuǎn)原點(diǎn)的 x 坐標(biāo)String ch = '';Random random = new Random();for(int i = 0;i < 4;i++){ graphics.setColor(getRandomColor()); //設(shè)置字體旋轉(zhuǎn)角度 int degree = random.nextInt() % 30; //角度小于30度 int dot = random.nextInt(baseNumLetter.length()); ch = baseNumLetter.charAt(dot) + ''; sBuffer.append(ch); //正向旋轉(zhuǎn) graphics.rotate(degree * Math.PI / 180, x, 45); graphics.drawString(ch, x, 45); //反向旋轉(zhuǎn) graphics.rotate(-degree * Math.PI / 180, x, 45); x += 48;}//畫干擾線for (int i = 0; i <6; i++) { // 設(shè)置隨機(jī)顏色 graphics.setColor(getRandomColor()); // 隨機(jī)畫線 graphics.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));}//添加噪點(diǎn)for(int i=0;i<30;i++){ int x1 = random.nextInt(width); int y1 = random.nextInt(height); graphics.setColor(getRandomColor()); graphics.fillRect(x1, y1, 2,2); }return sBuffer.toString(); } /** * 隨機(jī)取色 */ private static Color getRandomColor() {Random ran = new Random();Color color = new Color(ran.nextInt(256),ran.nextInt(256), ran.nextInt(256));return color; }}4.功能實(shí)現(xiàn)心得:
驗(yàn)證碼的功能實(shí)現(xiàn)思路很簡單,從系統(tǒng)安全性和代碼復(fù)用性這兩點(diǎn)考慮,驗(yàn)證碼必須后臺生成,生成驗(yàn)證碼的方法可以封裝到靜態(tài)工具類里。此外,后臺用到許多Java自帶的圖片處理類值得學(xué)習(xí)。
到此這篇關(guān)于java后臺驗(yàn)證碼生成的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)java 驗(yàn)證碼生成內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟2. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考3. IDEA的Mybatis Generator駝峰配置問題4. javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析5. Java構(gòu)建JDBC應(yīng)用程序的實(shí)例操作6. Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進(jìn)行日期格式化的實(shí)現(xiàn)方法7. 一篇文章帶你了解JavaScript-對象8. IntelliJ Idea2017如何修改緩存文件的路徑9. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐10. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式
