首页 友情链接

图片验证码的生成和使用

时间 2018/12/23 17:44:21 加载中...

原理

后台生成 一张base64的图片，一个当前时间，还有一个token，token生成方式为 md5加密(图片内容+当前时间+一个固定的随机数)，
然后将图片，时间，和 token 传递到前端页面。图片是显示给用户看的，用户输入正确的图片验证码后，将“用户输入的验证码”、“时间”、“token”传递给后台，
根据之前的token计算方式，计算md5加密(用户输入的验证码+时间+一个固定的随机数)，如果生成的token和页面传递回来的token相同则说明 验证码是正确的。

前端页面只是知道 时间 和 token，如果随意仿造一个 验证码，必须将此验证码对应的 token也伪造出来。

因为有一个固定的随机数，且如果不知道算法的话，根本无法伪造。

加密算法(图片内容 + 时间 + 一个固定的随机数)=token
加密算法(用户输入图片内容 + 时间 + 一个固定的随机数)=用户输入内容得到的token

这里的【一个固定的随机数】就是密钥了，当然，如果算法和随机数被内部开发泄露出去，
那也相当于完蛋了，所以，这个随机数可以定期并更。

同样的，此种思想还经常用在 接口访问 限制中，为了防止接口的乱调用，每个调用方有会分配一个appId 和 appKey， 相当于给你小明一个密钥是abc，给你小花一个密钥是dfe
这里的appId 指的就是小明， appKey 就是abc。

原来调用接口，一个地址+传递的请求参数 大伙都可以调用，
现在调用成了 小明调用的时候 还需要传递过来 appId 和 根据自己的 appKey 生成的一个 Token。
当然了，这里就需要小明也知道 Token 的生成方法了，同理 小花 也知道，即大家都知道，

所以说 如果小明的 appKey 被别人知道，那别人就可以假冒他了。

token 的计算方法假设为
加密算法(参数内容 + 时间 + appId + appKey )=token

现在调用方传递的过来的有

参数内容
时间
appId
token

appKey是保密的，后台得到传递过来的数据后，再根据加密算法(参数内容 + 时间 + appId + 服务器端根据appId查询的appKey )= 服务器端计算的token
计算一下 token 和 传过来的 token 是否一致，如果不一致，则表明请求参数可能篡改过，或者 appKey 不对
这个 token 是随便写的一个，这个人不是我们授权的调用方。

Java实现

图片验证码

生成一个带有验证码的图片，涉及到对图片的操作，可参考 图片操作练习

生成验证码图片

  1. private String darwImg(String content, int imgWidth, int imgHeight) throws IOException {
  2.     // 创建一个画布
  3.     BufferedImage bufferedImage = new BufferedImage(imgWidth, imgHeight, BufferedImage.TYPE_INT_RGB);
  4.     // 创建一个画笔，要开始画东西了
  5.     Graphics2D g = bufferedImage.createGraphics();
  6.     // 画布背景色
  7.     g.setBackground(Color.WHITE);
  8.     g.clearRect(0, 0, imgWidth, imgHeight);
  10.     g.setPaint(new GradientPaint(0, 0, new Color(28, 64, 124), imgWidth, imgHeight, new Color(46, 109, 163)));
  11.     // g.setPaint(Color.BLUE);
  12.     g.fillRect(0, 0, imgWidth, imgHeight);
  14.     // 画笔颜色
  15.     g.setColor(Color.white);
  16.     // 画笔字体
  17.     g.setFont(new Font("Arial", Font.PLAIN, imgHeight - 10));
  19.     String text = content;
  20.     FontMetrics metrics = g.getFontMetrics(g.getFont());
  21.     int xPos = (imgWidth - metrics.stringWidth(text)) / 2;
  22.     int yPos = ((imgHeight - metrics.getHeight()) / 2) + metrics.getAscent();
  23.     g.drawString(text, xPos, yPos);
  25.     // 干扰
  26.     addLine(g, imgWidth, imgHeight);
  27.     //addOtherText(g, imgWidth, imgHeight, text);
  29.     g.dispose();
  31.     return saveToBase64Img(bufferedImage);
  32. }
  34. private void addOtherText(Graphics2D g, int imgWidth, int imgHeight, String text) {
  35.     Random randomer = new Random();
  37.     for (int i = 0; i < text.length(); i++) {
  38.         char item = text.charAt(i);
  40.         int pointX = randomer.nextInt(imgWidth);
  41.         int pointY = randomer.nextInt(imgHeight);
  42.         g.setFont(new Font("Arial", Font.PLAIN, imgHeight - 25));
  43.         g.drawString(Character.toString(item), pointX, pointY);
  44.     }
  45. }
  47. private void addLine(Graphics2D g, int imgWidth, int imgHeight) {
  48.     int pointNum = 10;
  49.     Random randomer = new Random();
  51.     for (int i = 0; i < pointNum; i++) {
  52.         int pointX1 = randomer.nextInt(imgWidth);
  53.         int pointY1 = randomer.nextInt(imgHeight);
  54.         int pointX2 = randomer.nextInt(imgWidth);
  55.         int pointY2 = randomer.nextInt(imgHeight);
  56.         g.drawLine(pointX1, pointY1, pointX2, pointY2);
  57.     }
  58. }
  60. private String saveToBase64Img(BufferedImage bufferedImage) throws IOException {
  62.     ByteArrayOutputStream output = new ByteArrayOutputStream();
  64.     ImageIO.write(bufferedImage, "png", output);
  65.     output.flush();
  66.     output.close();
  68.     byte[] byteArr = output.toByteArray();
  70.     String str = Base64.getEncoder().encodeToString(byteArr);
  71.     String imgStr = new StringBuilder().append("data:image/png;base64,").append(str).toString();
  72.     return imgStr;
  73. }

