验证码作用：
没有验证码登陆，黑客会更加容易破解你的账号，通过组合码刷机等黑客技术来破取你的密码，有了验证码相当于加了一层很厚的屏障，安全系数很高。
验证码是一种区分用户是计算机和人的公共全自动程序。
验证码作用：可以防止恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上是用验证码是现在很多网站通行的方式（比如招商银行的网上个人银行，百度社区），利用比较简易的方式实现了这个功能。
（因为老师布置的作业，做了两种做法，一种自己先做的，借鉴过网络，还有一种是老师教的，第二种用到了工具类kaptcha）
第一种：
生成验证码的代码：
/** * @author hh */ public class CodeUtil { private static int width = 90;// 定义图片的width private static int height = 20;// 定义图片的height private static int codeCount = 4;// 定义图片上显示验证码的个数 private static int xx = 15; private static int fontHeight = 18; private static int codeY = 16; private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; /** * 生成一个map集合 * code为生成的验证码 * codePic为生成的验证码BufferedImage对象 * @return */ public static Map<String,Object> generateCodeAndPic() { // 定义图像buffer BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); //Graphics2D gd = buffImg.createGraphics(); //Graphics2D gd = (Graphics2D) buffImg.getGraphics(); Graphics gd = buffImg.getGraphics(); // 创建一个随机数生成器类 Random random = new Random(); // 将图像填充为白色 gd.setColor(Color.WHITE); gd.fillRect(0, 0, width, height); // 创建字体，字体的大小应该根据图片的高度来定。 Font font = new Font("Fixedsys", Font.BOLD, fontHeight); // 设置字体。 gd.setFont(font); // 画边框。 gd.setColor(Color.BLACK); gd.drawRect(0, 0, width - 1, height - 1); // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。 gd.setColor(Color.BLACK); for (int i = 0; i < 30; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); gd.drawLine(x, y, x + xl, y + yl); } // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。 StringBuffer randomCode = new StringBuffer(); int red = 0, green = 0, blue = 0; // 随机产生codeCount数字的验证码。 for (int i = 0; i < codeCount; i++) { // 得到随机产生的验证码数字。 String code = String.valueOf(codeSequence[random.nextInt(36)]); // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。 red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); // 用随机产生的颜色将验证码绘制到图像中。 gd.setColor(new Color(red, green, blue)); gd.drawString(code, (i + 1) * xx, codeY); // 将产生的四个随机数组合在一起。 randomCode.append(code); } Map<String,Object> map =new HashMap<String,Object>(); //存放验证码 map.put("code", randomCode); //存放生成的验证码BufferedImage对象 map.put("codePic", buffImg); return map; } }
前端网页代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证登录</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <form id="form"> Name:<input type="text" name="name"><br/> Pwd:<input type="password" name="pwd"><br/> <input name="imgCode" type="text"> <!-- 直接在img的src中填写servlet请求 --> <img src="/getCodeImg" onclick="codeImg()" id="imgObj"> <a href="#" onclick="codeImg()" >换一张</a> <br/> <p style="color: red" id="msg"></p> <input type="button" id="btn" value="登录"> </form> </body> <script> $(function () { //登录验证 $("#btn").on("click",function () { $.ajax("login",{ type:"post", data:$("#form").serialize(), success:function (data) { //200 表示成功验证 if(data==200){ location.href="success.html"; }else { $("#msg").text(data); } } }); }) }) //改变图片 function codeImg() { var imgSrc = $("#imgObj"); var src = imgSrc.attr("src"); imgSrc.attr("src", chgUrl(src)); } // 时间戳 // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳 function chgUrl(url) { var timestamp = (new Date()).valueOf(); //eg: /getCodeImg?timestamp=1536379395200 截取成：/getCodeImg?timestamp url = url.substring(0, 21); if ((url.indexOf("?") >= 0)) { url = url + "=" + timestamp; } else { url = url + "?timestamp=" + timestamp; } return url; } </script> </html>
请求获取制作的验证码：
/** * @author hh */ @WebServlet("/getCodeImg") public class GetCodeImgServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 调用工具类生成的验证码和验证码图片 Map<String, Object> codeMap = CodeUtil.generateCodeAndPic(); //把验证码保存到session中 HttpSession session=req.getSession(); session.setAttribute("code",codeMap.get("code").toString()); //禁止图片缓存 resp.setHeader("Pragma", "no-cache"); resp.setHeader("Cache-Control", "no-cache"); resp.setDateHeader("Expires", -1); //响应格式 resp.setContentType("image/jpeg;charset=utf-8"); // 将图像输出到Servlet输出流中。 try (ServletOutputStream sos = resp.getOutputStream()){ ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }
后台校验提交账号密码和验证码的值：
/** * @author hh */ @WebServlet("/login") public class LoginServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); //获取表单中的登录名、密码和填写的验证码 String name = req.getParameter("name"); String pwd = req.getParameter("pwd"); String imgCode = req.getParameter("imgCode"); //获取Session回话作用域存放的验证码值 String code = (String)req.getSession().getAttribute("code"); //进行校验 if("hh".equals(name)&&"123".equals(pwd)&&code.equals(imgCode)){ resp.getWriter().print(200); }else if(!code.equals(imgCode)){ resp.getWriter().print("验证码错误！"); }else { resp.getWriter().print("账号或者密码错误！"); } } }
第二种：
第二种依赖了jar包，直接导入包，配置web.xml的请求servlet然后工具类就会自动保存到回话作用域
1.添加jar包依赖
如果你使用maven来统一管理jar包，则在工程的pom.xml中添加dependency
Xml代码
<!-- 验证码生成工具 --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
如果是非maven管理的项目，则直接在官网下载kaptcha的jar包，然后添加到项目lib库中，下载地址：http://code.google.com/p/kaptcha/downloads/list
配置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> <servlet-mapping> <servlet-name>Kaptcha</servlet-name> <!-- 请求地址 --> <url-pattern>/getCode</url-pattern> </servlet-mapping> </web-app>
前端网页代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息注册</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <h1>学生信息注册</h1> <form id="form"> Name:<input type="text" name="name" required="required"><br/> Age:<input type="text" name="age" required="required"><br/> Address:<input type="text" name="address" required="required"><br/> 验证码：<input name="imgCode" type="text" required="required"> <!-- 直接在img的src中填写servlet请求 --> <img src="/getCode" onclick="codeImg()" id="imgObj"> <br/> <p style="color: red" id="msg"></p> <input type="button" id="btn" value="注册"> </form> </body> <script> $(function () { //登录验证 $("#btn").on("click",function () { $.ajax("regist",{ type:"post", data:$("#form").serialize(), success:function (data) { if(data.code==200){ alert(data.value); }else { $("#msg").text(data.value); } } }); }) }) //改变图片 function codeImg() { var imgSrc = $("#imgObj"); var src = imgSrc.attr("src"); imgSrc.attr("src", chgUrl(src)); } // 时间戳 // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳 function chgUrl(url) { var timestamp = (new Date()).valueOf(); //eg: /getCodeImg?timestamp=1536379395200 截取成：/getCodeImg?timestamp url = url.substring(0, 21); if ((url.indexOf("?") >= 0)) { url = url + "=" + timestamp; } else { url = url + "?timestamp=" + timestamp; } return url; } </script> </html>
//改变图片的代码也可以：
function codeImg() {
var imgSrc = $("#imgObj");
var src = imgSrc.attr("src");
imgSrc.attr("src", "getCode?"+Math.floor(Math.random()*100));
}
后台校验的代码：
package edu.nf.demo.servlet; import com.google.code.kaptcha.Constants; import com.google.gson.Gson; import edu.nf.demo.service.StudentService; import edu.nf.demo.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; /** * @author hh */ @WebServlet("/regist") public class StudentRegistServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); //取出页面的值 String name=req.getParameter("name"); String age=req.getParameter("age"); String address=req.getParameter("address"); String code=req.getParameter("imgCode"); //响应视图 ResponseView vo=new ResponseView(); //从Session中获取工具类自动保存的验证码的值 String sessionCode=(String)req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY); //判断验证码 if (!code.equalsIgnoreCase(sessionCode)){ vo.setCode(403); vo.setValue("验证码错误"); }else { int respCode = new StudentService().inserStudent(name,age,address); if (respCode==200){ vo.setValue("注册成功！"); }else { vo.setCode(403); vo.setValue("注册失败！"); } } //响应数据 resp.setContentType("application/json;charset=utf-8"); resp.getWriter().print(new Gson().toJson(vo)); } }