Appearance
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
}