随机数

  1. public String getCode(int codeLength) {
  3.     Random randomer = new Random();
  4.     StringBuilder builder = new StringBuilder();
  6.     char[] elements = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  7.             'S', 'T', 'V', 'U', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
  8.             'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8',
  9.             '9' };
  11.     for (int i = 0; i < codeLength; i++) {
  12.         int index = randomer.nextInt(elements.length);
  13.         builder.append(elements[index]);
  14.     }
  16.     return builder.toString();
  17. }

返回一个验证码对象

  1. /**
  2.  * @author admin
  3.  * 图像验证码dto
  4.  */
  5. public class ImageCaptchaDTO {
  7.     private String image;
  8.     private String md5;
  9.     private String time;
  11.     public ImageCaptchaDTO(String image, String md5, String time) {
  12.         super();
  13.         this.image = image;
  14.         this.md5 = md5;
  15.         this.time = time;
  16.     }
  18.     public String getImage() {
  19.         return image;
  20.     }
  21.     public void setImage(String image) {
  22.         this.image = image;
  23.     }
  24.     public String getMd5() {
  25.         return md5;
  26.     }
  27.     public void setMd5(String md5) {
  28.         this.md5 = md5;
  29.     }
  30.     public String getTime() {
  31.         return time;
  32.     }
  33.     public void setTime(String time) {
  34.         this.time = time;
  35.     }
  36. }
  38. public ImageCaptchaDTO getImageCaptcha() throws IOException {
  39.     String code = getCode(4);
  40.     String img = darwImg(code, 113, 45);
  41.     String time = new SimpleDateFormat("yyyyMMdd HH:mm:ss").format(new Date());
  42.     String md5 = md5Cal(code, time);
  44.     return new ImageCaptchaDTO(img, md5, time);
  45. }
  47. public boolean checkCode(String code, String time, String md5) {
  48.     if (md5Cal(code, time).equals(md5))
  49.         return true;
  50.     else
  51.         return false;
  52. }
  54. private String md5Cal(String code, String time) {
  55.     return DigestUtils.md5Hex(code.toLowerCase() + time + "540de77bc32847828b85c84217ca4c32");
  56. }

Spring Boot 下使用

codeService.java

将上面代码放到一个 codeService.java 中。

ICodeService.java

  1. import java.io.IOException;
  3. import com.sqber.personMgr.entity.ImageCaptchaDTO;
  5. public interface ICodeService {
  6.     /**
  7.      * @param codeLength
  8.      *            随机验证码的长度
  9.      * @return 由大小写字母和数字组成的字符串
  10.      */
  11.     String getCode(int codeLength);
  13.     boolean checkCode(String code, String time, String md5);
  15.     ImageCaptchaDTO getImageCaptcha() throws IOException;
  16. }

