验证码之Kaptcha

提示:以下内容仅供参考


前言

提示:这里可以添加本文要记录的大概内容:

Kaptcha是谷歌提供的验证码生成工具


提示:以下是本篇文章正文内容,下面案例可供参考

一、Kaptcha是什么?

1.Kaptcha是谷歌开源的可高度配置的实用验证码生成工具。

2.通过Kaptcha可阻拦大多数机器人脚本操作。

3.kaptcha典型殷勇于注册、登录、重要信息提交等用户交互

二、使用步骤

1.引入库

代码如下(示例):

 <!--谷歌验证码kaptcha 依赖-->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

2.config配置

代码如下(示例):

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;

import org.springframework.stereotype.Component;

import java.util.Properties;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: 你的名字
 * @Date: 2023/01/08/12:48
 * @Description:
 */
@Component
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "no");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "black");
        //边框厚度
        properties.setProperty("kaptcha.border.thickness", "1");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "120");
        // 图片高
        properties.setProperty("kaptcha.image.height", "60");
        //图片实现类
        properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");
        //文本实现类
        properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");
        //文本集合,验证码值从此集合中获取
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        //验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        //字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体");
        //字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        //文字间隔
        properties.setProperty("kaptcha.textproducer.char.space", "4");
        //干扰实现类
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
        //干扰颜色
        properties.setProperty("kaptcha.noise.color", "blue");
        //干扰图片样式
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
        //背景实现类
        properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");
        //背景颜色渐变,结束颜色
        properties.setProperty("kaptcha.background.clear.to", "white");
        //文字渲染器
        properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

3.测试生成验证码

代码如下:

 @Autowired
    private DefaultKaptcha defaultKaptcha;
    /**
     * 获取验证码
     */
    @Test
    public void captcha() throws IOException {
        // 生成文字验证码
        String text=defaultKaptcha.createText();
        System.out.println("文字验证码为"+text);
        // 生成图片验证码
        ByteArrayOutputStream out = null;
        BufferedImage image = defaultKaptcha.createImage(text);
        out=new ByteArrayOutputStream();
        ImageIO.write(image,"jpg",out);
        // 对字节组Base64编码
//        return ResultVo.success("img", Base64.getEncoder().encodeToString(out.toByteArray()));
        System.out.println(Base64.getEncoder().encodeToString(out.toByteArray()));
    }

打印结果:

文字验证码为F8N9

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

将base64编码 拿到前端展示,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<h1>我的第一个HTML页面</h1>
	<p>我的第一个段落。</p>
   <img src="data:image/jpg;base64,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
" />
</body>
</html>

注意base64书写方式:

 base64数据是不能直接使用在src上的
      例子:
      data:image/png;base64,base64数据  ,这样拼接才能达到base64在src上使用的效果,下面讲解参数使用方法

   1:   data:数据名称

   2: image/gif  图片类型
      image/png  图片类型
      image/jpeg 图片类型
      image/x-icon 图标类型

   3: base64 这个是数据格式格式

      文字参数介绍
    方法一:
      <img :src=`数据名称:图片类型;数据格式,一般为后台返回的base64数据`>
    方法二:
      <img :src="'数据名称:图片类型;数据格式,'+后台返回的base64数据"
      代码演示
    方法一:
      <img :src=`data:image/png;base64,base64数据` alt="">
    方法二:
      <img :src="'data:image/png;base64,'+base64数据" />

验证码效果图展示:

在这里插入图片描述


总结

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值