图形验证码登录

验证码登录"/>

图形验证码登录

图形验证码登录

添加图片标签，进入页面访问/api/verifyCode

1.html

<img onclick="javascript:getvCode()" id="verifyimg" style="margin-left: 20px;"/><script>getvCode();/*** 获取验证码* 将验证码写到index.html页面的id = verifyimg 的地方*/function getvCode() {document.getElementById("verifyimg").src = timestamp("/api/verifyCode");}//为url添加时间戳function timestamp(url) {var getTimestamp = new Date().getTime();if (url.indexOf("?") > -1) {url = url + "&timestamp=" + getTimestamp} else {url = url + "?timestamp=" + getTimestamp}return url;};
</script>

2.Controller

package com.aaa.controller;import com.aaa.pojo.VerifyCode;
import com.aaa.service.EmployeeImpl.SimpleCharVerifyCodeGenImpl;
import com.aaa.service.IVerifyCodeGen;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@Controller
public class verifyCode{private static final Logger LOGGER = LoggerFactory.getLogger(verifyCode.class);String code;@ApiOperation(value = "验证码")@GetMapping("/verifyCode")public void verifyCode(HttpServletRequest request, HttpServletResponse response) {IVerifyCodeGen iVerifyCodeGen = new SimpleCharVerifyCodeGenImpl();try {//设置长宽VerifyCode verifyCode = iVerifyCodeGen.generate(80, 28);code = verifyCode.getCode();LOGGER.info(code);//将VerifyCode绑定sessionrequest.getSession().setAttribute("VerifyCode", code);//设置响应头response.setHeader("Pragma", "no-cache");//设置响应头response.setHeader("Cache-Control", "no-cache");//在代理服务器端防止缓冲response.setDateHeader("Expires", 0);//设置响应内容类型response.setContentType("image/jpeg");response.getOutputStream().write(verifyCode.getImgBytes());response.getOutputStream().flush();}catch (IOException e) {LOGGER.info("", e);}}
}

3.验证码实体类

package com.aaa.pojo;
import lombok.Data;/*** 验证码类*/
@Data
public class VerifyCode {private String code;private byte[] imgBytes;private long expireTime;}

4.service

package com.aaa.service;
import com.aaa.pojo.VerifyCode;
import java.io.IOException;
import java.io.OutputStream;
/*** 验证码生成接口*/
public interface IVerifyCodeGen {/*** 生成验证码并返回code，将图片写的os中** @param width* @param height* @param os* @return* @throws IOException*/String generate(int width, int height, OutputStream os) throws IOException;/*** 生成验证码对象** @param width* @param height* @return* @throws IOException*/VerifyCode generate(int width, int height) throws IOException;
}

5.serviceImpl

package com.aaa.service.EmployeeImpl;
import com.aaa.pojo.VerifyCode;
import com.aaa.service.IVerifyCodeGen;
import com.aaa.util.RandomUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;/*** 验证码实现类*/
@Service
public class SimpleCharVerifyCodeGenImpl implements IVerifyCodeGen {private static final Logger logger = LoggerFactory.getLogger(SimpleCharVerifyCodeGenImpl.class);private static final String[] FONT_TYPES = { "\u5b8b\u4f53", "\u65b0\u5b8b\u4f53", "\u9ed1\u4f53", "\u6977\u4f53", "\u96b6\u4e66" };private static final int VALICATE_CODE_LENGTH = 4;/*** 设置背景颜色及大小，干扰线** @param graphics* @param width* @param height*/private static void fillBackground(Graphics graphics, int width, int height) {// 填充背景graphics.setColor(Color.WHITE);//设置矩形坐标x y 为0graphics.fillRect(0, 0, width, height);// 加入干扰线条for (int i = 0; i < 8; i++) {//设置随机颜色算法参数graphics.setColor(RandomUtils.randomColor(40, 150));Random random = new Random();int x = random.nextInt(width);int y = random.nextInt(height);int x1 = random.nextInt(width);int y1 = random.nextInt(height);graphics.drawLine(x, y, x1, y1);}}/*** 生成随机字符** @param width* @param height* @param os* @return* @throws IOException*/@Overridepublic String generate(int width, int height, OutputStream os) throws IOException {BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics graphics = image.getGraphics();fillBackground(graphics, width, height);String randomStr = RandomUtils.randomString(VALICATE_CODE_LENGTH);createCharacter(graphics, randomStr);graphics.dispose();//设置JPEG格式ImageIO.write(image, "JPEG", os);return randomStr;}/*** 验证码生成** @param width* @param height* @return*/@Overridepublic VerifyCode generate(int width, int height) {VerifyCode verifyCode = null;try {//将流的初始化放到这里就不需要手动关闭流ByteArrayOutputStream baos = new ByteArrayOutputStream();String code = generate(width, height, baos);verifyCode = new VerifyCode();verifyCode.setCode(code);verifyCode.setImgBytes(baos.toByteArray());} catch (IOException e) {logger.error(e.getMessage(), e);verifyCode = null;}return verifyCode;}/*** 设置字符颜色大小** @param g* @param randomStr*/private void createCharacter(Graphics g, String randomStr) {char[] charArray = randomStr.toCharArray();for (int i = 0; i < charArray.length; i++) {//设置RGB颜色算法参数g.setColor(new Color(50 + RandomUtils.nextInt(100),50 + RandomUtils.nextInt(100), 50 + RandomUtils.nextInt(100)));//设置字体大小，类型g.setFont(new Font(FONT_TYPES[RandomUtils.nextInt(FONT_TYPES.length)], Font.BOLD, 26));//设置x y 坐标g.drawString(String.valueOf(charArray[i]), 15 * i + 5, 19 + RandomUtils.nextInt(8));}}
}

6.实现效果

右侧验证码显示效果，点击图片可以换图