看别人的博客，自己实现了一个网站验证码，这里提供一下我自己的理解
思路
我们需要由服务端生成这个验证码图片，然后展示在网页上，并且自己记录这个图片的文字，用于用户填写以后校验。为了对应到同时登录的用户，我们还需要记录一个对应的关系，所以页面应该生成一个唯一标识，在生成验证码和登录的时候一并提交。
1. 先写生成验证码的代码
@RequestMapping("genCode")
public void genCZCode(HttpServletRequest request, HttpServletResponse response){
logger.info("genCode参数 : " + JSON.toJSONString(request.getParameterMap()));
try {
System.setProperty("java.awt.headless", "true");
// 响应头信息
response.setHeader("Pragma", "No-Cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expries", 0);
String uuid = request.getParameter("uuid");
// 随机数生成类
Random random = new Random();
// 定义验证码的位数
int size = 5;
// 定义变量保存生成的验证码
StringBuilder vCode = new StringBuilder();
char c;
// 产生验证码
for (int i = 0; i < size; i++) {
// 产生一个26以内的随机整数
int number = random.nextInt(26);
// 如果生成的是偶数，则随机生成一个数字
if (number % 2 == 0) {
c = (char) ('0' + (char) ((int) (Math.random() * 10)));
// 如果生成的是奇数，则随机生成一个字母
} else {
c = (char) ((char) ((int) (Math.random() * 26)) + 'A');
}
vCode.append(c);
}
// 保存生成的5位验证码(这里正常应该保存到数据库或者redis，我这里只是做一个demo)
FileUtils.touch(new File("C:/Users/yantao/Desktop/user.info"));
FileUtils.writeByteArrayToFile(new File("C:/Users/yantao/Desktop/user.info"), (uuid + "-" + vCode).getBytes());
System.out.println(uuid + "-" + vCode);
// 验证码图片的生成
// 定义图片的宽度和高度
int width = (int) Math.ceil(size * 20);
int height = 50;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取图片的上下文
Graphics gr = image.getGraphics();
// 设定图片背景颜色
gr.setColor(Color.WHITE);
gr.fillRect(0, 0, width, height);
// 设定图片边框
gr.setColor(Color.GRAY);
gr.drawRect(0, 0, width - 1, height - 1);
// 画十条干扰线
for (int i = 0; i < 5; i++) {
int x1 = random.nextInt(width);
int y1 = random.nextInt(height);
int x2 = random.nextInt(width);
int y2 = random.nextInt(height);
gr.setColor(randomColor());
gr.drawLine(x1, y1, x2, y2);
}
// 设置字体，画验证码
gr.setColor(randomColor());
gr.setFont(randomFont());
gr.drawString(vCode.toString(), 10, 22);
// 图像生效
gr.dispose();
// 输出到页面
ImageIO.write(image, "PNG", response.getOutputStream());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
private Random r = new Random();
/**
* 生成随机的颜色
*/
private Color randomColor() {
int red = r.nextInt(150);
int green = r.nextInt(150);
int blue = r.nextInt(150);
return new Color(red, green, blue);
}
/**
* 生成随机的字体
*/
private Font randomFont() {
int index = r.nextInt(fontNames.length);
// 生成随机的字体名称
String fontName = fontNames[index];
int style = r.nextInt(4);
// 生成随机字号, 24 ~ 28
int size = r.nextInt(3) + 24;
return new Font(fontName, style, size);
}
2. 然后是页面的代码
页面有两个请求后端的地方，一个是获取刷新验证码，一个是登录的请求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>验证码demo</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="login-page">
<section class="login-contain" style="border-radius:15px">
<h1>登录</h1>
<div class="form-content">
<input onkeydown="KeyDown()" autocomplete="off"
type="text" placeholder="用户名..." class="input1" id="adminName"/><br/>
<input onkeydown="KeyDown()" autocomplete="off"
type="password" placeholder="密码..." class="input1" id="adminPwd"/><br/>
<input onkeydown="KeyDown()" type="text" maxlength="5" id="code">
<div>
<img id="codeimg" onclick="flushimg()">
</div>
<br/>
<button style="background-color: #4BCFA2;padding: 12px 15px;" class="btn btn-lg btn-block"
onclick="login()">立即登录
</button>
</div>
</section>
<div class="mask"></div>
<script type="text/javascript">
var serverWeb = "${basePath}";
var uuid = guid();
flushimg();
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r
: (r & 0x3 | 0x8);
return v.toString(16);
});
}
function flushimg() {
var imgsrc = serverWeb + "/image/genCode?v=" + Math.random() + "&uuid=" + uuid
$("#codeimg").attr("src", imgsrc)
$("#code").val("")
}
function login() {
var code = $("#code").val()
if ($("#username").val() == "" || $("#password").val() == "") {
layer.msg('请输入用户名或密码进行登录', {time: 1000});
return;
}
$.ajax({
async: false,
type: 'POST',
url: serverWeb + '/login/dologin',
contentType: "application/x-www-form-urlencoded",
data: {
account: $("#adminName").val(),
pwd: $("#adminPwd").val(),
uuid: uuid,
code: code
},
datatype: 'json',
success: function (result) {
var result = JSON.parse(result);
if (result.status == 'success') {
window.location.href = serverWeb + 'index';
} else {
if (result.msg) {
alert(result.msg)
} else {
// 登录失败
layer.msg('用户名或者密码错误，请重新登录', {time: 1000});
}
flushimg()
}
}
});
}
</script>
</body>
</html>
3. 验证的时候拿用户提交的和保存的进行比较即可
@RequestMapping(value = "dologin")
@ResponseBody
public String dologin(HttpServletRequest request) throws IOException {
JSONObject result = new JSONObject();
String uuid = request.getParameter("uuid");
String code = request.getParameter("code");
System.out.println("客户端请求的uuid：" + uuid);
System.out.println("客户端请求的code：" + code);
String fileStr = FileUtils.readFileToString(new File("C:/Users/yantao/Desktop/user.info"));
String cacheUuid = fileStr.split("-")[0];
String cacheCode = fileStr.split("-")[1];
if (uuid.equals(cacheUuid) && code.equals(cacheCode)) {
result.put("status", "success");
} else {
result.put("status", "fail");
result.put("msg", "验证失败");
}
return result.toJSONString();
}