验证码这样做，瞬间高出一个逼格

言

行为验证码通过用户的操作来完成验证，常见的行为验证码有拖动式和点触式，拖动式验证就是根据图片显示，将指定的图形拖动到指定位置完成验证。而点触式验证码就是通过鼠标点击出示例中出现的图形完成验证。

行为验证码应用

今天推荐一款非常优秀的行为验证码AJ-Captcha（项目地址https://gitee.com/anji-plus/captcha），这个项目包含了滑动拼图和文字点选两种类型的验证码，除了嵌入式交互，还提供了弹出式交互的方式，完全不影响原UI布局。

AJ-Captcha的验证流程如下：

用户访问登录页面，发送请求显示行为验证码
用户按照提示要求完成验证码拼图/点击
用户提交表单，前端将第二步的输出一同提交到后台
验证数据随表单提交到后台后，后台需要调用captchaService.verification做二次校验。
第4步返回校验通过/失败到产品应用后端，再返回到前端。如下图所示。

如果你是Maven开发者，使用起来非常方便，项目的维护人员已经将依赖推送至中央仓库。只需要引入依赖就完成了90%的工作量。接下来只需要在登录接口中进行二次验证就可以了。

项目集成了包括html、vue、flutter、uni-app、Android Kotlin、IOS、php等多种前端语言，可以轻松将AJ_Captcha集成到项目中。

接下来我们以Spring Boot+html为例看看如何快速集成AJ_Captcha完成行为验证码的交互流程。

第一步、Spring Boot中引入AJ_Captcha依赖

<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.2.9</version>
</dependency>

AJ_Captcha默认实现了验证码生成和验证接口，验证码生成接口的默认请求地址是/captcha/get，验证接口的默认请求地址为/captcha/check。也就是说完成以上步骤，就可以提供给前端获取和验证验证码的接口了。如果你还想让你的验证码生成的个性一点，可以配置以下属性：

# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw
aj.captcha.jigsaw=classpath:images/jigsaw
# 滑动验证，底图路径，不配置将使用默认图片
# 支持全路径
# 支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click
aj.captcha.pic-click=classpath:images/pic-click

# 对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，
# 参考CaptchaCacheServiceRedisImpl.java
# 如果应用是单点的，也没有使用redis，那默认使用内存。
# 内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。
# ！！！ 注意啦，如果应用有使用spring-boot-starter-data-redis，
# 请打开CaptchaCacheServiceRedisImpl.java注释。
# redis ----->  SPI： 在resources目录新建META-INF.services文件夹(两层)，参考当前服务resources。
# 缓存local/redis...
aj.captcha.cache-type=local
# local缓存的阈值,达到这个值，清除缓存
#aj.captcha.cache-number=1000
# local定时清除过期缓存(单位秒),设置为0代表不执行
#aj.captcha.timing-clear=180
#spring.redis.host=10.108.11.46
#spring.redis.port=6379
#spring.redis.password=
#spring.redis.database=2
#spring.redis.timeout=6000

# 验证码类型default两种都实例化。
aj.captcha.type=default
# 汉字统一使用Unicode,保证程序通过@value读取到是中文，可通过这个在线转换;yml格式不需要转换
# https://tool.chinaz.com/tools/unicode.aspx 中文转Unicode
# 右下角水印文字(我的水印)
aj.captcha.water-mark=\u6211\u7684\u6c34\u5370
# 右下角水印字体(不配置时，默认使用文泉驿正黑)
# 由于宋体等涉及到版权，我们jar中内置了开源字体【文泉驿正黑】
# 方式一：直接配置OS层的现有的字体名称，比如：宋体
# 方式二：自定义特定字体，请将字体放到工程resources下fonts文件夹，支持ttf\ttc\otf字体
# aj.captcha.water-font=WenQuanZhengHei.ttf
# 点选文字验证码的文字字体(文泉驿正黑)
# aj.captcha.font-type=WenQuanZhengHei.ttf
# 校验滑动拼图允许误差偏移量(默认5像素)
aj.captcha.slip-offset=5
# aes加密坐标开启或者禁用(true|false)
aj.captcha.aes-status=true
# 滑动干扰项(0/1/2)
aj.captcha.interference-options=2

aj.captcha.history-data-clear-enable=false

