验证码这样做,瞬间高出一个逼格!
前言
行为验证码通过用户的操作来完成验证,常见的行为验证码有拖动式和点触式。
拖动式验证就是根据图片显示,将指定的图形拖动到指定位置完成验证。而点触式验证码就是通过鼠标点击出示例中出现的图形完成验证。
行为验证码应用
今天推荐一款非常优秀的行为验证码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# 验证码类型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=2aj.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模式 必填 被点击之后出现行为验证码的元素idmode:'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;@PostMapping("login")
public ResultBean login(@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;}// 验证通过后,继续登录流程
}
至此,一款高颜值的行为验证码就完成啦。
技术交流群
最近有很多人问,有没有读者交流群,想知道怎么加入。
最近我创建了一些群,大家可以加入。交流群都是免费的,只需要大家加入之后不要随便发广告,多多交流技术就好了。
目前创建了多个交流群,全国交流群、北上广杭深等各地区交流群、面试交流群、资源共享群等。
有兴趣入群的同学,可长按扫描下方二维码,一定要备注:全国 Or 城市 Or 面试 Or 资源,根据格式备注,可更快被通过且邀请进群。
▲长按扫描
往期推荐
我出书了!各大框架都在使用的Unsafe类,到底有多神奇?类型转换神器Mapstruct新出的Spring插件真好用
如果你喜欢本文,
请长按二维码,关注 Hollis.
转发至朋友圈,是对我最大的支持。
点个 在看
喜欢是一种感觉
在看是一种支持
↘↘↘
验证码这样做,瞬间高出一个逼格!相关推荐
- 验证码这样做,瞬间高出一个逼格
前言 行为验证码通过用户的操作来完成验证,常见的行为验证码有拖动式和点触式. 拖动式验证就是根据图片显示,将指定的图形拖动到指定位置完成验证.而点触式验证码就是通过鼠标点击出示例中出现的图形完成验证. ...
- 深度掌握 Java Stream 流操作,让你的代码高出一个逼格
概念 Stream将要处理的元素集合看作一种流,在流的过程中,借助Stream API对流中的元素进行操作,比如:筛选.排序.聚合等. Stream` 的操作符大体上分为两种:`中间操作符`和`终止操 ...
- 这个方法可以让你的代码高出一个逼格——掌握 Java Stream 流操作
概念 Stream将要处理的元素集合看作一种流,在流的过程中,借助Stream API对流中的元素进行操作,比如:筛选.排序.聚合等. Stream` 的操作符大体上分为两种:`中间操作符`和`终止操 ...
- IDEA 这样配置注释模板,让你高出一个逼格
欢迎关注方志朋的博客,回复"666"获面试宝典 一.类注释 打开 IDEA 的 Settings,点击 Editor-->File and Code Templates,点击 ...
- IDEA这样配置注释模板,让你高出一个逼格!!
作者: Jitwxs 链接: https://jitwxs.cn/4135e0a9.html 一.类注释 打开 IDEA 的 Settings,点击 Editor-->File and Co ...
- 如何快速开发出一个高质量的APP
转自http://blog.csdn.net/uikoo9/article/details/51615955,感谢原作者 问题 经常有人问,做一个类似xx的app需要多久多少钱,这样的问题,这样问还算 ...
- 一个springboot能支持多少并发_吃透这篇,你也能搭建出一个高并发和高性能的系统...
" 什么是高并发?高并发是互联网分布式系统架构的性能指标之一,它通常是指单位时间内系统能够同时处理的请求数,简单点说,就是 QPS(Queries Per Second). 那么我们在谈论高 ...
- php ssc 源码_吃透这篇,你也能搭建出一个高并发和高性能的系统
什么是高并发?高并发是互联网分布式系统架构的性能指标之一,它通常是指单位时间内系统能够同时处理的请求数,简单点说,就是 QPS(Queries Per Second). 那么我们在谈论高并发的时候,究 ...
- 效率 用div做表格和tr_头一次见用电钻做电线接线,效率高出十倍,用几十年都不漏电...
大家好,我是家装设计师阿雅.头一次见用电钻做电线接线,效率高出十倍,用几十年都不漏电,现在越来越多的年轻人开始加入购房大军,安置人生的第一个安乐窝,但是面对装修,家居,电器等选购方面的问题上,可能都没 ...
最新文章
- 惠普z840工作站linux,全模块战神 惠普旗舰级Z840工作站评测
- Java多线程知识点整理(线程池)
- Google 是如何定制 Material 主题的?
- EWM RF 开发常用代码
- mysql ab复制_实现mysql的ab复制(a-b-b,a-b-c)
- SqlServer双机热备技术实践笔记
- HIVE 数据倾斜浅谈
- JS——scroll动画
- 阿里云服务器如何修改密码
- 半平面交总结and模板
- VBA常用实例 | OUTLOOK批量下载选中邮件中的附件
- 【人机交互技术】Web界面设计
- win10安装过程中一直卡在海内存知己天涯若比邻界面解决方法
- Android编程实现贪吃蛇游戏,Android制作贪吃蛇游戏
- 有翅膀的java游戏_翅膀只是为了拉风?在这几款游戏中,带上翅膀真的能飞
- matlab蒙特卡罗变量变换的分布,使用 copula 仿真相关随机变量
- 企业邮箱托管外包后安全吗?企业邮箱安全须知
- 【Markdown】编辑器使用技巧大汇总4。集合运算符的表示($\in$ 等),箭头符号的表示($\uparrow$ 等),使用指定的字体,转义字符的输入
- Maven从入门到放弃
- input 在ios环境下,input选中出现灰色背景