Skip to content

JS SDK

BumoCaptcha

typescript
type BumoCaptcha = (options: OptionsType) => void;

interface OptionsType {
  containerId: string; // 容器HTML元素ID
  id: string; // 申请的产品 ID
  timeout?: number; // 接口请求超时时间,默认 10s
  placeHolder?: string; // 默认 placeholder
  succussPlaceHolder?: string; // 成功后的 placeholder
  loadingPlaceHolder?: string; // 判断重的 placeholder
  retryPlaceHolder?: string; // 重试的 placeholder
  headlessPlaceHolder?: string; // 检查为 headless 时 placeholder
  successCallback?: (captchaId: string) => void; // 滑动检测通过后的回调
  failCallback?: () => void; // 滑动检测未通过后的回调
}

自定义样式

JS SDK 提供一套默认样式,通过 CSS value 实现,可以通过覆盖 CSS value 来实现自定义样式。比如容器元素 ID 为 BUMO_CAPTCHA,那么就可以在 CSS 中这样实现自定义样式:

css
#BUMO_CAPTCHA {
  --bmcc-height: 40px; // 滑轨高度
  --bmcc-bg: #e7e9e8; // 滑轨背景色
  --bmcc-fg: #585a5a; // 滑轨文字颜色
  --bmcc-border-radius: 4px; // 滑轨滑块圆角
  --bmcc-block-border-color: #d8dad9; // 滑块边框颜色
  --bmcc-block-bg: #fff; // 滑块背景色
  --bmcc-block-fg: #d8dad9; // 滑块文字颜色
  --bmcc-success-fg: #28a745; // 成功文字颜色
  --bmcc-error-fg: #f44336; // 失败文字颜色
}

服务端

校验接口

  • 接口地址:https://captcha.bumo.cc/api/captcha/server/get-result
  • 请求方式:POST

请求头

typescript
headers: {
  'content-type': 'application/json',
  referer: 'https://[域名地址]', // 域名白名单中的域名
  authorization: 'Bearer [API-KEY]', // 申请的 API KEY
  'x-id': '[captchaId]', // 产品 ID
},

请求参数

typescript
// `captchaId` 为JS SDK的`successCallback`获取的`captchaId`
body: JSON.stringify({ r: captchaId }),

返回值

{
    "data": {
      p: boolean; // 检测是否通过
    },
    "code"?: number,
    "message"?: string,
    "success": boolean
}