秒杀25–安全优化之图形验证码

数学公式验证码：好处：

• 可以防止那种机器人(或者一些软件来秒杀)

• 在秒杀的场景里，如果说没有验证码，等秒杀开始之后，用户只需要点击鼠标，如果用户量很大的话，这时候可能统一时刻的请求会非常大的。有验证码时，会消耗时间的，这下大量的并发就会稍微分散在一定时间内。

• 同时也加入了一种保护：如果验证码不对是进不去的。

其简要实现思路：

点击秒杀之前，先输入验证码，分散用户的请求：
（点击秒杀之前，先输入验证码，分散用户的请求。具体实现是服务端生成类似1+2-3的验证码，把结果计算出来存至服务端（缓存），把验证码图片发至客户端，此后客户端在请求秒杀地址前输入验证码值发请求验证，（去缓存里面取得值验证是否与用户输入相同），验证通过才会动态生成秒杀地址给前端。）

• 添加生成验证码的接口
• 在获取秒杀路径的时候，验证验证码
• ScriptEngine使用

1，先设置页面：
（在商品详情页面加入验证码图片标签，指定Id，再加入验证码输入框input组件，并初始化它们的属性为不可见的，因为一开始验证码和输入框是不可见的（只有秒杀开始才会可见），图片可以点击刷新图片，所以定义refreshVCode方法来刷新图片）

<div class="row"><div class="form-inline"><img id="verifyCodeImg" width="80" height="32"  style="display:none" onclick="refreshVerifyCode()"/><input id="verifyCode"  class="form-control" style="display:none"/><button class="btn btn-primary" type="button" id="buyButton"onclick="getMiaoshaPath()">立即秒杀</button></div></div><input type="hidden" name="goodsId"  id="goodsId" />

function countDown(){var remainSeconds = $("#remainSeconds").val();var timeout;if(remainSeconds > 0){//秒杀还没开始，倒计时$("#buyButton").attr("disabled", true);$("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");timeout = setTimeout(function(){$("#countDown").text(remainSeconds - 1);$("#remainSeconds").val(remainSeconds - 1);countDown();},1000);}else if(remainSeconds == 0){//秒杀进行中$("#buyButton").attr("disabled", false);if(timeout){clearTimeout(timeout);}$("#miaoshaTip").html("秒杀进行中");//添加验证码$("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val());$("#verifyCodeImg").show();$("#verifyCode").show();}else{//秒杀已经结束，将秒杀按钮设置为不可点击$("#buyButton").attr("disabled", true);$("#miaoshaTip").html("秒杀已经结束");$("#verifyCodeImg").hide();$("#verifyCode").hide();}
}

2，再是关于controller的设置：
（请求中传参为goodsId，然后可以根据用户id和goodsId生成数学公式验证码，然后将这个验证码图片response的输出流输出至前端。）

@RequestMapping(value="/verifyCode", method=RequestMethod.GET)@ResponseBodypublic Result<String> getMiaoshaVerifyCod(HttpServletResponse response,MiaoshaUser user,@RequestParam("goodsId")long goodsId) {if(user == null) {return Result.error(CodeMsg.SESSION_ERROR);}try {BufferedImage image  = miaoshaService.createVerifyCode(user, goodsId);OutputStream out = response.getOutputStream();ImageIO.write(image, "JPEG", out);out.flush();out.close();return null;}catch(Exception e) {e.printStackTrace();return Result.error(CodeMsg.MIAOSHA_FAIL);}}
}

3，再是service的设置：
（图片是利用BufferedImage 类生成，指定高度与宽度，利用Graphics做画笔，填充颜色，画出边界线等操作，然后利用drawString方法将我们随机拼接成字符串写在生成的图片上，还要计算出字符串的值存在缓存里面。）

