Skip to content

介绍

面向小微企业和个人开发者,简单易用低成本的行为式验证码服务。 背靠云安全服务,自研策略算法,经过不墨自身产品服务广泛实践验证。 DEMO

快速开始

简单几步完成接入!

前提准备

  1. 使用协议

使用前请您仔细查看使用协议,继续使用则表示您已阅读并完全同意协议。

  1. 获取产品 ID

产品 ID 用于 JS SDK 初始化,登录 行为验证码管理端,选择购买或试用即可获得产品 ID(新用户可获得一个月免费试用)。

  1. 获取 API KEY

API KEY 用于后端接口调用,请严格保密不要泄露给任何人也不要上传到 Github 等平台。登录行为验证码管理端,新建行为验证码 API KEY 即可。

  1. 申请域名白名单

用户产品的域名必须申请白名单并审核通过后才能正常使用 JS SDK,本地调试时(127.0.0.1、localhost)不受影响。登录域名白名单管理,添加域名。

域名基本要求要经过 ICP 备案且网站服务、内容符合国家法律法规和社会道德,一般工作日当天完成审核,最迟不超过 3 个工作日。

流程介绍

[业务网站] ← 接入 [行为验证码JS SDK]

[业务后端] 校验 → [行为验证码后端服务]

具体接入

一. 加载 JS SDK

html
<script src=`https://cdn.bumo.cc/apps/captcha-sdk/captcha.js?t=${Math.floor(Date.now() / 60000)}`></script>

加入时间戳是为了保证 JS SDK 的更新,避免缓存问题。

二. 初始化 JS SDK

javascript
const captcha = new window.BumoCaptcha({
  containerId: "BUMO_CAPTCHA", // 滑动验证码容器元素的 ID
  id: "[产品ID]", // 产品 ID
  successCallback: function (captchaId) {
    // 滑动成功后触发的回调函数,captchaId 是滑动验证码的唯一标识,需要将此值传递给后端进行校验
    setCaptchaId(captchaId);
  },
});

三. 后端校验

typescript
import fetch from "node-fetch";

export const captchaVerify = async (options: { captchaId: string }) => {
  const { captchaId } = options;
  const controller = new AbortController();

  // 设置超时时间 10s
  setTimeout(() => controller.abort(), 10000);

  try {
    const response = await fetch(
      `https://captcha.bumo.cc/api/captcha/server/get-result`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          referer: "https://bumo.cc",
          authorization: "Bearer [API-KEY]",
        },
        body: JSON.stringify({ r: captchaId }),
      }
    );
    if (response.status === 200 || response.status === 400) {
      // 服务端正常返回
      const data = (await response.json()) as {
        code: number;
        data: {
          p: boolean; // 检测是否通过
        };
        message: string;
        success: boolean;
      };
      if (data.success) {
        return {
          isPass: data.data.p,
        };
      }
      if (data.code === 20001) {
        // 超过请求速率限制,为避免影响业务,建议通过
        return {
          isPass: true,
        };
      }
    }
    if (response.status === 401 || response.status === 403) {
      // 无权限,一般是authorization key过期,或者错误
      return {
        isPass: false,
        status: 401,
      };
    }
    throw response;
  } catch (e) {
    // 前端滑动验证时,服务端故障,纯前端生成的 ID,若此时调用后端服务也出现服务器故障,则可认为滑动验证码服务端故障
    // 此时为避免导致业务不可用,应该判断通过
    const IS_NO_SERVER_ID = captchaId.startsWith("NOSERVER_");
    if (IS_NO_SERVER_ID) {
      return {
        isPass: true,
      };
    }

    // 其他错误
    return {
      isPass: false,
    };
  }
};