CodeService.java

  1. import java.awt.Color;
  2. import java.awt.Font;
  3. import java.awt.FontMetrics;
  4. import java.awt.GradientPaint;
  5. import java.awt.Graphics2D;
  6. import java.awt.image.BufferedImage;
  7. import java.io.ByteArrayOutputStream;
  8. import java.io.IOException;
  9. import java.text.SimpleDateFormat;
  10. import java.util.Base64;
  11. import java.util.Date;
  12. import java.util.Random;
  14. import javax.imageio.ImageIO;
  16. import com.sqber.personMgr.bll.ICodeService;
  17. import org.apache.commons.codec.digest.DigestUtils;
  18. import org.springframework.stereotype.Service;
  20. import com.sqber.personMgr.entity.ImageCaptchaDTO;
  22. @Service
  23. public class CodeService implements ICodeService {
  25.     @Override
  26.     public String getCode(int codeLength) {
  28.         Random randomer = new Random();
  29.         StringBuilder builder = new StringBuilder();
  31.         char[] elements = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  32.                 'S', 'T', 'V', 'U', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
  33.                 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8',
  34.                 '9' };
  36.         for (int i = 0; i < codeLength; i++) {
  37.             int index = randomer.nextInt(elements.length);
  38.             builder.append(elements[index]);
  39.         }
  41.         return builder.toString();
  42.     }
  44.     public ImageCaptchaDTO getImageCaptcha() throws IOException {
  45.         String code = getCode(4);
  46.         String img = darwImg(code, 113, 45);
  47.         String time = new SimpleDateFormat("yyyyMMdd HH:mm:ss").format(new Date());
  48.         String md5 = md5Cal(code, time);
  50.         return new ImageCaptchaDTO(img, md5, time);
  51.     }
  53.     public boolean checkCode(String code, String time, String md5) {
  54.         if (md5Cal(code, time).equals(md5))
  55.             return true;
  56.         else
  57.             return false;
  58.     }
  60.     private String md5Cal(String code, String time) {
  61.         return DigestUtils.md5Hex(code.toLowerCase() + time + "540de77bc32847828b85c84217ca4c32");
  62.     }
  64.     private String darwImg(String content, int imgWidth, int imgHeight) throws IOException {
  65.         // 创建一个画布
  66.         BufferedImage bufferedImage = new BufferedImage(imgWidth, imgHeight, BufferedImage.TYPE_INT_RGB);
  67.         // 创建一个画笔，要开始画东西了
  68.         Graphics2D g = bufferedImage.createGraphics();
  69.         // 画布背景色
  70.         g.setBackground(Color.WHITE);
  71.         g.clearRect(0, 0, imgWidth, imgHeight);
  73.         g.setPaint(new GradientPaint(0, 0, new Color(28, 64, 124), imgWidth, imgHeight, new Color(46, 109, 163)));
  74.         // g.setPaint(Color.BLUE);
  75.         g.fillRect(0, 0, imgWidth, imgHeight);
  77.         // 画笔颜色
  78.         g.setColor(Color.white);
  79.         // 画笔字体
  80.         g.setFont(new Font("Arial", Font.PLAIN, imgHeight - 10));
  82.         String text = content;
  83.         FontMetrics metrics = g.getFontMetrics(g.getFont());
  84.         int xPos = (imgWidth - metrics.stringWidth(text)) / 2;
  85.         int yPos = ((imgHeight - metrics.getHeight()) / 2) + metrics.getAscent();
  86.         g.drawString(text, xPos, yPos);
  88.         // 干扰
  89.         addLine(g, imgWidth, imgHeight);
  90.         //addOtherText(g, imgWidth, imgHeight, text);
  92.         g.dispose();
  94.         return saveToBase64Img(bufferedImage);
  95.     }
  97.     private void addOtherText(Graphics2D g, int imgWidth, int imgHeight, String text) {
  98.         Random randomer = new Random();
  100.         for (int i = 0; i < text.length(); i++) {
  101.             char item = text.charAt(i);
  103.             int pointX = randomer.nextInt(imgWidth);
  104.             int pointY = randomer.nextInt(imgHeight);
  105.             g.setFont(new Font("Arial", Font.PLAIN, imgHeight - 25));
  106.             g.drawString(Character.toString(item), pointX, pointY);
  107.         }
  108.     }
  110.     private void addLine(Graphics2D g, int imgWidth, int imgHeight) {
  111.         int pointNum = 10;
  112.         Random randomer = new Random();
  114.         for (int i = 0; i < pointNum; i++) {
  115.             int pointX1 = randomer.nextInt(imgWidth);
  116.             int pointY1 = randomer.nextInt(imgHeight);
  117.             int pointX2 = randomer.nextInt(imgWidth);
  118.             int pointY2 = randomer.nextInt(imgHeight);
  119.             g.drawLine(pointX1, pointY1, pointX2, pointY2);
  120.         }
  121.     }
  123.     private String saveToBase64Img(BufferedImage bufferedImage) throws IOException {
  125.         ByteArrayOutputStream output = new ByteArrayOutputStream();
  127.         ImageIO.write(bufferedImage, "png", output);
  128.         output.flush();
  129.         output.close();
  131.         byte[] byteArr = output.toByteArray();
  133.         String str = Base64.getEncoder().encodeToString(byteArr);
  134.         String imgStr = new StringBuilder().append("data:image/png;base64,").append(str).toString();
  135.         return imgStr;
  136.     }
  138. }

