說(shuō)起驗(yàn)證碼,大家應(yīng)該都不陌生吧。登陸的時(shí)候需要驗(yàn)證碼,注冊(cè)的時(shí)候也要驗(yàn)證碼。那么驗(yàn)證碼是怎么生成的呢?下面,分享一篇使用Java實(shí)現(xiàn)后臺(tái)驗(yàn)證碼生成的文章,有興趣的小伙伴可以一起來(lái)學(xué)習(xí)。
效果圖如下:
1.適用需求
后臺(tái)生成驗(yàn)證碼,用于登陸驗(yàn)證。
2. 功能實(shí)現(xiàn)所需控件/文件:
無(wú)(普通標(biāo)簽)
3.功能點(diǎn)實(shí)現(xiàn)思路
1)前臺(tái)思路:
(1)前臺(tái)一個(gè)<input>用于輸入驗(yàn)證碼;一個(gè)<img>用于展示驗(yàn)證碼。
(2)驗(yàn)證碼生成以及展示,點(diǎn)擊刷新功能,可以為<img>綁定click事件。
(3)click事件里面寫(xiě)ajax請(qǐng)求,通過(guò)后臺(tái)生成處理好的帶噪點(diǎn)的驗(yàn)證碼圖片。
注意:后臺(tái)直接返回圖片,不是驗(yàn)證碼的字符!若返回字符,則驗(yàn)證碼就失去了意義(前臺(tái)很容易就可以獲取驗(yàn)證碼字符,進(jìn)行多次惡意訪(fǎng)問(wèn)了)(這點(diǎn)考慮了系統(tǒng)安全性)
(4)關(guān)于返回的圖片如何在<img>標(biāo)簽內(nèi)展示
直接利用img的src屬性,屬性值為后臺(tái)生成驗(yàn)證碼的方法請(qǐng)求路徑即可。當(dāng)點(diǎn)擊驗(yàn)證碼的時(shí)候,再動(dòng)態(tài)設(shè)置src屬性即可(原訪(fǎng)問(wèn)地址+隨機(jī)時(shí)間戳,防止同一路徑瀏覽器不另作訪(fǎng)問(wèn)的問(wèn)題)
前臺(tái)部分代碼:
/*驗(yàn)證碼輸入框*/
<input class="verifyInput" name="verifyInput" placeholder="請(qǐng)輸入驗(yàn)證碼">
/*驗(yàn)證碼圖片*/
<img class="verifyCode" onclick="changeCode()" src="https://atts.w3cschool.cn/attachments/getVerifyCode">
//src的getVerifyCode是后臺(tái)訪(fǎng)問(wèn)地址;項(xiàng)目為SSM框架。
/*點(diǎn)擊刷新驗(yàn)證碼*/
function changeCode(){
var src = " getVerifyCode?"+new Date().getTime(); //加時(shí)間戳,防止瀏覽器利用緩存
$('.verifyCode').attr("src",src); //jQuery寫(xiě)法
}
2)后臺(tái)思路:
后臺(tái)思路很簡(jiǎn)單,利用BufferedImage類(lèi)創(chuàng)建一張圖片,再用Graphics2D對(duì)圖片進(jìn)行繪制(生成隨機(jī)字符,添加噪點(diǎn),干擾線(xiàn))即可。注意生成的驗(yàn)證碼字符串要放到session中,用于接下來(lái)登陸的驗(yàn)證碼驗(yàn)證(當(dāng)然也是后臺(tái))。
部分代碼如下:
/* 獲取驗(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);
//生成對(duì)應(yīng)寬高的初始圖片
String randomText = VerifyCode.drawRandomText(width,height,verifyImg);
//單獨(dú)的一個(gè)類(lèi)方法,出于代碼復(fù)用考慮,進(jìn)行了封裝。
//功能是生成驗(yàn)證碼字符并加上噪點(diǎn),干擾線(xiàn),返回值為驗(yàn)證碼字符
request.getSession().setAttribute("verifyCode", randomText);
response.setContentType("image/png");//必須設(shè)置響應(yīng)內(nèi)容類(lèi)型為圖片,否則前臺(tái)不識(shí)別
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();
}
}
/*對(duì)圖片進(jìn)行處理的類(lèi)和方法*/
public class VerifyCode {
public static String drawRandomText(int width,int height,BufferedImage verifyImg) {
Graphics2D graphics = (Graphics2D)verifyImg.getGraphics();
graphics.setColor(Color.WHITE);//設(shè)置畫(huà)筆顏色-驗(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;
}
//畫(huà)干擾線(xiàn)
for (int i = 0; i <6; i++) {
// 設(shè)置隨機(jī)顏色
graphics.setColor(getRandomColor());
// 隨機(jī)畫(huà)線(xiàn)
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)思路很簡(jiǎn)單,從系統(tǒng)安全性和代碼復(fù)用性這兩點(diǎn)考慮,驗(yàn)證碼必須后臺(tái)生成,生成驗(yàn)證碼的方法可以封裝到靜態(tài)工具類(lèi)里。此外,后臺(tái)用到許多Java自帶的圖片處理類(lèi)值得學(xué)習(xí)。
到此這篇關(guān)于java后臺(tái)驗(yàn)證碼生成的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)java其他有趣的內(nèi)容,請(qǐng)搜索W3Cschool以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持!