Buyan-Captcha-v0.1.8-alpha介绍

开发前言

请直接参考这个链接我用了一个月的时间开发了个行为验证的组件这里不在重复啰嗦

效果预览

Buyan-Captcha介绍 Buyan-Captcha介绍 Buyan-Captcha介绍

为了防止自动化通过比对内环外侧和外环内侧的像素色差来实现内外环咬合来进行破解

画布的内容将会随机偏移,这样子可以一定程度的防止通过相邻的像素来进行破解

所以如果出现这个情况是很正常的,用户只需要自己大概判断一下位置就好

以下是一个例子

Buyan-Captcha介绍

验证流程

用户点击登入或者发送验证码,发送请求并显示行为验证码

用户按照提示要求完成验证

成功后再执行后续的回调

验证票据将随回调提交到您的后台,您的后台需要调用 Buyan-Captcha 做二次校验

返回校验通过或失败再到您的应用后端,再返回到前端

Buyan-Captcha介绍

上面说过因为行为验证仍然会被破解,所以你应该还需要其他的方案配合验证

参考一下网上的的各式各样的爬虫破解,你会发现有很多相关的教程

哪怕是各位大厂也没有办法完全进行避免,所以你应该搭配其他的一些服务进行配合验证

因为我自己用的地方就只有评论组件等,所以我使用邮箱验证码来进行兜底

当然你也可以使用一些像什么手机短信,手机语音电话的方法进行兜底

拦截占比

在保证一定安全性的前提下,要确保正常用户都能够顺利通过验证码验证是不可能的

我都是拿自己来进行测试的

但也不能保证自己一次就通过(因为我调试的时候是使用我的二次元图片,所以图片非常花)

导致我自己也过不去🥲

如果验证码的难度过高,导致正常用户的验证成功率过低

可能会影响用户体验,甚至可能导致用户流失

毕竟也不能设置的过于严格或简单

所以我通过误判率,误识率加上混淆矩阵来进行动态调整决策树在不同阈值下对正常和异常行为的处理

你可以观察阈值动态调整前后用户流失率的变化

如果使用该模块后发现用户流失率明显上升

可能意味着阈值调整影响了用户体验,导致部分用户放弃使用

你可以收集用户对行为验证过程的反馈意见

如问卷调查、在线反馈等方式获取用户的主观评价并将数据汇报给我

我会进行长期稳定性评估并且保证模型更新频率

后期维护

我会定期更新验证码的生成算法和验证逻辑,增加攻击者破解的难度

并且通过验证成功率来进行自适应调整验证的严格系数,如果大家通过率都高就设置严格点

当然了若系统检测到大量来自同一 IP 地址的异常验证请求,自动提高验证码的严格程度

其他问题

可靠性

当前为测试版本,暂不提供服务等级协议(SLA)保障

可能出现网络波动导致服务短暂延迟,建议进行测试使用后再确定是否使用

收费情况

服务目前免费,但因网络环境复杂,可能出现偶尔异常。如遇问题,欢迎联系反馈

服务承诺

我会致力于提供稳定、可靠的验证服务

同时保留根据使用情况调整规则的权利。以防止算法会被突破

您的理解与使用是我服务稳定运行的关键!

测试案例

部署接入

1. 获取应用

1. 验证域名所有权

登录您的域名管理页面,增加一个 解析记录

配置:

2. 验证生效

您可以通过以下命令验证是否生效

按下 Win + R 组合键,输入 cmd 并回车,或者在开始菜单中搜索 命令提示符 并打开

注意:请将您的域名替换到以下命令中

nslookup -type=TXT _buyancaptcha.主机记录

3. 获取 App Id

验证生效后,您的域名将自动添加到 Buyan-Captcha 白名单中

然后您可以通过以下接口获取您的 App Id

请求地址:

请求方式:GET

入参说明:

传参:

返回示例:

{
    "code": 200, // 请求是否成功标识,200 为成功
    "message": {
        "host": "qaqbuyan.com", // 生效的域名
        "appid": "59034b4a100c01ad", // 该域名的 App Id
        "appkey": "KJ5ue8y3AKlDDBQa", // 该域名的 App Key, 用于刷新 App Id
        "time": "2025-05-02 16:58:38" // 该域名的 App Id 生成时间
    }
}

