点击某个物体人机验证码java,captcha: 行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含h5/flutter/uni-app的源码和实现...

uni-app在线体验(微信小程序，请使用微信扫一扫)

uni-app H5页面在线体验(扫一扫)

      

微信小程序                  uni-app H5

如果图片未能正常展示，可查看码云，和github同步 码云

1 总体功能概述

1.1 组件介绍

行为验证码采用嵌入式集成方式，接入方便，安全，高效。抛弃了传统字符型验证码展示-填写字符-比对答案的流程，采用验证码展示-采集用户行为-分析用户行为流程，用户只需要产生指定的行为轨迹，不需要键盘手动输入，极大优化了传统验证码用户体验不佳的问题；同时，快速、准确的返回人机判定结果。

目前对外提供两种类型的验证码，其中包含滑动拼图、文字点选。如图1-1、1-2所示。

     

图1-1 滑动拼图(水印自定义)               图1-2 文字点选(水印自定义)

1.2 概念术语描述

术语

描述

验证码类型

1)滑动拼图 blockPuzzle 2)文字点选 clickWord

验证

用户拖动/点击一次验证码拼图即视为一次“验证”，不论拼图/点击是否正确

二次校验

验证数据随表单提交到产品后台后，产品后台需要将验证数据发送到集成jar包的/captcha/verify接口做二次校验，目的是核实验证数据的有效性。

1.3 基本设计描述

1.3.1 组件工作流程图

①用户访问产品应用页面，请求显示行为验证码

②用户按照提示要求完成验证码拼图/点击

③用户提交表单

④验证数据随表单提交到产品后台后，产品后台需要将验证数据发送到集成jar包的/captcha/verify接口做二次校验，目的是核实验证数据的有效性。

⑤集成jar包返回校验通过/失败到产品应用后端，再返回到前端。

如图1-3所示。

图 1-3 流程时序图

目录结构

-core-captcha，maven编译

后端java源码，依赖redis

启动前请确认application.properties中配置(底图路径请确认无误)

若访问报跨域问题，将com.anji.captcha.config.CorsFilter注释打开。

启动成功后地址：http://127.0.0.1:8086

-view-web vue项目

进去当前文件夹，npm install

vue源码

启动前请确认\view\web\src\components\verifition\utils\axios.js

axios.defaults.baseURL = "http://127.0.0.1:8086"

//本地启动请注释当前行

//config.data = signUtil.sign(token, config.data);

地址是否正确

启动命令：

npm start

-view-uni-app 微信小程序

进去当前文件夹，npm install

vue源码

启动前请确认:

\view\uni-app\src\pages\verify\utils\request.js

let baseUrl = "https://mirror.anji-plus.com/api"

地址是否正确

打包命令：

npm run dev:mp-weixin

打包成功，会在当前目录生成dist/dev/mp-weixin文件夹

将mp-weixin添加到微信开发者工具小程序启动

appId请在微信公众平台自行申请

-view-flutter-demo 手机App

安装Android Studio / flutter / Dart

以及相关的环境配置

启动前请确认:

\view\flutter\demo\lib\request\HttpManager.dart 65行请求后端地址

运行：

运行 main.dart

更详细的前后端接入文档，请查看WiKi

近期计划，招募贡献者：

增加html示例

增加weex示例

增加ReactNative示例

增加IOS示例

增加Android示例

欢迎进微信群沟通