后端应用安全图像处理【免费下载链接】captcha行为验证码(滑动拼图、点选文字)前后端(java)交互包含h5/Android/IOS/flutter/uni-app的源码和实现项目地址https://gitcode.com/gh_mirrors/captc/captcha点击查看免费下载导读本文基于开源行为验证码项目 captcha 的 Flutter 示例工程系统讲解如何在 Flutter 应用中接入「滑动拼图」与「点选文字」两类行为验证码从 pubspec.yaml 依赖引入、showDialog弹窗式调用组件到后端接口地址切换、secretKeyAES 加密点选坐标再到校验通过后token 坐标的二次校验串构造与回传。读完本文你将掌握一套可直接复制运行的 Flutter 端验证码接入方案并理解其与后端/captcha/get、/captcha/check两个核心接口的完整交互链路。一、工程结构与依赖引入Flutter 示例工程位于仓库的 view/flutter/demo含 Dart 2.x 版本与 view/flutter/demo_null_safety空安全版本。其lib目录按职责划分了四个模块captcha/两个验证码组件 —— block_puzzle_captcha.dart滑动拼图、click_word_captcha.dart点选文字request/网络请求与加密封装 —— HttpManager.dart、SignConfig.dart、encrypt_util.darttools/工具类 —— object_utils.dart、widget_util.dart入口示例main.dart、login.dart。接入时按对应版本在pubspec.yaml中添加三个依赖见 demo/pubspec.yamldependencies: dio: ^3.0.9 # 网络请求 steel_crypt: ^1.5.3 # AES 加密AesCrypt encrypt: ^4.0.0 # 加密辅助库其中steel_crypt提供组件内部与二次校验使用的AesCrypt(key, ecb, pkcs7)加解密实现dio负责与验证码服务端通信。示例工程声明了sdk: 2.1.0 3.0.0若使用空安全环境可参考同目录下的demo_null_safety版本。二、快速接入两种验证码组件的弹窗调用接入的核心方式是通过showDialog弹出验证码组件并在构造时传入成功/失败回调。以下代码可直接放入任意BuildContext可用的页面示例见 login.dart// 点选文字 //import package:captcha/captcha/click_word_captcha.dart; static void loadingClickWord(BuildContext context, {barrierDismissible true}) { showDialogNull( context: context, barrierDismissible: barrierDismissible, builder: (BuildContext context) { return ClickWordCaptcha( onSuccess: (v){//成功回调回调为加密后内容依据项目而定 }, onFail: (){ }, ); }, ); } // 滑动拼图 //import package:captcha/captcha/block_puzzle_captcha.dart; static void loadingBlockPuzzle(BuildContext context, {barrierDismissible true}) { showDialogNull( context: context, barrierDismissible: barrierDismissible, builder: (BuildContext context) { return BlockPuzzleCaptchaPage( onSuccess: (v){ //成功回调回调为加密后内容依据项目而定 }, onFail: (){ }, ); }, ); }两个组件的构造参数与事件回调含义如下表对应 README「事件」章节参数说明onSuccess可自定义回调内容根据自己服务定制onFail失败回调默认为空可自定义回调内容根据自己服务定制需要特别注意的是onSuccess回调携带的参数v是经过 AES 加密后的验证串而非明文服务端需要解密后才能还原出 token 与坐标进行校验下文第五节会详细展开。三、网络请求处理baseUrl 切换与 HttpManager验证码的获取与校验都通过 HttpManager.dart 发起。README 明确指出请求接口地址配置在 HttpManager 类中需要更改地址时替换baseUrl即可。//请求base url static String baseUrl http://127.0.0.1:8080; // static String baseUrl https://captcha.anji-plus.com/captcha-api;从源码实现可以进一步确认请求细节HttpManager.dart默认请求方式为postContent-Type 为application/json请求超时sendTimeout 1500015 秒组件内部通过HttpManager.requestData(/captcha/get, {...}, {})获取验证码通过HttpManager.requestData(/captcha/check, {...}, {})提交校验接口路径与参数均在组件源码中写死返回数据统一按repCode判断业务结果repCode 0000且repData非空视为成功类中还保留了SignConfig.signData(...)的签名逻辑MD5 签名见 SignConfig.dart当前默认注释关闭可按需启用。因此在接入自建后端时只需把baseUrl指向自己的验证码服务地址如本地http://127.0.0.1:8080无需改动组件代码。四、获取验证码与组件内部流程无论是点选还是滑动组件加载时都会先调用/captcha/get拉取验证码数据再从repData中解析关键字段。点选文字组件ClickWordCaptcha 源码 将服务端返回映射为ClickWordCaptchaModel字段来源用途imgStroriginalImageBase64验证码背景图Base64解码后渲染tokentoken本次验证码的令牌校验时回传secretKeysecretKey加密 key用于坐标 AES 加密wordList / wordStrwordList需要依次点选的字及提示文本UI 上会显示「请依次点击【xx】」用户每点一次记录一个Offset坐标组件内显示带序号圆点当点击次数等于wordList.length时自动触发校验源码见 click_word_captcha.dart。滑动拼图组件BlockPuzzleCaptchaPage 源码 从repData中取出originalImageBase64底图jigsawImageBase64滑块图token校验令牌secretKey加密 key。用户向右拖动滑块至目标位置后组件记录sliderXMoved滑动距离与固定纵坐标y: 5组成坐标提交校验校验结果通过 500ms 的AnimationController动画呈现「验证成功/失败」并在底部滑块区域切换绿/红配色与check/close图标block_puzzle_captcha.dart。两种组件都内置了右上角刷新按钮失败后也会自动重新拉取验证码。五、secretKey 与 AES 加密校验请求的构造README「请求注意」章节强调验证码接口返回中会有secretKey参数当secretKey有值时对坐标进行 AES 加密加密 key 为secretKey不加密时pointJson为坐标 JSON 序列化后的字符串。以点选验证码为例提交/captcha/check的请求体为{ pointJson: cryptedStr, captchaType: clickWord, token: _clickWordCaptchaModel.token }其中cryptedStr的构造逻辑与组件源码 click_word_captcha.dart 完全一致// secretKey 不为空 进行as加密 if(!ObjectUtils.isEmpty(_clickWordCaptchaModel.secretKey)){ var aesEncrypter AesCrypt(_clickWordCaptchaModel.secretKey, ecb, pkcs7); cryptedStr aesEncrypter.encrypt(pointStr); var dcrypt aesEncrypter.decrypt(cryptedStr); }即采用AES-ECB 模式 PKCS7 填充密钥为服务端下发的secretKey。滑动拼图的提交逻辑相同仅captchaType变为blockPuzzle坐标为{x: sliderXMoved, y: 5}block_puzzle_captcha.dart。后端收到密文后按同一密钥解密即可还原出用户坐标与真实滑块位置比对。六、二次校验token 与坐标的加密串构造验证码校验通过后前端需要把「验证凭据」交给业务系统由业务系统服务端与验证码服务端做二次校验。README「二次校验传出的参数」章节给出了标准构造方式组件源码实现见 click_word_captcha.dart// 如果不加密将 token 和坐标序列化通过 --- 链接成字符串 var captchaVerification $captchaToken---$pointStr; if(!ObjectUtils.isEmpty(secretKey)){ // 如果加密将 token 和坐标序列化通过 --- 链接成字符串进行加密加密密钥为 secretKey captchaVerification EncryptUtil.aesEncode(key: secretKey, content: captchaVerification); } checkSuccess(captchaVerification);要点归纳将校验用的token与坐标字符串用---分隔拼接若secretKey非空再对整个拼接串做 AES 加密复用同一把 key最终结果通过onSuccess回调传给业务层业务层应将其随登录/提交请求一并发送给自身服务端做二次校验防止验证码结果被绕过。加密工具封装在 encrypt_util.dart提供aesEncode/aesDecode两个方法统一使用AesCrypt(key, ecb, pkcs7)。另外需注意demo 中的checkSuccess在回调前还会用固定的BGxdEUOZkXka4HSj作为演示密钥再加密一次click_word_captcha.dart实际项目中应替换为与服务端约定的业务密钥。七、接入注意事项接口契约组件硬编码了/captcha/get与/captcha/check两个接口路径及repCode 0000的返回约定自建后端需与之对齐加密一致性坐标加密与二次校验串加密均使用服务端下发的secretKeyAES/ECB/PKCS7后端解密算法必须与此匹配坐标基准点选组件记录的是图片组件内的localPosition坐标滑动组件纵坐标固定为y: 5与后端图片尺寸默认 310x155的换算关系需保持一致版本注意示例基于 Dart 2.x 与 dio 3.x 编写新项目可参考 demo_null_safety 空安全版本并根据实际 Flutter/Dart 版本调整依赖。完成上述接入后即可在 Flutter 端实现与后端 captcha 服务参考仓库 service 目录下 go/php/java 等实现完整联通的「滑动拼图 / 点选文字」行为验证流程。赞分享后端应用安全图像处理【免费下载链接】captcha行为验证码(滑动拼图、点选文字)前后端(java)交互包含h5/Android/IOS/flutter/uni-app的源码和实现项目地址https://gitcode.com/gh_mirrors/captc/captcha点击查看免费下载相关推荐抖音视频video_id怎么获取从aweme_id到播放地址的完整指南抖音视频video_id怎么获取从aweme_id到播放地址的完整指南 开发仿抖音信息流想拿到某个视频的抖音视频video_id你在数据里先看到的往往是一后端应用安全图像处理AJ-Captcha 行为验证码接入指南滑动拼图与文字点选的前后端集成与二次校验实战AJ Captcha 行为验证码接入指南滑动拼图与文字点选的前后端集成与二次校验实战 本指南以 view/doc/docs/README.md https:/后端应用安全图像处理行为验证码 Spring Boot 后端接入指南基于 spring-boot-starter-captcha 的滑动拼图与文字点选二次校验实战行为验证码 Spring Boot 后端接入指南基于 spring boot starter captcha 的滑动拼图与文字点选二次校验实战 行为验证码滑后端应用安全图像处理上一篇Vulhub 复现Java JDK 8u232_b09 的 RMI Registry 反序列化命令执行绕过下一篇Authelia Kubernetes 集成完全指南Roadmap 落地现状、Helm Chart 部署与 Ingress 接入实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考