验证码对象

  1. package com.sqber.personMgr.entity;
  3. /**
  4.  * @author admin
  5.  * 图像验证码dto
  6.  */
  7. public class ImageCaptchaDTO {
  9.     private String image;
  10.     private String md5;
  11.     private String time;
  13.     public ImageCaptchaDTO(String image, String md5, String time) {
  14.         super();
  15.         this.image = image;
  16.         this.md5 = md5;
  17.         this.time = time;
  18.     }
  20.     public String getImage() {
  21.         return image;
  22.     }
  23.     public void setImage(String image) {
  24.         this.image = image;
  25.     }
  26.     public String getMd5() {
  27.         return md5;
  28.     }
  29.     public void setMd5(String md5) {
  30.         this.md5 = md5;
  31.     }
  32.     public String getTime() {
  33.         return time;
  34.     }
  35.     public void setTime(String time) {
  36.         this.time = time;
  37.     }
  38. }

控制器调用

假设控制器为 HomeCtroller，引入 ICodeService 后，新增方法

  1. @ResponseBody
  2. @GetMapping("home/captcha")
  3. public BaseResponse<ImageCaptchaDTO> getCaptcha() {
  4.     BaseResponse<ImageCaptchaDTO> response = new BaseResponse<ImageCaptchaDTO>();
  6.     ImageCaptchaDTO imageCap = null;
  7.     try {
  8.         imageCap = codeService.getImageCaptcha();
  9.     } catch (IOException e) {
  10.         response.setCode(500);
  11.         response.setMsg("内部错误");
  12.         log.error(e.getStackTrace() + e.getMessage());
  13.     }
  15.     response.setCode(200);
  16.     response.setData(imageCap);
  18.     return response;
  19. }

另外提供下 BaseResponse.java

  1. public class BaseResponse<T> {
  3.     private int code;
  4.     private String msg;
  5.     private T data;
  7.     public BaseResponse(){
  8.         this.code = 200;
  9.     }
  11.     public int getCode() {
  12.         return code;
  13.     }
  15.     public void setCode(int code) {
  16.         this.code = code;
  17.     }
  19.     public String getMsg() {
  20.         return msg;
  21.     }
  23.     public void setMsg(String msg) {
  24.         this.msg = msg;
  25.     }
  27.     public T getData() {
  28.         return data;
  29.     }
  31.     public void setData(T data) {
  32.         this.data = data;
  33.     }
  34. }

前台

前台通过控制器接口 home/captcha 来获取到控制器对象
html

  1. <img src="" id="ImageCatpcha" alt="正在加载" class="yzm"/>
  2. <el-input placeholder="验证码" class="dis-table" name="code">
  3. <input type='hidden' name='time'/>
  4. <input type='hidden' name='md5'/>

javascript

  1. var getCaptcha = function () {
  2.     $.get(contextRoot + "home/captcha?v=" + new Date(), function (data) {
  3.         if (data.code == 200) {
  4.             $("#ImageCatpcha").attr("src", data.data.image);
  5.             $("input[name=time]").val(data.data.time);
  6.             $("input[name=md5]").val(data.data.md5);
  7.         }
  8.         else {
  9.             alert("获取图片验证码失败,请重试!");
  10.         }
  11.     });
  12. }
  13. getCaptcha();
  14. $("#ImageCatpcha").click(getCaptcha);

表单提交的时候，将 验证码、md5值、时间 传递到后台，通过 codeService 的 checkCode 方法来验证即可。

扫码分享
版权说明
作者：SQBER
文章来源：http://www.sqber.com/articles/image-verification-code.html
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
sqber 2017-2021 冀ICP备17029815 站点地图