java语言使用Kaptcha框架配置方式生成验证码案例及代码完整版

首先使用maven搭建web项目导入一下servlet依赖

 <!-- servlet依赖的jar包start -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <!-- servlet依赖的jar包start -->
    <!-- jsp依赖jar包start -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.1</version>
    </dependency>
    <!-- jsp依赖jar包end -->
    <!--jstl标签依赖的jar包start -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--jstl标签依赖的jar包end -->

导入验证码Kaptcha的maven依赖

<!--验证码kaptcha依赖-->
    <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
    <dependency>
      <groupId>com.github.penggle</groupId>
      <artifactId>kaptcha</artifactId>
      <version>2.3.2</version>
    </dependency>

第二步前端页面有点简陋自己用到时改一下根据自己的页面就行了,页面代码

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/2/11
  Time: 17:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>kaptcha验证码</title>
<style type="text/css">
    .code_a {
        color: #0000ff;
        font-size: 12px;
        text-decoration: none;
        cursor: pointer;
    }

    #imgCode {
        cursor: pointer;
    }
</style>
<script type="text/javascript">
    function changeCode() {
        var imgCode = document.getElementById("imgCode");
        imgCode.src="kaptcha?"+Math.random();
    }
</script>
<body>
<form action="vailKaptcha" method="post">
    <label>验证码:</label>
    <input type="text" id="inputCode" name="inputCode" placeholder="输入验证码,大小写无关"/>
    <%--此处src的名称codeImage与web.xml中配置的<url-pattern>/codeImage</url-pattern>名称相同--%>
    <img src="kaptcha" id="imgCode" align="center" onclick="changeCode()"/>
    <a class="code_a" onclick="changeCode()">看不清!切换一张</a><br>
    <input type="submit" value="登录">
</form>
<div style="color: #ff0000;">${errMsg}</div>
</body>
</html>

最重要的配置web.xml配置此处小心

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         id="WebApp_ID" version="3.0">
    <display-name>Archetype Created Web Application</display-name>

    <!--生成kapcha验证码的servlet使用框架-->
    <servlet>
        <servlet-name>kaptchaCode</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>125</param-value>
        </init-param>
        <!--使用哪些字符生成验证码-->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789</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.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>
    <!--生成验证码图片的src访问名称 kaptchCode.jsp-->
    <servlet-mapping>
        <servlet-name>kaptchaCode</servlet-name>
        <url-pattern>/kaptcha</url-pattern>
    </servlet-mapping>
   <!--验证kaptcha验证码的servlet-->
    <servlet>
        <servlet-name>kaptchaVail</servlet-name>
        <servlet-class>demo3.servlet.KaptchaVailServlet</servlet-class>
    </servlet>
    <!--验证码提交的访问路径action-->
    <servlet-mapping>
        <servlet-name>kaptchaVail</servlet-name>
        <url-pattern>/vailKaptcha</url-pattern>
    </servlet-mapping>
    <!--<welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>-->

</web-app>

验证kaptcha是否正确的servlet

package demo3.servlet;

import com.google.code.kaptcha.Constants;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * package_name:demo3.servlet
 * Author:徐亚远
 * Date:2020/2/12 11:52
 * 项目名:code-projects
 * Desription:
 **/
public class KaptchaVailServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp );
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //得到数据输入框输入的
       String inputCode = req.getParameter("inputCode").toString().toLowerCase();
       //得到生成的验证码数据
       String vailKaptcha = req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY).toString().toLowerCase();
       if (inputCode.equals(vailKaptcha)){
           resp.sendRedirect("success.jsp");
       }else {
           req.getSession().setAttribute("errMsg","验证码输入错误,请重新输入" );
           //返回上一页
           resp.sendRedirect("kaptchCode.jsp");
       }

    }
}

生成验证码的效果图在这里插入图片描述

发布了64 篇原创文章 · 获赞 1 · 访问量 903

猜你喜欢

转载自blog.csdn.net/weixin_43311650/article/details/104276423
今日推荐