public BufferedImage createVerifyCode(MiaoshaUser user, long goodsId) {if(user == null || goodsId <=0) {return null;}int width = 80;int height = 32;//create the imageBufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// set the background colorg.setColor(new Color(0xDCDCDC));g.fillRect(0, 0, width, height);// draw the borderg.setColor(Color.black);g.drawRect(0, 0, width - 1, height - 1);// create a random instance to generate the codesRandom rdm = new Random();// make some confusionfor (int i = 0; i < 50; i++) {int x = rdm.nextInt(width);int y = rdm.nextInt(height);g.drawOval(x, y, 0, 0);}// generate a random code  //生成验证码String verifyCode = generateVerifyCode(rdm);g.setColor(new Color(0, 100, 0));g.setFont(new Font("Candara", Font.BOLD, 24));//将验证码写在图片上g.drawString(verifyCode, 8, 24);g.dispose();//计算存值 //把验证码存到redis中  int rnd = calc(verifyCode);redisService.set(MiaoshaKey.getMiaoshaVerifyCode, user.getId()+","+goodsId, rnd);//输出图片	return image;}

注意：对于数学公式的生成，方法generateVerifyCode实现，生成3个0到9之间的随机数，然后在生成一个字符数组，用于存放 + - * （加减乘）三个数学运算符，随机选中两个字符，然后对其进行拼接 成一个字符串，数+运算符+数+运算符+数，返回这个字符串。

private static char[] ops = new char[] {'+', '-', '*'};/*** + - * * */private String generateVerifyCode(Random rdm) {int num1 = rdm.nextInt(10);int num2 = rdm.nextInt(10);int num3 = rdm.nextInt(10);char op1 = ops[rdm.nextInt(3)];char op2 = ops[rdm.nextInt(3)];String exp = ""+ num1 + op1 + num2 + op2 + num3;return exp;}
}

利用scriptEngine类，调用JavaScript的eval() 方法，计算这个字符串公式的值，将这个值保存到redis上面去（用户下次发送验证请求的时候，直接去缓存里面取出并验证即可）注意：eval() 计算得到的是double 值，但我们需要的int 值，需要强转。

private static int calc(String exp) {try {ScriptEngineManager manager = new ScriptEngineManager();ScriptEngine engine = manager.getEngineByName("JavaScript");return (Integer)engine.eval(exp);}catch(Exception e) {e.printStackTrace();return 0;}}

4，最后，在前端进行设置：
（前端得到这个验证码图片，显示该验证码，然后用户需要输入验证码将这个验证码作为参数，与获取秒杀地址请求一起传输给后端（校验的操作在获取秒杀地址之前），后端接收到参数，进行验证码比对，缓存中取出该验证码进行校验。如果不通过，不生成秒杀接口地址，直接返回验证码错误信息。）

关键是：verifyCode:$("#verifyCode").val()

function getMiaoshaPath(){var goodsId = $("#goodsId").val();g_showLoading();$.ajax({url:"/miaosha/path",type:"GET",data:{goodsId:goodsId,verifyCode:$("#verifyCode").val()},success:function(data){if(data.code == 0){var path = data.data;doMiaosha(path);}else{layer.msg(data.msg);}},error:function(){layer.msg("客户端请求有误");}});
}

注意：在图片上定义个oncilck 操作，点击后在请求获取图片验证码的接口，但是浏览器会有缓存，要加上timestamp 这个参数，浏览器才会真正发送请求，不然只是去缓存里面拿。

//刷新验证码,浏览器具有缓存---所以加一个参数timestamp
function refreshVerifyCode(){$("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val()+"&timestamp="+new Date().getTime());
}

验证逻辑：

客户端在请求秒杀地址前输入验证码值发请求验证，（去缓存里面取得值验证是否与用户输入相同），验证通过才会动态生成秒杀地址给前端。

也就是关键：if(codeOld == null || codeOld - verifyCode != 0 )

public boolean checkVerifyCode(MiaoshaUser user, long goodsId, int verifyCode) {if(user == null || goodsId <=0) {return false;}Integer codeOld = redisService.get(MiaoshaKey.getMiaoshaVerifyCode, user.getId()+","+goodsId, Integer.class);if(codeOld == null || codeOld - verifyCode != 0 ) {return false;}redisService.delete(MiaoshaKey.getMiaoshaVerifyCode, user.getId()+","+goodsId);return true;}

测试结果：

并且点击验证码时可以重新生成一个新的验证码：

特别感谢：
参考：https://blog.csdn.net/Brad_PiTt7/article/details/90712010