# 接口请求次数一分钟限制是否开启 true|false
aj.captcha.req-frequency-limit-enable=false
# 验证失败5次，get接口锁定
aj.captcha.req-get-lock-limit=5
# 验证失败后，锁定时间间隔,s
aj.captcha.req-get-lock-seconds=360
# get接口一分钟内请求数限制
aj.captcha.req-get-minute-limit=30
# check接口一分钟内请求数限制
aj.captcha.req-check-minute-limit=60
# verify接口一分钟内请求数限制
aj.captcha.req-verify-minute-limit=60

第二步、前端伪代码调用接口

引入验证码的样式以及验证等文件
验证码获取及验证

<script>
    $('#content').slideVerify({
    baseUrl:'http://localhost:8080/',  //服务器请求地址, 默认地址为安吉服务器;
    containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
    mode:'pop',     //展示模式
    imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: '400px',
        height: '200px',
    },
    barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: '400px',
        height: '40px',
    },
    beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
        let flag = true;
        //实现: 参数合法性的判断逻辑, 返回一个boolean值
        return flag
    },
    ready : function() {},  //加载完毕的回调
    success : function(params) { //成功的回调
        // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
        例如: login($.extend({}, params))
    },
    error : function() {}        //失败的回调
});
</script>

验证码验证成功之后，会返回一个用于二次验证的串码。

第三步，用户登录，二次验证

客户端登录的时候携带验证成功后返回的串码，在登录接口中进行二次验证，验证流程完毕。

@Autowired
private CaptchaService captchaService;
/**
  * 页面获取token
  * 大屏数据校验
  * @param user
  * @return
  */
@PostMapping("getWebToken")
public ResultBean getWebToken(@RequestBody LoginUser user,String captchaVerification){
    ResultBean resultBean = new ResultBean();
    CaptchaVO captchaVO = new CaptchaVO();
    captchaVO.setCaptchaVerification(captchaVerification);
    ResponseModel responseModel = captchaService.verification(captchaVO);
    if(!responseModel.isSuccess()){
        resultBean.fillCode(0,responseModel.getRepMsg());
        return resultBean;
    }
    // 验证通过后，继续登录流程
}

今天的内容就介绍到这里了，趁这个机会，试着使用这款高颜值的行为验证码来替换项目中的图形验证码吧。

，工具类记录

原链接：https://blog.csdn.net/qq_37651267/article/details/99305573，非常感谢原链接博主

此验证码的实现没有用到太多的插件，话不多说直接上代码，大家拿过去就可以用。

1.验证码类

 package com.youyou.login.util.validatecode;

import lombok.Data;

/**
 * 验证码类
 */
@Data
public class VerifyCode {

    private String code;

    private byte[] imgBytes;

    private long expireTime;

}

2.验证码生成接口

 package com.youyou.login.util.validatecode;

import java.io.IOException;
import java.io.OutputStream;

/**
 * 验证码生成接口
 */
public interface IVerifyCodeGen {

    /**
     * 生成验证码并返回code，将图片写的os中
     *
     * @param width
     * @param height
     * @param os
     * @return
     * @throws IOException
     */
    String generate(int width, int height, OutputStream os) throws IOException;

    /**
     * 生成验证码对象
     *
     * @param width
     * @param height
     * @return
     * @throws IOException
     */
    VerifyCode generate(int width, int height) throws IOException;
}

3.验证码生成实现类

 package com.youyou.login.util.validatecode;

import com.youyou.util.RandomUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 验证码实现类
 */
public class SimpleCharVerifyCodeGenImpl implements IVerifyCodeGen {

    private static final Logger logger = LoggerFactory.getLogger(SimpleCharVerifyCodeGenImpl.class);

    private static final String[] FONT_TYPES = { "\u5b8b\u4f53", "\u65b0\u5b8b\u4f53", "\u9ed1\u4f53", "\u6977\u4f53", "\u96b6\u4e66" };

    private static final int VALICATE_CODE_LENGTH = 4;

    /**
     * 设置背景颜色及大小，干扰线
     *
     * @param graphics
     * @param width
     * @param height
     */
    private static void fillBackground(Graphics graphics, int width, int height) {
        // 填充背景
        graphics.setColor(Color.WHITE);
        //设置矩形坐标x y 为0
        graphics.fillRect(0, 0, width, height);

        // 加入干扰线条
        for (int i = 0; i < 8; i++) {
            //设置随机颜色算法参数
            graphics.setColor(RandomUtils.randomColor(40, 150));
            Random random = new Random();
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            graphics.drawLine(x, y, x1, y1);
        }
    }

