用戶登錄時(shí)，經(jīng)常會(huì)使用到驗(yàn)證碼，以下簡(jiǎn)單介紹一下驗(yàn)證碼的實(shí)現(xiàn)過程。
1、用戶登錄jsp
<form action="<%=path%>/login/login.do" method="post">
<input name="username" id="username" onclick="$('#error').val('');" type="text" class="yhm"/>
<input name="password" type="password" id="password" onclick="$('#error').val('');" class="yhm pswd"/>
<input type="text" name="code" onclick="$('#error').val('');" class="yzhengm"/><img id="img1" title="點(diǎn)擊獲取新驗(yàn)證碼" src="<%=path%>/verifycode/getVerifyCodeImage.do" onclick="changeimg()" width="62" height="28" alt="" style="display:inline-block;">
<input type="submit" class="dengl" value=""/>
</form>
上述頁面中，點(diǎn)擊驗(yàn)證碼可更新changeimg()方法js實(shí)現(xiàn)如下
先要引入jquery-3.3.1.min.js、將隨機(jī)字符轉(zhuǎn)化成圖片相關(guān)的DD_belatedPNG_0.0.8a-min.js。
然后在js代碼塊中需要引入DD_belatedPNG.fix('div, ul, img, li, input,p,ul,ol,h1,h2,h3,a,span,i');
<script type="text/javascript" src="<%=path %>/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-3.3.1.min.js"></script>
<script language="javascript" type="text/javascript">
function changeimg(){
var img=document.getElementById("img1");
//防止頁面緩存
img.src="<%=path%>/verifycode/getVerifyCodeImage.do"+ "?r="+Math.random();
}
DD_belatedPNG.fix('div, ul, img, li, input,p,ul,ol,h1,h2,h3,a,span,i');
</script>
DD_belatedPNG_0.0.8a-min.js可在以下路徑下載。
https://pan.baidu.com/s/1_gKOFhjuzKrCX4NSt67evQ
2、登錄頁面加載和點(diǎn)擊驗(yàn)證碼時(shí)，同時(shí)調(diào)用Controller類下的/verifycode/getVerifyCodeImage.do
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping(value = "/verifycode")
public class VerifyCodeController {
/**
* Controller Method
*/
@RequestMapping(value = "/getVerifyCodeImage.do")
public void getVerifyCodeImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 設(shè)置驗(yàn)證碼字符的字體和字號(hào)。
Font mFont = new Font("Arial Black", Font.PLAIN, 22);
//清除緩存，每次訪問該頁面時(shí)都從服務(wù)器端讀取
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
// 設(shè)置驗(yàn)證碼圖片的長度和高度。
int width = 86, height = 40;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
//畫圖畫板
Graphics g = image.getGraphics();
//定義一個(gè)隨機(jī)數(shù)
Random random = new Random();
//設(shè)置畫板背景顏色
// g.setColor(getRandColor(200, 250));
g.setColor(new Color(160, 177, 185));
//設(shè)置畫板的填充范圍
g.fillRect(1, 1, width - 1, height - 1);
// g.setColor(new Color(102, 102, 102));
g.drawRect(0, 0, width - 1, height - 1);
//設(shè)置字體
g.setFont(mFont);
//顯示字符串，4位長度。
String sRand = "";
for (int i = 0; i < 4; i++) {
String tmp = getRandomChar();
sRand += tmp;
//設(shè)置每個(gè)數(shù)字的顏色
g.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
//在畫板上寫數(shù)字，起始位置
g.drawString(tmp, 20 * i + 5, 27);
}
HttpSession session = request.getSession();
// 把驗(yàn)證碼防到session中，用來前臺(tái)對(duì)比。
session.setAttribute("verifycode", sRand.toLowerCase());
// System.out.println(sRand.toLowerCase()+"--------------------------》");
//顯示圖片
g.dispose();
//轉(zhuǎn)換成一張圖片，格式為JPEG
ImageIO.write(image, "JPEG", response.getOutputStream());
}
/**
* 隨機(jī)獲得顏色，RGB格式
*
* @param fc
* @param bc
* @return
*/
Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
private String getRandomChar() {
int rand = (int) Math.round(Math.random() * 2);
long itmp = 0;
char ctmp = '\u0000';
switch (rand) {
case 1:
itmp = Math.round(Math.random() * 25 + 65);
ctmp = (char) itmp;
return String.valueOf(ctmp);
case 2:
itmp = Math.round(Math.random() * 25 + 97);
ctmp = (char) itmp;
return String.valueOf(ctmp);
default:
itmp = Math.round(Math.random() * 9);
return String.valueOf(itmp);
}
}
}
上述實(shí)現(xiàn)類中，先隨機(jī)生成一個(gè)四位數(shù)的隨機(jī)數(shù)字+字母，然后將數(shù)字放到session中，最后使用ImageIO技術(shù)將隨機(jī)字符轉(zhuǎn)化成圖片。
3、重點(diǎn)來了，用戶登錄時(shí)，需要校驗(yàn)用戶輸入的驗(yàn)證碼是否與實(shí)際驗(yàn)證碼一致
LoginController.class實(shí)現(xiàn)：
public String login(User user){
if(StringUtils.isEmpty(user.getUsername())){
request.setAttribute("error","用戶名不能為空!");
return "index";
}
if(StringUtils.isEmpty(user.getPassword())){
request.setAttribute("error","密碼不能為空!");
return "index";
}
String vcode =(String)request.getSession().getAttribute("verifycode");
if(!user.getCode().equalsIgnoreCase(vcode)){
request.setAttribute("error","驗(yàn)證碼錯(cuò)誤！");
return "index";
}
request.setAttribute("username",user.getUsername());
return loginService.checkUser(request,user);
}
上述loginService.checkUser()的實(shí)現(xiàn)可參考“SSM框架新增/修改用戶、用戶登錄時(shí)密碼加密處理及校驗(yàn)http://www.itdecent.cn/p/d9773ec61661”一文。