获取应用后,需要将 App Id 通过 刷新令牌 接口获取到 Token 并替换到以下代码中

常见问题

支持多级域名,如果设置为主域名,那么该域名下都可以使用,否则只能在该级域名下使用

TXT 解析一般在 10 分钟后生效。如果您无法直接设置您的域名,请联系您的域名提供商

如果您的域名已经设置了 TXT 解析,但是解析值不正确,您可以尝试删除该解析记录,然后重新添加解析记录

获取到 App Id 后可将该记录删除

2. 引入脚本

生成验证码的插件可通过以下方式引入:

<script src="https://qaqbuyan.com:88/buyan_captcha?js" type="text/javascript"></script>

3. 引入样式

正常情况下,会检测当前页面环境并自动植入样式表,当然开发者也可手动在页面植入样式表

<link rel="stylesheet" href="https://qaqbuyan.com:88/buyan_captcha?css" type="text/css" />

4. 调用方法

以下两个方法选择其中一种方法即可

JS API校验

buyanBehaviorCaptcha({
    // 必选,请求验证信息的 Token
    token: "e1ffkkpMtdke8DQe9KAorNZ7Z9rOi7ZZxOr4kh1L6I7TwWutE/S+qxs9bwZbaUwqaObIbg",
    // 必选,点击触发,仅支持 #id 跟 .class
    click: "#button",
    // 必选,插入的 DOM,仅支持 #id 跟 .class
    insertion: "#captcha-div",
    // 可选,图片的 URL,一定要为随机的 api 图片,防止获取到 底图
    // 需要让 Buyanbot 可以访问到,相关介绍: https://qaqbuyan.com:88/Buyanbot.html
    // 可以进行链接跟踪,即跟踪重定向到图片
    picture: "https://qaqbuyan.com:88/api/二次元/?type=pc",
    // 必选,成功的回调
    success: function (params) {
        // params 为返回的唯一通过码
        // 需要在接下来的实现逻辑回传服务器
        // 使用该 票据 提交到 验证服务器 进行二次验证
        console.log('返回票据:', params);
    },
    // 可选,令牌过期的回调
    update: function () {
        console.log('刷新令牌');
    },
    // 可选,失败的回调
    fail: function () {
        console.log('验证失败');
    },
    // 可选,点击刷新的回调
    refresh: function() {
        console.log('刷新验证');
    }
});

Data API校验

Buyan-Captcha 支持通过自定义属性 buyan-captcha-config 自动初始化 UI 控件

在需要的元素上添加 buyan-captcha-config 属性,属性值为 JSON 格式的配置信息

Buyan-Captcha 会自动解析配置信息并初始化 UI 控件

在页面加载完成后自动生成验证按钮组件

以下为一个简单的示例:

<div buyan-captcha-config="{token:'e1ffkkpMtdke8DQe9KAorNZ7Z9rOi7ZZxOr4kh1L6I7TwWutE/S+qxs9bwZbaUwqaObIbg',click:'#showCaptchaButton',insertion:'#captcha-div',picture:'https://qaqbuyan.com:88/api/二次元/?type=pc',success:function(params){console.log('服务器返回的参数:',params);},update:function(){console.log('刷新令牌');},fail:function(){console.log('验证失败');},refresh:function(){console.log('刷新验证');}}"></div>

注意事项

再您使用该接口或组件时,视为默认同意隐私协议:Buyan-Captcha隐私协议

注意 App Id 生成后,再一次请求将获取不到 App Id 跟 App Key

请妥善保管 App Key ,该 App Key 是用于 App Id 泄露或忘记时刷新 App Id的唯一方法

忘记 App Id 后可用 App Key 通过 刷新应用 ,进行更新

并且保证 App Key 不要被泄露,防止 App Id 被频繁刷新,导致服务失效

如果设置了图片的 URL 一定要为随机的 api 图片,不能为固定的图片

并且请定期更换验证码所使用的图片,避免攻击者通过分析固定图片来找到破解方法

或只允许让 Buyanbot 可以访问到这个随机的 api 图片

验证 Buyanbot 的方法

