网站首页 > 知识剖析 正文
众所周知,开源的图形验证码kaptcha已经广泛使用多年了,随着springboot的发展壮大,kaptcha也有了基于springboot的starter模式,这让kaptcha的使用更加的简单,下面就介绍一下如何使用kaptcha starter包来快速实现图形验证码。
引入starter包
kaptcha最早是以jar包的方式发行的,如果要使用就要引入一系列的包,而且要遵循规范引入xml的配置,并且要bean化,虽然步骤不多,但是也比较繁杂一些,自从springboot使用了starter模式,就让这些工作来的更为简单。首先在要使用kaptcha的工程中引入kaptcha的starter包。
<!--kaptcha依赖包-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>kaptcha-spring-boot-starter</artifactId>
<version>1.1.0</version>
</dependency>
配置kaptcha
starter模式的配置是和工程主体配置一体化的,也就是放置到application.yml中,相关参数和原先的kaptcha一致,不在多述。
#图形验证码配置
kaptcha:
height: 50
width: 200
content:
length: 4
source: 0123456789abcdefghijklmnopqrstuvwxyz
space: 2
font:
color: blue
name: 宋体,楷体,微软雅黑
size: 40
background-color:
from: lightGray
to: white
border:
enabled: true
color: black
thickness: 1
开始使用
通过@Autowired注解kaptcha就可以直接使用了。
@Autowired
private Kaptcha kaptcha;
kaptcha只提供了三个方法:
1. 生成验证码render();
@GetMapping("/render")
@ApiOperation(value = "获取图形验证码", notes = "图形验证")
public void render() {
kaptcha.render();
}
2. 输入码验证
@PostMapping("/valid")
@ApiOperation(value = "图形验证码验证", notes = "图形验证")
@ApiImplicitParams({
@ApiImplicitParam(paramType = "query", name = "code", value = "输入验证码", dataType = "String")
})
public ResponseData validDefaultTime(@RequestParam String code) {
ResponseData result=new ResponseData();
try {
kaptcha.validate(code);
result.setStatus(ResponseCode.SUCCESS);
}catch (KaptchaIncorrectException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_ERROR);
}catch (KaptchaNotFoundException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_NOTFOUND_ERROR);
}catch (KaptchaRenderException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_RENDER_ERROR);
}catch (KaptchaTimeoutException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_EXPIRED_ERROR);
}
return result;
}
这里强调一下异常处理,validate方法只有验证成功返回true,其他错误都是通过异常暴露的,所以在程序处理的时候要捕获这些异常并进行相关处理。
3. 输入验证码超时设置验证
@PostMapping("/validTime")
@ApiOperation(value = "图形验证码验证,有效期60秒", notes = "图形验证")
@ApiImplicitParams({
@ApiImplicitParam(paramType = "query", name = "code", value = "输入验证码", dataType = "String")
})
public ResponseData validWithTime(@RequestParam String code) {
ResponseData result=new ResponseData();
try {
kaptcha.validate(code,60);
result.setStatus(ResponseCode.SUCCESS);
}catch (KaptchaIncorrectException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_ERROR);
}catch (KaptchaNotFoundException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_NOTFOUND_ERROR);
}catch (KaptchaRenderException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_RENDER_ERROR);
}catch (KaptchaTimeoutException e){
result.setStatus(ResponseCode.GRAPHIC_VERIFICATION_EXPIRED_ERROR);
}
return result;
}
这个方法和2的方法类似,只是增加了超时设置。
前端使用
<div>
<img alt="验证码" onclick="this.src='/graphic/render?d='+new Date()*1" src="/graphic/render"/>
</div>
<form action="/graphic/valid" method="post">
<input type="text" name="code"/>
<input type="submit" value="提交"></input>
</form>
猜你喜欢
- 2024-11-15 JavaScript网页截屏方法,你get到了嘛?
- 2024-11-15 老师的职业生涯-作为教师,如何规划自己的职业生涯
- 2024-11-15 Vue 3 组件开发(一):搭建表格编辑系统 - 环境搭建
- 2024-11-15 Vue 3学习:2. 项目结构及变化点(vuecli2项目结构)
- 2024-11-15 Blob-对象介绍(blob类型数据)
- 2024-11-15 管理用户焦点的前端3大顶级库(前端如何设置管理系统权限)
- 2024-11-15 Java实现图形验证码程序(java图形验证码的生成)
- 2024-11-15 html基础必备-图像标记,前端小白一看就会
- 2024-11-15 使用原生js、css和html实现图片画廊组件
- 2024-11-15 Python爬虫,高清美图我全都要!爬取你想要的,嘿嘿嘿
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)