使用Kaptcha生成验证码

说明:验证码,是登录流程中必不可少的一环,一般企业级的系统,使用都是专门制作验证码、审核校验的第三方SDK(如极验)。本文介绍,使用谷歌提供的Kaptcha技术,制作一个简单的验证码。

本文参考(http://t.csdn.cn/55Ip2),基本是根据这篇文章自己手动实现了一遍。

后端代码

创建一个SpringBoot项目,依赖如下:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>kaptcha_essay</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><!--Springboot项目--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.12</version><relativePath/></parent><dependencies><!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--kaptcha依赖--><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency></dependencies></project>

创建一个Kaptcha配置类,用于设置验证码的尺寸、样式等,注意不要漏掉@Component注解如下:

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;@Component
public class KaptchConfig {@Beanpublic 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;}
}

创建一个controller层类,用于生成验证码并返回

import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Base64;
import java.util.Map;@RestController
@CrossOrigin
@RequestMapping("/code")
public class KaptchController {@ResourceDefaultKaptcha defaultKaptcha;/*** 生成验证码*/@GetMappingpublic Map code() throws IOException {// 生成文字验证码String text = defaultKaptcha.createText();System.out.println("文字验证码为" + text);ByteArrayOutputStream out = new ByteArrayOutputStream();// 生成图片验证码BufferedImage image = defaultKaptcha.createImage(text);ImageIO.write(image, "jpg", out);// 对字节组Base64编码return Map.of("data", Base64.getEncoder().encodeToString(out.toByteArray()));}
}

@CrossOrigin注解,用于解决跨域问题,待会儿前端会发送异步请求,获取验证码;

前端代码

创建一个前端页面,使用axios向后端发送获取验证码的请求;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取验证码</title><script src="js/axios-0.18.0.js"></script></head><body><input type="button" value="获取验证码" onclick="get()"><img id="pic" />
</body>
<script>function get() {// 异步交互ajaxaxios.get("http://localhost:8080/code") // 发请求给服务器.then(resp => {// 接收响应回来的数据console.log(resp.data);document.getElementById("pic").src = 'data:image/jpeg;base64,' + resp.data.data;})}
</script></html>

启动&测试

启动代码,打开前端页面,点击获取验证码,查看结果,如下:

在这里插入图片描述

控制台输出验证码,这个验证码在实际开发中可存入Redis中;

在这里插入图片描述

可以前端查看返回的内容;

在这里插入图片描述

这段地址加上data:image/jpeg;base64,就是验证码的图片地址;

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqlserver数据库导出到mysql

爱到分才显珍贵&#xff0c;很多人都不懂珍惜拥有&#xff0c;只到失去才看到&#xff0c;其实那最熟悉的才最珍贵的。 这里只介绍一种方式&#xff0c;有很多的方式。 1.使用Navicat 安装 下载 2.工具 数据传输 3.选择源和目标 然后开始 4.最好导入前备份一下库

【KVM虚拟化环境部署】

环境部署 KVM虚拟化环境 1、装系统时手动选择安装 2、CentOS 7 最小化安装 yum install qemu-kvm qemu-img libvirt -y yum install virt-install libvirt-python virt-manager python-virtinst libvirt-client -y安装好CentOS 7后&#xff0c;去设置里面点击处理器&#x…

4.0 Spring Boot入门

1. Spring Boot概述 Spring Boot介绍 Spring Boot是Pivotal团队在2014年推出的全新框架&#xff0c;主要用于简化Spring项目的开发过程&#xff0c;可以使用最少的配置快速创建Spring项目。 Spring Boot版本 2014年4月v1.0.0.RELEASE发布。 ​ 2.Spring Boot特性 约定优于配…

docker-compose部署可道云

文章目录 一. Mac1.1 下载源码1.2 部署1.2.1 修改密码部署(可忽略)1.2.2 直接部署 1.3 卸载1.4 访问 二. Win2.1 下载源码2.2 部署2.2.1 修改密码部署(可忽略)2.2.2 直接部署 2.3 卸载 一. Mac 1.1 下载源码 mkdir -p /Users/wanfei/docker-compose && cd /Users/wan…

mysql 数据备份和恢复

操作系统&#xff1a;22.04.1-Ubuntu mysql 版本&#xff1a;8.033 binlog 介绍 binlog 是mysql 二进制日志 binary log的简称&#xff0c;可以简单理解为数据的修改记录。 需要开启binlog,才会产生文件&#xff0c;mysql 8.0 默认开启,开启后可以在 /var/lib/mysql &#xff…

技术债 笔记

目录 1. 技术债 笔记1.1. 什么是技术债1.2. 讨论1.3. 国内技术从业者怎么看? 1. 技术债 笔记 1.1. 什么是技术债 1992 年, Ward Cunningham 在敏捷宣言中首次提出了"技术债"概念, 主要指有意或无意地做了错误的或不理想的技术决策所累积的债务。随后, 《重构》一书…

sql中union all、union、intersect、minus的区别图解,测试

相关文章 sql 的 join、left join、full join的区别图解总结&#xff0c;测试&#xff0c;注意事项 1. 结论示意图 对于intersect、minus&#xff0c;oracle支持&#xff0c;mysql不支持&#xff0c;可以变通&#xff08;in或exists&#xff09;实现 2.测试 2.1.创建表和数…

vue pc端项目el-upload上传图片时加水印

html代码&#xff1a; <a-uploadclass"avatar-uploader"list-type"picture-card":file-list"uploadFileList":custom-request"uploadDoneHandle":before-upload"beforeUpload":remove"removeHandle"v-decorat…

案例21 基于Spring Boot+Redis实现图书信息按书号存储案例

1. 案例需求 基于Spring BootRedis实现图书信息按书号存储和取出功能&#xff0c;数据存储至Redis。 2. 创建Spring Boot项目 创建Spring Boot项目&#xff0c;项目名称为springboot-redis02。 3. 选择依赖 ​ pom.xml文件内容如下所示&#xff1a; <?xml version&quo…

浏览器控制台调试代码和JavaScript控制台方法介绍

浏览器控制台调试代码和JavaScript控制台方法介绍 浏览器控制台调试代码 浏览器控制台&#xff08;Console&#xff09;是浏览器提供的一个开发工具&#xff0c;用于在浏览器中执行和调试 JavaScript 代码。它提供了一个交互式环境&#xff0c;可以输入 JavaScript 代码&#…

Qt:隐式内存共享

隐式内存共享 Many C classes in Qt use implicit data sharing to maximize resource usage and minimize copying. Implicitly shared classes are both safe and efficient when passed as arguments, because only a pointer to the data is passed around, and the data i…

C语言:每日一练(选择+编程)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;打印1到最大的n位数 示例1 思路一&#xff1a; 题二&#xff1a;计算日期到天数转换 示例1 思路一&#xf…

【JVM】如何判定一个对象已死以及“标记-清除”、“标记-复制”、“标记-整理”三种垃圾收集算法

文章目录 0、如何判定一个对象的生死&#xff1f;1、上文提到的引用又是什么1、强引用&#xff1a;2、软引用&#xff1a;3、弱引用&#xff1a;4、虚引用&#xff1a; 2、垃圾收集算法1、标记-清除2、标记-复制优化&#xff1a;&#x1f447; 3、标记-整理 0、如何判定一个对象…

Java面向对象程序设计——知识、概念、定义及作用(简答)

​专栏&#xff1a;《Java面向对象程序设计》学习笔记 问题是依据考纲整理的&#xff0c;稍微做了一些补充。大部分答案由GPT生成&#xff0c;部分内容摘选自书本。 内容太多了&#xff0c;目前懒得浓缩精炼了&#xff0c;以后再说吧。 如果有大佬可以帮忙精简一些文字、补充…

R语言实现神经网络(1)

#R语言实现神经网络 library(neuralnet) library(caret) library(MASS) library(vcd) data(shuttle) str(shuttle)#因变量use; table1<-structable(windmagn~use,shuttle) mosaic(table1,shadingT) mosaic(use~errorvis,shuttle) prop.table(table(shuttle$use,shuttle$stab…

计算机网络-物理层(二)- 传输方式

计算机网络-物理层&#xff08;二&#xff09;- 传输方式 串型传输与并行传输 串行传输:是指数据是一个比特一个比特依次发送的&#xff0c;因此在发送端和接收端之间&#xff0c;只需要一条数据传输线路即可 并行传输:是指一次发送n个比特而不是一个比特&#xff0c;因此发送…

【Uniapp】base64图片资源转为本地图片,解决canvas不支持base64问题

通过接口获取到base64类型的二维码&#xff0c;把二维码放到canvas里生成海报 遇到的问题&#xff1a; 在微信小程序开发工具中能够正常显示海报&#xff0c;到真机上测试就无法显示二维码 原因&#xff1a; 因为canvas不支持base64&#xff0c;其次在使用小程序 canvas 的 dr…

异常堆栈缺失与OmitStackTraceInFastThrow

目录 现象原因OmitStackTraceInFastThrow源码层面分析OmitStackTraceInFastThrow阈值是多少源码源代码解释 现象 异常没有堆栈信息。只有短短的异常类信息&#xff0c;例如java.lang.NullPointerException。 完整的异常堆栈示例&#xff1a; java.lang.NullPointerException…

爬虫逆向实战(十六)--某建筑市场平台

一、数据接口分析 主页地址&#xff1a;某建筑市场平台 1、抓包 通过抓包可以发现数据接口是list 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 通过查看“响应”模块可以发现&#xff0c;返回的响应是…

MAUI+Blazor:windows 打包踩坑

文章目录 前言MSIX安装文件如何发布选择Windows平台旁加载自定义签名版本号安装 总结 前言 最近打算研究一下MAUIBlazor&#xff0c;争取在今年年底之前彻底搞懂MAUIBlazor的安装模式&#xff0c; MSIX安装文件 Windows 4种安装程序格式MSI&#xff0c;EXE、AppX和MSIX优缺点…