    /**
     * 生成随机字符
     *
     * @param width
     * @param height
     * @param os
     * @return
     * @throws IOException
     */
    @Override
    public String generate(int width, int height, OutputStream os) throws IOException {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics graphics = image.getGraphics();
        fillBackground(graphics, width, height);
        String randomStr = RandomUtils.randomString(VALICATE_CODE_LENGTH);
        createCharacter(graphics, randomStr);
        graphics.dispose();
        //设置JPEG格式
        ImageIO.write(image, "JPEG", os);
        return randomStr;
    }

    /**
     * 验证码生成
     *
     * @param width
     * @param height
     * @return
     */
    @Override
    public VerifyCode generate(int width, int height) {
        VerifyCode verifyCode = null;
        try (
                //将流的初始化放到这里就不需要手动关闭流
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ) {
            String code = generate(width, height, baos);
            verifyCode = new VerifyCode();
            verifyCode.setCode(code);
            verifyCode.setImgBytes(baos.toByteArray());
        } catch (IOException e) {
            logger.error(e.getMessage(), e);
            verifyCode = null;
        }
        return verifyCode;
    }

    /**
     * 设置字符颜色大小
     *
     * @param g
     * @param randomStr
     */
    private void createCharacter(Graphics g, String randomStr) {
        char[] charArray = randomStr.toCharArray();
        for (int i = 0; i < charArray.length; i++) {
            //设置RGB颜色算法参数
            g.setColor(new Color(50 + RandomUtils.nextInt(100),
                    50 + RandomUtils.nextInt(100), 50 + RandomUtils.nextInt(100)));
            //设置字体大小，类型
            g.setFont(new Font(FONT_TYPES[RandomUtils.nextInt(FONT_TYPES.length)], Font.BOLD, 26));
            //设置x y 坐标
            g.drawString(String.valueOf(charArray[i]), 15 * i + 5, 19 + RandomUtils.nextInt(8));
        }
    }
}

4.工具类

 package com.youyou.util;

import java.awt.*;
import java.util.Random;

public class RandomUtils extends org.apache.commons.lang3.RandomUtils {

    private static final char[] CODE_SEQ = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
            'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
            'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };

    private static final char[] NUMBER_ARRAY = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

    private static Random random = new Random();

    public static String randomString(int length) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++) {
            sb.append(String.valueOf(CODE_SEQ[random.nextInt(CODE_SEQ.length)]));
        }
        return sb.toString();
    }

    public static String randomNumberString(int length) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++) {
            sb.append(String.valueOf(NUMBER_ARRAY[random.nextInt(NUMBER_ARRAY.length)]));
        }
        return sb.toString();
    }

    public static Color randomColor(int fc, int bc) {
        int f = fc;
        int b = bc;
        Random random = new Random();
        if (f > 255) {
            f = 255;
        }
        if (b > 255) {
            b = 255;
        }
        return new Color(f + random.nextInt(b - f), f + random.nextInt(b - f), f + random.nextInt(b - f));
    }

    public static int nextInt(int bound) {
        return random.nextInt(bound);
    }
}

经过以上代码，我们的验证码生成功能基本上已经实现了，现在还需要一个controller来调用它。

     @ApiOperation(value = "验证码")
    @GetMapping("/verifyCode")
    public void verifyCode(HttpServletRequest request, HttpServletResponse response) {
        IVerifyCodeGen iVerifyCodeGen = new SimpleCharVerifyCodeGenImpl();
        try {
            //设置长宽
            VerifyCode verifyCode = iVerifyCodeGen.generate(80, 28);
            String code = verifyCode.getCode();
            LOGGER.info(code);
            //将VerifyCode绑定session
            request.getSession().setAttribute("VerifyCode", code);
            //设置响应头
            response.setHeader("Pragma", "no-cache");
            //设置响应头
            response.setHeader("Cache-Control", "no-cache");
            //在代理服务器端防止缓冲
            response.setDateHeader("Expires", 0);
            //设置响应内容类型
            response.setContentType("image/jpeg");
            response.getOutputStream().write(verifyCode.getImgBytes());
            response.getOutputStream().flush();
        } catch (IOException e) {
            LOGGER.info("", e);
        }
    }

搞定！后台编写到此结束了。那么又会有博友说了：“说好的实现效果呢？”

好吧，那么我们继续前端的代码编写。

前端代码:

 <html>
