五分钟搞定验证码，你学会了吗？

时间：2023-04-04 12:25:00 来源：Java技术指北作者：

哈喽，大家好，我是了不起。

我们其实很经常看到，登录一些网站其实是需要验证码的。使用验证码是现在很多网站通行的一种方式，因为计算机很难识别验证码，所以可以识别验证码的用户就可以被认为是人类。

今天我们讲一下在 JAVA 中验证码的使用。

验证码生成

本效果是利用easy-captcha工具包实现，首先需要添加相关依赖到pom.xml中，代码如下：

<dependency>
    <groupId>com.Github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>1.6.2</version>
</dependency>

验证码格式

easy-captcha验证码工具支持GIF、中文、算术等类型，分别通过下面几个实例对象实现：

SpecCaptcha（PNG类型的静态图片验证码）
GifCaptcha（Gif类型的图片验证码）
ChineseCaptcha（GIF类型中文图片验证码）
ArithmeticCaptcha（算术类型的图片验证码）

字符类型分为以下几种：

TYPE_DEFAULT：数字和字母混合
TYPEONLYNUMBER：纯数字
TYPEONLYCHAR：纯字母
TYPEONLYUPPER：纯大写字母
TYPEONLYLOWER：纯小写字母
TYPENUMAND_UPPER：数字和大写字母混合

后端逻辑的实现

package com.yanx.controller;
 
import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.base.Captcha;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMApping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.thymeleaf.util.StringUtils;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@Controller
public class KapchaController {
    @GetMapping("/kaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
        httpServletResponse.setHeader("Cache-Control","no-store");
        httpServletResponse.setHeader("Pragma","no-cache");
        httpServletResponse.setDateHeader("Expires",0);
        httpServletResponse.setContentType("image/gif");
 
        //三个参数分别为宽、高、位数
        SpecCaptcha captcha=new SpecCaptcha(75,30,4);
 
        //设置类型为数字和字母混合
        captcha.setCharType(Captcha.TYPE_DEFAULT);
 
        //设置字体
        captcha.setCharType(Captcha.FONT_9);
 
        //验证码存入session
        httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
 
        //输出图片流
        captcha.out(httpServletResponse.getOutputStream());
    }
 
}

这里控制器新增了defaultKaptcha()方法，该方法所拦截处理的路径为/kaptcha

前端逻辑的实现

在static目录中新建kaptcha.html页面,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
</head>
<body>
 <img src="/kaptcha" onclick="this.src='/kaptcha?t=new Date()'">
</body>
</html>

访问后端验证码路径/kaptcha,验证码为图片形式。onclick方法为点击该标签时可以动态切换显示验证码。

启动Spring Boot项目，打开浏览器输入地址：

http://localhost:8080/kaptcha.html

效果如下：

验证码验证

后端代码

package com.yanx.controller;
 
import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.base.Captcha;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.thymeleaf.util.StringUtils;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
 
@Controller
public class KapchaController {
    @GetMapping("/kaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
        httpServletResponse.setHeader("Cache-Control","no-store");
        httpServletResponse.setHeader("Pragma","no-cache");
        httpServletResponse.setDateHeader("Expires",0);
        httpServletResponse.setContentType("image/gif");
 
        //三个参数分别为宽、高、位数
        SpecCaptcha captcha=new SpecCaptcha(75,30,4);
 
        //设置类型为数字和字母混合
        captcha.setCharType(Captcha.TYPE_DEFAULT);
 
        //设置字体
        captcha.setCharType(Captcha.FONT_9);
 
        //验证码存入session
        httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
 
        //输出图片流
        captcha.out(httpServletResponse.getOutputStream());
    }
 
    @GetMapping("/verify")
    @ResponseBody
    public String verify(@RequestParam("code") String code, HttpSession session){
        if(StringUtils.isEmpty(code)){
            return "验证码不能为空";
        }
        String kapchaCode = session.getAttribute("verifyCode")+"";
        if(StringUtils.isEmpty(kapchaCode)||!code.toLowerCase().equals(kapchaCode)){
            return "验证码输入错误";
        }
        return "验证成功";
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码验证</title>
</head>
<body>
 
<img src="/kaptcha" onclick="this.src='/kaptcha?d=new Date()'">
 
<br>
<input type="text" maxlength="5" id="code" placeholder="请输入验证码"/>
<button id="verify">验证</button>
<br/>
<p id="verifyResult"></p>
 
</body>
 
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/JavaScript" >
  $(function(){
  //验证按钮点击事件
   $('#verify').click(function(){
    var code=$('#code').val();
    $.ajax({
      type:'GET',//方法类型
      url:'/verify?code='+code,
      success:function(result){
        $('#verifyResult').html(result);
      },
      error:function(){
        alert('请求失败');
      },
    });
   });
  });
</script>
</html>

效果

结束语

生成验证码功能还是比较常用的，所以记录整理一下，方便以后回顾，如果有帮到你们的地方倍感荣幸，有路过的大佬还望不吝雅教！

Tags：验证码点击:() 评论:()

声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作，风险自担。如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除。

▌相关推荐

注意！密码、验证码都没说，钱是怎么被骗走的？

转自：科普中国“我密码和验证码都没有给他，为什么钱还是被骗子骗走了？”骗子是怎么做到的呢？真实案例今年1月，武汉市民张某在家接到一陌生电话，电话自称是某平台的客服，告诉张某购...【详细内容】

2024-04-11　　Search: 验证码点击:(4)　　评论:(0)　　加入收藏

微软 Edge 浏览器将推出两大新功能：设备端加密和自动验证验证码

8 月 23 日消息，微软正在为其 Edge 浏览器开发新功能，将为用户带来更便捷的体验以及更好的隐私和安全保护。据 Leopeva64 发现，微软正在为 Edge 浏览器的安卓版本开发两个新功...【详细内容】

2023-08-23　　Search: 验证码点击:(290)　　评论:(0)　　加入收藏

在WordPress登录和注册表中添加验证码

您想将CAPTCHA添加到WordPress网站的登录和注册表单中吗？WordPress登录和用户注册页面通常是黑客，垃圾邮件发送者和暴力攻击的主要目标。避免这些攻击的一种方法是使用CAPTCHA...【详细内容】

2023-08-03　　Search: 验证码点击:(258)　　评论:(0)　　加入收藏

验证码越来越抽象，我快不能证明自己是人类了。

为了把机器人拦在门外，人类发明了验证码。但不知何时起，验证码开始处处刁难人类。它就像路上的减速带，你过是能过，但总会咯噔一下，而且越急就越难受。黑胖和我说，那夜他突想温习两...【详细内容】

2023-07-03　　Search: 验证码点击:(240)　　评论:(0)　　加入收藏

验证码竟成骚扰工具，谁在作祟？

本是用于APP注册、网站登录身份验证的手机短信验证码，摇身一变成了骚扰手机用户的帮凶，这是怎么回事儿？近期，不少市民到四川遂宁公安机关报案称：自己手机突然“抽风”，在非本人操...【详细内容】