Spring Boot+Ext JS 实现图形验证码| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Spring Boot+Ext JS 实现图形验证码

## Spring Boot+Ext JS 实现图形验证码
### 最终效果
![](/upload/picture/2022-10-10/upload_a38c139c2428ee94f4fad73aa869aafa.png)
为加强安全性，图片中绘制一些干扰线
点击验证码图形时， 更新新的验证码
### 实现思路
包含数字的图片在后端生成，这里通过Spring配置的Controller获取
使用Ext JS定义一个包含验证码图片的组件，该图片通过使用后端地址获取。
后端在生成数字图片时，会将数字写入到Session中，以便与前端传递的验证码进行比较， 如果相同，则验证成功。
实现代码
首先是生成后端的图片。
后端代码
控制器方法
```java
@RequestMapping(value = "/getGraphicVcode")	
public void getVerify(HttpServletRequest request, HttpServletResponse response) {				try {		
		response.setContentType("image/jpeg");// 设置相应类型,告诉浏览器输出的内容为图片	
		response.setHeader("Pragma", "No-cache");// 设置响应头信息，告诉浏览器不要缓存此内容
		response.setHeader("Cache-Control", "no-cache");	
		response.setDateHeader("Expire", 0);		
		GraphicVcodeUtil randomValidateCode = new GraphicVcodeUtil();	
		randomValidateCode.writeRandcode(request, response);// 输出验证码图片		
	} catch (Exception e) {			
		e.printStackTrace();	
	}	
}
```

### 图形验证码生成器共用类
```java
public class GraphicVcodeUtil {	
public static final String RANDOMCODEKEY = "RANDOMGRAPHICVCODE";// 放到session中的key	
private String randString = "0123456789";// 随机产生验证码的字符集， 一般以数字为多	
private int width = 95;// 图片宽	
private int height = 25;// 图片高	
private int lineSize = 40;// 干扰线数量	
private int stringNum = 4;// 随机产生字符数量	
private static final Logger logger = LoggerFactory.getLogger(GraphicVcodeUtil.class);	private Random random = new Random();	/**	 * 生成随机图片	 */	
public void writeRandcode(HttpServletRequest request, HttpServletResponse response) {		HttpSession session = request.getSession();		// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类		
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);		Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作		
g.fillRect(0, 0, width, height);// 图片大小		
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字体大小		
g.setColor(getRandColor(110, 133));// 字体颜色		// 绘制干扰线		
for (int i = 0; i <= lineSize; i++) {			
drowLine(g);	
}	// 绘制随机字符	
String randomString = "";	
for (int i = 1; i <= stringNum; i++) {	
randomString = drowString(g, randomString, i);	
}	
logger.info(randomString);	// 将生成的随机字符串保存到session中	
session.removeAttribute(RANDOMCODEKEY);		
session.setAttribute(RANDOMCODEKEY, randomString);		
g.dispose();	
try {		
// 将内存中的图片通过流动形式输出到客户端		
ImageIO.write(image, "JPEG", response.getOutputStream());	
} catch (Exception e) {		
logger.error("将内存中的图片通过流动形式输出到客户端失败>>>> ", e);	
}	
}	
/**	 * 获得字体	 */	
private Font getFont() {	
return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
}	/**	 * 获得颜色	 */	
private Color getRandColor(int fc, int bc) {	
if (fc > 255)	
fc = 255;		
if (bc > 255)	
bc = 255;	
int r = fc + random.nextInt(bc - fc - 16);	
int g = fc + random.nextInt(bc - fc - 14);	
int b = fc + random.nextInt(bc - fc - 18);	
return new Color(r, g, b);	}	
/**	 * 绘制字符串	 */	
private String drowString(Graphics g, String randomString, int i) {	
g.setFont(getFont());	
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));	
String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));	
randomString += rand;	
g.translate(random.nextInt(3), random.nextInt(3));	
g.drawString(rand, 13 * i, 16);	
return randomString;	}	
/**	 * 绘制干扰线	 */	
private void drowLine(Graphics g) {		
int x = random.nextInt(width);	
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);	
g.drawLine(x, y, x + xl, y + yl);	}
/**	 * 获取随机的字符	 */	
public String getRandomString(int num) {	
return String.valueOf(randString.charAt(num));
}}
```

在浏览器中输入 http://localhost:8080/tool/getGraphicVcode, 获取图片的效果如下：

接下来就是将后端的随机图片结合到Ext JS的组件中。
### Ext JS带图形验证码的组件类
```javascript
Ext.define('ExtjsdevEncy.view.chp12.GraphicVcode', {
	extend: 'Ext.form.field.Text',  
	alias: 'widget.graphicvcode', 
	xtype:'graphicvcode', 
	isLoader:true,    
	emptyText : '请输入验证码', 
	codeUrl: 'http://localhost:8080/tool/getGraphicVcode',   
	listeners:{       
	afterrender: function (thisField, eOpts ) {      
	this.codeEl = thisField.getEl().createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});            this.codeEl.addCls('x-form-graphicvcode');   
	this.codeEl.on('click', this.loadCodeImg, this);      
	if (this.isLoader) this.loadCodeImg();     
	}   
	}, 
	alignErrorIcon: function() {    
	this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);  
	},  
	loadCodeImg: function() {     
	this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });   
}});
```

继承 Ext.form.field.Text， 在afterrender事件，也就是组件渲染完成之后创建一个图片的标签加在后面
通过codeUrl指定验证码图片的地址， 在loadCodeImg 设置图片地址的时候加上一个id= 随机字串的目的是为了避免缓存， 每次都从服务器中获取新的图片。
以上需要的样式设置：
```css
CheckCode{ 
float:left;
}
.x-form-graphicvcode{
width:73px;
height:20px;
vertical-align:middle;
cursor:pointer;
float:left; 
margin-left:7px;
}
```

完整的效果如本篇开头所示。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Spring Boot+Ext JS 实现图形验证码

网站导航