java生成验证码

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);
    }
}

 

posted @ 2018-11-24 21:06  yiwanbin  阅读(323)  评论(0)    收藏  举报