1.Python OpenCV 过点击式和滑动式形验证码的拖动拖动校验
2.前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)

Python OpenCV 过点击式和滑动式形验证码的校验

       在近期进行App抓包的过程中，我发现该App在特定时间会弹出验证码。验证源码验证源码完成验证后，拖动拖动系统会提供token，验证源码验证源码此token是拖动拖动发起正常请求所必需的。

       文章源码地址：github.com/ThinkerWen/C...

       以下是验证源码验证源码百度文库源码验证码的截图：

       弹出验证码的Response如下：

       完成验证码的Request如下：

       通过观察，我发现只需将验证码的拖动拖动点击坐标发送至完成验证码的接口，即可获取到token。验证源码验证源码因此，拖动拖动现在的验证源码验证源码目标是提取坐标。

       观察发现，拖动拖动这个验证码相对简单，验证源码验证源码因为它没有图案扭曲，拖动拖动所以通过率较高。验证源码验证源码南京源码开发同时，拖动拖动我也回忆起之前解决滑动验证码的方法（一并展示）。

       要通过验证码，首先需要将目标图案在背景上定位，找到其像素点。为此，我使用了Python的OpenCV库进行识别。

       1.提取：首先，我发现目标都是黑色图案，背景为透明。当我使用cv2.imread(front_image)加载时，显示一片漆黑。即使后来我使用了保留透明通道的tms 系统源码加载方式，结果依旧。

       为了解决这个问题，我决定剥离透明通道，将目标图案透明色设置为白色，这样目标图案就自然显现了。

       2.找到目标图的位置：接着，我将目标的三个图案分割出来，分别找出它们的像素位置。由于图案排列位置固定，我直接记录坐标进行像素分割。

       分割后，我将目标图和背景图都转化为灰度，以防止颜色干扰。aop源码代理

       然后进行最佳匹配。然而，匹配结果并不理想，无法准确找到所有三个目标图案，因此需要进一步优化。

       3.优化匹配方案：继续观察后，我发现背景中的目标图案总是白色的，因此我决定保留背景上的白色部分，其余部分转为黑色。

       为了尽可能保留完整的图案，我经过多次尝试，发现-区间的RGB颜色可以保留大部分目标图案的白色。

       同时，jquery源码介绍我将黑色的目标图案反转为白色。

       由于需要获取的是点击坐标，我将左上角坐标(x1,y1)进行+的偏移，以移动到图案本身上面。

       经过验证，现在的识别方法可以正常通过点击验证码。

       滑动验证码的解决方案与点击验证码类似，甚至现在常见的一种滑动验证码已经有了通用的代码。

       看雪ID：暮至夜寒

       看雪-安全社区|安全招聘|kanxue.com

       本文为看雪论坛精华文章，由暮至夜寒原创，转载请注明来自看雪社区

       阅读原文：

前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)

       本文将带领大家使用 Vue3 + Vite 来实现滑动验证码组件。组件实现将包括效果演示、技术实现、滑动验证码组件的使用方式、以及组件的交互流程等关键内容。

       首先，让我们预览一下滑动验证码实现的效果。在进行技术实现之前，我们需要明确组件的设计需求，并制定合理的开放 API。这里分享了滑动验证码组件优雅设计的原则，以及核心 API 的设计。滑动验证码组件的灵活性是其受欢迎的关键因素，包括但不限于背景颜色、滑块样式、滑动路径等可配置项。

       在具体实现过程中，需要实现以下几个核心功能：滑动验证、随机、随机位置、镂空效果、拖拽移动与验证逻辑等。我们将在 canvas 上实现不规则图形的绘制，包括路径、填充颜色、globalCompositeOperation 属性的设置等，确保图形不受背景影响。此外，实现随机与随机位置，以及镂空效果需要使用 canvas 的 imageData API，包括 imageData 和 putImageData 方法。

       接下来，我们将通过鼠标事件实现滑块的移动逻辑，并在拖拽结束后监听验证成功与失败的回调事件。在 Vue3 组件中，实现方式与之前 React 版本类似，主要区别在于 API 的使用与定义。

       实现滑动验证码组件后，将其发布到 npm 服务器，提供 npm 方式直接使用的方便性。打包组件时，使用 Vite 进行配置，发布后的组件结构将被展示。对有兴趣的开发者，可以查看完整的源码与打包过程的说明。

       组件的扩展性是其另一大优点，基于业务需求，可以对验证码进行改造，实现更复杂的功能或多种形态的验证码，欢迎开发者贡献自己的想法，共同打造有意思的验证码组件。

       后续规划中，将围绕图形可视化实现更多有趣的应用，如 3D 可视化、图形编辑器、可视化图表等，敬请期待。

       希望本文能对您有所启发，如对您有所帮助，请记得点赞与评论，让我们一起探索前端技术的精彩。