Javaweb实现验证码
前端
添加样式
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>FM_blog</title>
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="res/css/main.css">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="layer/layer.js"></script>
编写代码
<div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>锋芒博客登录</legend>
</fieldset>
</div>
<div class="layui-container fly-marginTop">
<div class="fly-panel fly-panel-user">
<div class="layui-tab layui-tab-brief" >
<ul class="layui-tab-title">
<li class="layui-this">登入</li>
<li><a href="reg.jsp">注册</a></li>
</ul>
<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
<div class="layui-tab-item layui-show">
<div class="layui-form layui-form-pane">
<form role="form" method="POST" name="login" action="LoginServlet">
<div class="layui-form-item">
<label for="L_username" class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="userName" id="L_username" placeholder="Admin..."/>
</div>
</div>
<div class="layui-form-item">
<label for="L_pass" class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input class="layui-input" type="password" name="userPassword" placeholder="Password...">
</div>
</div>
<div class="layui-form-item">
<label for="L_vercode" class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="点击图片切换" autocomplete="off" required name = "validationCode" >
</div>
<div class="layui-form-mid">
<span><img src="ValidationCodeServlet" id="CreateCheckCode" onclick="change()"/></span>
</div>
</div>
<div class="layui-form-item">
<input class="layui-btn" type="submit" name="login" value="登录"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function change(){
document.getElementById("CreateCheckCode").src="ValidationCodeServlet?"+Math.random();
}
</script>
配置web.xml文件
<servlet>
<description>com.FM.servlet</description>
<display-name>com.FM.servlet.ValidationCodeServlet</display-name>
<servlet-name>ValidationCodeServlet</servlet-name>
<servlet-class>com.FM.servlet.ValidationCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidationCodeServlet</servlet-name>
<url-pattern>/ValidationCodeServlet</url-pattern>
</servlet-mapping>
后台
package com.FM.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.OutputStream;
import java.util.Random;
public class ValidationCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ValidationCodeServlet() {
super();
}
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获得验证码集合的长度
int charsLength = codeChars.length();
//下面3条记录是关闭客户端浏览器的缓冲区
//这3条语句都可以关闭浏览器的缓冲区,但是由于浏览器的版本不同,对这3条语句的支持也不同
//因此,为了保险起见,同时使用这3条语句来关闭浏览器的缓冲区
resp.setHeader("ragma", "No-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
//设置图形验证码的长和宽
int width = 90, height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics(); //获得用于输出文字的Graphics对象
Random random = new Random();
g.setColor(getRandomColor(180, 250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman",Font.ITALIC,height));
g.setColor(getRandomColor(120, 180));
//用户保存最后随机生成的验证码
StringBuilder validationCode = new StringBuilder();
//验证码的随机字体
String[] fontNames = {"Times New Roman","Book antiqua","Arial"};
//随机生成4个验证码
for(int i = 0; i < 4; i++){
//随机设置当前验证码的字符的字体
g.setFont(new Font(fontNames[random.nextInt(3)],Font.ITALIC,height));
//随机获得当前验证码的字符
char codeChar = codeChars.charAt(random.nextInt(charsLength));
validationCode.append(codeChar);
//随机设置当前验证码字符的颜色
g.setColor(getRandomColor(10, 100));
//在图形上输出验证码字符,x和y都是随机生成的
g.drawString(String.valueOf(codeChar), 16*i + random.nextInt(7), height-random.nextInt(6));
}
//获得HttpSession对象
HttpSession session = req.getSession();
//设置session对象5分钟失效
session.setMaxInactiveInterval(5*60);
//将验证码保存在session对象中,key为validation_code
session.setAttribute("validation_code", validationCode.toString());
//关闭Graphics对象
g.dispose();
OutputStream outS = resp.getOutputStream();
ImageIO.write(image, "JPEG", outS);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
//图形验证码的字符集,系统将随机从这个字符串中选择一些字符作为验证码
private static String codeChars = "123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";
//返回一个随机颜色
private static Color getRandomColor(int minColor, int maxColor){
Random random = new Random();
if(minColor > 255){
minColor = 255;
}
if(maxColor > 255){
maxColor = 255;
}
//获得r的随机颜色值
int red = minColor + random.nextInt(maxColor-minColor);
//g
int green = minColor + random.nextInt(maxColor-minColor);
//b
int blue = minColor + random.nextInt(maxColor-minColor);
return new Color(red,green,blue);
}
}
效果图:
Springboot添加验证码
项目结构
依赖
<!-- 验证码 -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
控制类
CommonController
package com.habse.car_position.Controller;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
/*
验证码
*/
@Controller
public class CommonController {
@Autowired
private DefaultKaptcha captchaProducer;
@GetMapping("/common/kaptcha")
public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
byte[] captchaOutputStream = null;
ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();
try {
//生产验证码字符串并保存到session中
String verifyCode = captchaProducer.createText();
httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);
BufferedImage challenge = captchaProducer.createImage(verifyCode);
ImageIO.write(challenge, "jpg", imgOutputStream);
} catch (IllegalArgumentException e) {
httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
captchaOutputStream = imgOutputStream.toByteArray();
httpServletResponse.setHeader("Cache-Control", "no-store");
httpServletResponse.setHeader("Pragma", "no-cache");
httpServletResponse.setDateHeader("Expires", 0);
httpServletResponse.setContentType("image/jpeg");
ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
responseOutputStream.write(captchaOutputStream);
responseOutputStream.flush();
responseOutputStream.close();
}
}
KaptchaConfig
package com.habse.car_position.config;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import java.util.Properties;
@Component
public class KaptchaConfig {
@Bean
public DefaultKaptcha getDefaultKaptcha(){
DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
Properties properties = new Properties();
properties.put("kaptcha.border", "no");
properties.put("kaptcha.textproducer.font.color", "blue");
properties.put("kaptcha.image.width", "140");
properties.put("kaptcha.image.height", "40");
properties.put("kaptcha.textproducer.font.size", "30");
properties.put("kaptcha.session.key", "verifyCode");
properties.put("kaptcha.textproducer.char.space", "5");
Config config = new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
前端页面
<label class="block input-icon">
<input type="text" name="verifyCode" placeholder="请输入验证码" style="width: 130px">
<img alt="单击图片刷新!" class="pointer" src="/common/kaptcha"
onclick="this.src='/common/kaptcha?d='+new Date()*1" style="margin-left: 10px;">
</label>