一、什么是图片验证码？
可以参考下面这张图：
我们在一些网站登陆的时候，经常需要填写以上图片的信息。
这种图片验证方式是我们最常见的形式，它可以有效的防范恶意攻击者采用恶意工具,来进行窃取用户的密码
接下来将讲正题啦！
1.首先得有一个生成图片验证码的实体类
package com.zhetian.www.util; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random; /** * @Copyright (C)遮天网络有限公司 * @Author: YUAN HUAI XING * @qq联系方式: 11234013 * @Date 2020/4/5 18:09 * @Descripthion: **/ public class ImageVerificationCodeUtil { private int weight = 100; //验证码图片的长和宽 private int height = 40; private String text; //用来保存验证码的文本内容 private Random r = new Random(); //获取随机数对象 //private String[] fontNames = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"}; //字体数组 //字体数组 private String[] fontNames = {"Georgia"}; //验证码数组 private String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ"; /** * 获取随机的颜色 * * @return */ private Color randomColor() { int r = this.r.nextInt(225); //这里为什么是225，因为当r，g，b都为255时，即为白色，为了好辨认，需要颜色深一点。 int g = this.r.nextInt(225); int b = this.r.nextInt(225); return new Color(r, g, b); //返回一个随机颜色 } /** * 获取随机字体 * * @return */ private Font randomFont() { int index = r.nextInt(fontNames.length); //获取随机的字体 String fontName = fontNames[index]; int style = r.nextInt(4); //随机获取字体的样式，0是无样式，1是加粗，2是斜体，3是加粗加斜体 int size = r.nextInt(10) + 24; //随机获取字体的大小 return new Font(fontName, style, size); //返回一个随机的字体 } /** * 获取随机字符 * * @return */ private char randomChar() { int index = r.nextInt(codes.length()); return codes.charAt(index); } /** * 画干扰线，验证码干扰线用来防止计算机解析图片 * * @param image */ private void drawLine(BufferedImage image) { int num = r.nextInt(10); //定义干扰线的数量 Graphics2D g = (Graphics2D) image.getGraphics(); for (int i = 0; i < num; i++) { int x1 = r.nextInt(weight); int y1 = r.nextInt(height); int x2 = r.nextInt(weight); int y2 = r.nextInt(height); g.setColor(randomColor()); g.drawLine(x1, y1, x2, y2); } } /** * 创建图片的方法 * * @return */ private BufferedImage createImage() { //创建图片缓冲区 BufferedImage image = new BufferedImage(weight, height, BufferedImage.TYPE_INT_RGB); //获取画笔 Graphics2D g = (Graphics2D) image.getGraphics(); //设置背景色随机 g.setColor(new Color(255, 255, r.nextInt(245) + 10)); g.fillRect(0, 0, weight, height); //返回一个图片 return image; } /** * 获取验证码图片的方法 * * @return */ public BufferedImage getImage() { BufferedImage image = createImage(); Graphics2D g = (Graphics2D) image.getGraphics(); //获取画笔 StringBuilder sb = new StringBuilder(); for (int i = 0; i < 4; i++) //画四个字符即可 { String s = randomChar() + ""; //随机生成字符，因为只有画字符串的方法，没有画字符的方法，所以需要将字符变成字符串再画 sb.append(s); //添加到StringBuilder里面 float x = i * 1.0F * weight / 4; //定义字符的x坐标 g.setFont(randomFont()); //设置字体，随机 g.setColor(randomColor()); //设置颜色，随机 g.drawString(s, x, height - 5); } this.text = sb.toString(); drawLine(image); return image; } /** * 获取验证码文本的方法 * * @return */ public String getText() { return text; } public static void output(BufferedImage image, OutputStream out) throws IOException //将验证码图片写出的方法 { ImageIO.write(image, "JPEG", out); } }
2.在控制器中把图片响应给前端页面（ssm框架）
/** * 图片随机码 * @param request * @param response * @throws IOException */ @RequestMapping("/getVerifiCode") public void getVerifiCode(HttpServletRequest request, HttpServletResponse response) throws IOException { /* 1.生成验证码 2.把验证码上的文本存在session中 3.把验证码图片发送给客户端 */ ImageVerificationCodeUtil ivc = new ImageVerificationCodeUtil(); //用我们的验证码类，生成验证码类对象 BufferedImage image = ivc.getImage(); //获取验证码 String text = ivc.getText(); //获取随机码 HttpSession session = request.getSession(); session.setAttribute("imgcode", text); //将随机码的文本存在session中 System.out.println("文字随机码:"+text); ImageVerificationCodeUtil.output(image, response.getOutputStream());//将验证码图片响应给客户端 }
3、从session获得验证码字符（ssm框架）
/** * 登陆功能：接收用户输入的用户名跟密码（接收参数） * @param loginUser * @return */ @RequestMapping("/pageData") @ResponseBody public Result pageData(LoginUser loginUser,String code,HttpServletRequest request){ HttpSession session = request.getSession(); //获取随机数 String imgcode = (String)session.getAttribute("imgcode"); //调用业务方法 Result<LoginUser> result= loginUserService.loginUserByuserName(loginUser, code,imgcode); return result; }
4、业务层（Service）
/** * 获取用户输入的用户名与数据库进行对比是否一致 * 如果一致在获取密码对比是否一致 * 都一致再对比图片验证码与用户输入的是否一致 * @param loginUser * @return */ @Override public Result loginUserByuserName(LoginUser loginUser,String code,String imgcode) { Result<LoginUser> result = new Result<>(); String userName = loginUser.getUserName(); LoginUser loginUser1 = loginUserDao.loginUserByuserName(userName); if (code != null && code.equals(imgcode)) { if (loginUser1 != null) { String password = loginUser.getPassword(); String password1 = loginUser1.getPassword(); if (password != null && password1 != null && password1.equals(password)) { result.setCode("0000"); result.setData(loginUser); return result; } else { result.setCode("0001"); result.setMsg("用户名或密码错误！请检查后重新登陆！"); result.setSuccess(false); return result; } } else { result.setCode("0002"); result.setMsg("用户名不存在！请检查用户名后重新登陆！"); result.setSuccess(false); return result; } }else { result.setCode("0005"); result.setMsg("验证码不正确！"); result.setSuccess(false); return result; } }
5、前端代码
<div class="form-group"> <%--<label for="password">请输入验证码--%> </label> <input id="code" type="text" class="form-control" name="code" width="400px" placeholder="请输入验证码"> <a href="javascript:getVerifiCode()"> <img id="yzm_img" style="cursor:pointer;width: 100px;height: 40px;margin: 0px 0 0 5px; border-radius: 3px;" title="点击刷新验证码" src="/login/getVerifiCode" /> </a> </div>
function pageData() { var code=$("#code").val(); var userName=$("#userName").val(); var password=$("#password").val(); var aa = $("input[type='checkbox']").is(":checked");//获取选中状态 if(userName == ''){ alert("请输入用户名。"); return; } if(password == ''){ alert("请输入密码。"); return; } if(aa==true){ setCookie(); //调用设置Cookie的方法 }else if(aa==false){ setCookie(); //调用设置Cookie的方法 } var params = { userName:userName, password:password, code:code }; var url = '/login/pageData'; jQuery.ajax({ type: 'POST', contentType: 'application/x-www-form-urlencoded', url: url, data: params, dataType: 'json', success: function (data) { // alert("成功啦"); var code=data.code; if (code=="0000"){ alert("登陆成功！") location.href="/tick/list"; } else if(code=="0001"){ alert("登陆提示："+data.msg); }else if(code=="0002"){ alert("登陆提示："+data.msg); }else if(code=="0005"){ alert("登陆提示："+data.msg); }else { alert("未知异常！"); } }, error: function (data) { alert("失败啦"); } }); }
好了，这就是基本上实现的步骤，最后再上几张实现效果图↑↑↑↑↑
@注：本博客仅为个人学习笔记。 所属人：Yuan