请求地址:

请求方式:POST

入参说明:

传参:

传头:

返回示例:

{
    "code": 200,// 请求是否成功标识,200 为成功
    "message": "✔️171.107.74.169是通过验证的,在 2024-04-19 08:15:17 到 2024-04-27 07:52:18 的时间段内使用过"
}

觉得麻烦就像腾讯那个样子使用 AI 生成的图片

还有就是我上面说了我默认的图片是二次元图片,所以图片非常花

导致我自己也过不去🥲,为了防止用户看不太清,导致无法滑到正确的位置

您不应该设置太花里胡哨的验证码图片,当然你可以在攻击频繁的时候设置

接口文档

通过以下的 Buyan-Captcha API,接入的开发者可以实现一些功能,例如刷新 Token 二次验证等

刷新应用

用于刷新您的 App Id ,在忘记 App Id 或泄露 App Id 时进行刷新

注意:刷新后,之前的 App Id 将会失效

请求地址:

请求方式:GET

传参:

返回示例:

{
    "code": 200, // 请求是否成功标识,200 为成功
    "message": {
        "host": "qaqbuyan.com", // 当前 App Key 对应的域名
        "appid": "59034b4a100c01ad", // 当前更新的 App Id
        "appkey": "fd75f18cd5504264", // 当前更新的 App Key
        "time": "2025-04-27 19:55:36" // 该域名的 App Id 第一次的生成时间
    }
}

刷新令牌

用于您的网站后台定时通过 Buyan-Captcha 刷新,来获取验证所需要的 Token 及进行二次验证

注意是后台请求,而不是前端进行请求,请避免 App Id 泄露

Token 有效期默认为 24 小时

请求地址:

请求方式:GET

传参:

返回示例:

{
    "code": 200, // 请求是否成功标识,200 为成功
    "message": {
        "token": "e1ffkkpMtdke8DQe9KAorNZ7Z9rOi7ZZxOr4kh1L6I7TwWutE/S+qxs9bwZbaUwqaObIbg", // 当前有效的 token
        "expire": "1744039836" // 到期时间
    }
}

二次验证

前端验证完成后,会返回 票据 ,通过该 票据 进行二次验证

您的网站后台调用 Buyan-Captcha 的验证服务器接口获取验证结果

验证结果最长保留 5 分钟,在您的网站后台成功获取结果后立即删除

请求地址:

请求方式:GET

入参说明:

返回示例:

{
    "code": 200, // 请求是否成功标识,200 为成功
    "message": true // 验证结果,true 为验证通过,false 为验证失败
}

请求统计

统计全部的调用以及验证次数

请求地址:

请求方式:GET

入参说明:

返回示例:

{
    {
  "code": 200,          // 请求是否成功标识,200 为成功
  "message": {
    "request": {        // 旋转请求统计
      "total": 1888,    // 请求次数
      "yesterday": 0,   // 昨天的请求次数
      "day": 207,       // 最近24小时请求次数
      "week": 1528,     // 最近一个星期请求次数
      "month": 1888     // 最近一个月请求次数
    },
    "verify": {         // 验证统计
      "insensitive": {  // 无感验证统计
        "yesterday": {  // 昨天的验证次数
          "success": 25,// 成功次数
          "fail": 97
        },
        "day": {        // 今天的验证次数
          "success": 25,// 成功次数
          "fail": 98
        },
        "week": {       // 最近一个星期请求次数
          "success": 25,// 成功次数
          "fail": 98
        },
        "month": {      // 最近一个月请求次数
          "success": 25,// 成功次数
          "fail": 98    // 失败次数
        }
      },
      "rotate": {       // 旋转验证统计
        "yesterday": {  // 今天的验证次数
          "success": 0, // 成功次数
          "fail": 5     // 失败次数
        },
        "day": {        // 今天的验证次数
          "success": 0, // 成功次数
          "fail": 5     // 失败次数
        },
        "week": {       // 最近一个星期请求次数
          "success": 0, // 成功次数
          "fail": 5     // 失败次数 
        },
        "month": {      // 最近一个月请求次数
          "success": 0, // 成功次数
          "fail": 5     // 失败次数
        }
      }
    }
  }
}