一、图形验证码的实现
1.1 简介
常在网上晃悠的人,对下面这张图都不会陌生。特别是在注册新账号、确认交易时,它们都会频繁出现,要求我们输入正确的验证码,那这些看上去跟我们要做的事情完全无关的验证码到底有何作用呢?
其实,验证码的校验即是一个直接的图灵测试,简单的逻辑是:服务提供者向用户方提出一个较为复杂的问题,能正确回答的即是人类,回答不出的即是机器或者程序代码。这个概念基于这样一个重要假设:提出的问题要容易被人类解答,并且让机器无法解答。在当前的条件下,准确识别扭曲的图形,对于机器来说还是一个比较艰难的任务,而对于人来说,则相对可以接受。yahoo则在自己的邮箱登过程中全世界首创的应用了图形化验证码这个产品,很快解决了yahoo邮箱上的垃圾邮件问题,从此图形类验证码开始在互联网世界无处不在。
1.2 图形验证码实现
图形验证码前后台交互流程比较简单,主要分为以下三步:
- 客户端请求到页面的同时,向服务端发起请求,服务端生成验证码将验证码字符,存入到session中以备客户端的校验。与此同时,服务端将生成的验证码图形给到前端;
- 前端获取到验证码图形,渲染展示到页面。用户识别图形验证码后,提交验证码的字符到服务端;
- 服务端接收到验证码校验的请求,将接收到的字符与session中存储的验证码字符进行比对,并将比对结果返回到前端。
大致流程如下图所示:
实现流程如下:
1.展示验证码已经提交验证码字符的页面简单结构
<html>
<head></head>
<body>
<div class="form-group col-lg-6">
<label for="id" class="col-sm-4 control-label"> 验证码: </label>
<div class="col-sm-8">
<input type="text" id="code" name="code" class="form-control" style="width:250px;" />
<img id="imgObj" alt="验证码" src="/article/getValidateCode" onclick="changeImg()" />
<a href="#" onclick="changeImg()">换一张</a>
</div>
</div>
</body>
</html>
2.前端请求获取验证码图片的js逻辑
< script type = "text/javascript" >
// 刷新图片
function changeImg() {
var imgSrc = $("#imgObj");
var src = imgSrc.attr("src");
imgSrc.attr("src", changeUrl(src));
}
//为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳
function changeUrl(url) {
var timestamp = (new Date()).valueOf();
var index = url.indexOf("?", url);
if (index > 0) {
url = url.substring(0, url.indexOf(url, "?"));
}
if ((url.indexOf("&") >= 0)) {
url = url + "×tamp=" + timestamp;
} else {
url = url + "?timestamp=" + timestamp;
}
return url;
}
< /script>
3.后端接收前端获取验证码图片的请求,生成验证码并响应到前端
/**
* 响应验证码页面
*
* @author https://www.veesing.com
*/
@RequestMapping(value = "/getValidateCode")
public String getValidateCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 设置响应的类型格式为图片格式
response.setContentType("image/jpeg");
// 禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
HttpSession session = request.getSession();
ValidateCodeUtils vCode = n