1.验证码的作用
防止黑客对我们的网站进行恶意攻击，例如每个网站都有注册，登入功能，别人可以通过脚本不停的注册账号，那么我们的系统将会崩溃。
增加了验证码之后，别人再写脚本的时候就必须先识别你的验证码，然而要识别你的验证码图片却不是那么容易的，这样可以有效防止我
们的网站被脚本文件攻击
1.1 maven需要导入的包
<dependencies>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<!--生成验证码的核心-->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
</dependencies>
1.2 web.xml需要配置的文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <!-- 生成图片的Servlet --> <servlet-name>Kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> <!-- 是否有边框--> <init-param> <param-name>kaptcha.border</param-name> <param-value>no</param-value> </init-param> <!-- 字体颜色 --> <init-param> <param-name>kaptcha.textproducer.font.color</param-name> <param-value>red</param-value> </init-param> <!-- 图片宽度 --> <init-param> <param-name>kaptcha.image.width</param-name> <param-value>135</param-value> </init-param> <!-- 图片高度 --> <init-param> <param-name>kaptcha.image.height</param-name> <param-value>50</param-value> </init-param> <!-- 使用哪些字符生成验证码 --> <!--<init-param> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>ACDEFHKPRSTWX345679</param-value> </init-param>--> <!-- 字体大小 --> <init-param> <param-name>kaptcha.textproducer.font.size</param-name> <param-value>43</param-value> </init-param> <!-- 干扰线的颜色 --> <init-param> <param-name>kaptcha.noise.color</param-name> <param-value>black</param-value> </init-param> <!-- 字符个数 --> <init-param> <param-name>kaptcha.textproducer.char.length</param-name> <param-value>4</param-value> </init-param> <!-- 使用哪些字体 --> <init-param> <param-name>kaptcha.textproducer.font.names</param-name> <param-value>Arial</param-value> </init-param> </servlet> <!-- 映射的url --> <servlet-mapping> <servlet-name>Kaptcha</servlet-name> <url-pattern>/getCode</url-pattern> </servlet-mapping> </web-app>
1.3 前端的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="msg" style="color: red"></div>
<form id="f1">
账号:<input type="text" name="userName"/><br/>
密码:<input type="password" name="password"/><br/>
验证码:<input type="text" name="code"/><br/>
<img id="code" src="getCode"/><br/>
<input type="button" value="登陆"/>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
//单击图片重新生成验证码图片
$("#code").on("click",function(){
//加上随机数，方式get请求缓存
$(this).prop("src","getCode?"+Math.floor(Math.random()*100));
});
//给登陆按钮绑定时间，登陆验证
$(":button").on("click",function(){
var params = $("#f1").serialize();
$.ajax("verifyCode",{
type : "post",
data : params,
success : function(data){
if(data.code != 200){
$("#msg").text(data.value);
}else{
location.href = 'index.html';
}
}
});
});
});
</script>
</html>
1.4 校验验证码的servlet
package edu.nf.servlet; import com.google.code.kaptcha.Constants; import com.google.gson.Gson; import edu.nf.vo.ResponseView; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/verifyCode") public class VerifyServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/json;charset=utf-8"); ResponseView vo = new ResponseView(); String userName = req.getParameter("userName"); String password= req.getParameter("password"); //获取表单的验证码 String formCode = req.getParameter("code"); //从会话作用域获取验证码 String sessionCode = (String)req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY); //校验正好密码以及验证码 if(!"ywb".equals(userName) && !"123".equals(password)){ vo.setCode(403); vo.setValue("用户名或密码错误"); }else if(!formCode.equalsIgnoreCase(sessionCode)){ vo.setCode(403); vo.setValue("验证码错误"); } String json = new Gson().toJson(vo); resp.getWriter().println(json); } }