<body>

<div>
    <input id="code" placeholder="验证码" type="text" class=""
           style="width:170px">
    <!-- 验证码 显示 -->
    <img οnclick="javascript：getvCode()" id="verifyimg" style="margin-left: 20px;"/>
</div>

<script type="text/javascript">
    getvCode();

    /**
     * 获取验证码
     * 将验证码写到login.html页面的id = verifyimg 的地方
     */
    function getvCode() {
        document.getElementById("verifyimg").src = timestamp("http://127.0.0.1:81/verifyCode");
    }
    //为url添加时间戳
     function timestamp(url) {
        var getTimestamp = new Date().getTime();
        if (url.indexOf("?") > -1) {
            url = url + "×tamp=" + getTimestamp
        } else {
            url = url + "?timestamp=" + getTimestamp
        }
        return url;
    };


</script>
</body>

</html>

可以实现点击图片更换验证码。

实现效果：

当然文章开头的截图是我系统中的截图，需要大家自己去根据自己的情况去开发前端了。

言

验证码是用来防止恶意破解密码、防止机器登录的，我们常见的验证码形式五花八门，有图片验证码、短信验证码、语音验证码、拼图验证、找图验证、点字验证还有智能检测，今天我来跟大家分享的是普通的图片验证码。

12306验证码

网友恶搞的验证码

QQ验证码

生成验证码

ThinkPHP内置了Verify类，生成验证码仅需两步：

生成验证码代码

然后在index.html中使用img标签显示验证码：

<img src="{:U('Index/verifyCode')}">

最终输出结果如下：

验证码显示结果

配置验证码

上面的用法是通过默认配置来输出的验证码，5位字母、添加混淆线、添加杂点、字体随机、颜色随机，如果这种验证码已经可以满足你的要求，直接使用即可，如果无法满足要求，可以通过下面的配置来自定义验证码：

图片来自ThinkPHP官方文档

验证码字体

默认情况下，验证码的字体是随机使用 ThinkPHP/Library/Think/Verify/ttfs/目录下面的字体文件，我们可以指定验证码的字体，例如：

$Verify = new \Think\Verify();
// 验证码字体使用 ThinkPHP/Library/Think/Verify/ttfs/5.ttf
$Verify->fontttf = '5.ttf';
$Verify->entry();

背景图片

$Verify = new \Think\Verify();
// 开启验证码背景图片功能随机使用 ThinkPHP/Library/Think/Verify/bgs 目录下面的图片
$Verify->useImgBg = true;
$Verify->entry();

中文验证码

如果要使用中文验证码，可以设置：

$Verify = new \Think\Verify();
$Verify->useZh = true;
$Verify->entry();

指定验证码字符

3.2.1版本以上，我们可以指定验证码的字符，通过重新设置codeSet参数即可，例如设置纯数字验证码：

$Verify = new \Think\Verify();
$Verify->codeSet = '0123456789';
$Verify->entry();

部分中文字符验证码：

$Verify = new \Think\Verify();
$Verify->useZh = true;
$Verify->zhSet = '们以我到他会作时要动国产的一是工就年阶义发成部民可出能方进在了不和有大这';
$Verify->entry();

验证码检测

设置了验证码，我们应该怎么检测用户输入是否正确呢？只需要使用Verify类下的check方法即可：

$verify = new \Think\Verify();
return $verify->check($code);

多个验证码

如果在同一个页面中包含多个验证码，上面的方法会导致后生成的验证码覆盖掉先生成的SESSION，导致验证失败，此时我们需要在生成验证码代码中使用id标识，如下：

$Verify->entry(1);//第一个验证码
$Verify->entry(2);//第二个验证码

在检测的时候也一样

$verify->check($code,1);//检测第一个验证码
$verify->check($code,2);//检测第二个验证码

总结

ThinkPHP内置的验证码类基本上可以满足我们的需求，而且使用简单，方便快捷，免去我们自己写验证码生成的麻烦。不过图片验证码已经逐步的被替代，如果你感兴趣，可以前往极验验证（http://www.geetest.com/）了解更神奇的验证方式（不过是收费的）。

如果您觉得小编的教程对您有所帮助，请点击关注支持小编，您的关注是对小编最大的鼓励。

在线咨询

上一篇：html多页面实现背景音乐的连续播放，简单处理笔记
下一篇：「转行测试开发-HTML」(三)上次没说完的标题、段落和文本格式化

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商