предисловие
Код подтверждения поведения проверяется действиями пользователя. Общие коды подтверждения поведения включают перетаскивание и касание.
Проверка перетаскиванием заключается в перетаскивании указанного изображения в указанное положение в соответствии с отображаемым изображением для завершения проверки. Сенсорный код проверки предназначен для завершения проверки, щелкнув изображение, показанное в примере, с помощью мыши.
Применение кода проверки поведения
Сегодня я рекомендую очень хороший код проверки поведенияAJ-Captcha(адрес проекта**git ee.com/angie-plus/ from…**) этот проект включает в себя два типа кодов подтверждения: скользящая головоломка и текстовый клик.Помимо встроенного взаимодействия, он также обеспечивает всплывающее взаимодействие, которое совершенно не влияет на исходный макет пользовательского интерфейса.
AJ-CaptchaПроцесс проверки выглядит следующим образом:
- Пользователь посещает страницу входа и отправляет запрос на отображение кода подтверждения поведения.
- Пользователь завершает головоломку с проверочным кодом/нажимает в соответствии с запросом
- Пользователь отправляет форму, а внешний интерфейс вместе отправляет вывод второго шага в фоновый режим.
- После того, как данные проверки будут отправлены в фон с формой, фон должен вызвать captchaService.verification для вторичной проверки.
- Шаг 4 Верните подтверждение прохождения/непрохождения проверки в серверную часть приложения продукта, а затем вернитесь во внешний интерфейс. Как показано ниже.
Что, если выMavenРазработчикам очень удобно пользоваться, а мейнтейнеры проекта запихнули зависимости в центральный репозиторий. 90% работы делается просто введением зависимостей. Далее вам нужно только выполнить вторую проверку в интерфейсе входа.
Проект интегрируется сhtml,vue,flutter,uni-app,Android Kotlin,IOS,phpи другие интерфейсные языки, вы можете легкоAJ_Captchaинтегрированы в проект.
Далее мы используемSpring Boot+htmlВозьмите пример, чтобы увидеть, как быстро интегрироватьсяAJ_CaptchaЗавершите процесс взаимодействия кода проверки поведения.
Первый шаг, внедрение зависимостей AJ Captcha в Springboot
<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;
}
// 验证通过后，继续登录流程
}
Сегодняшнее содержание представлено здесь. Воспользуйтесь этой возможностью, чтобы попытаться использовать этот ценный код подтверждения поведения для замены графического кода подтверждения в проекте.
\