前端组件

验证组件是一个标准 Web Component（<cap-widget>），一行 <script> 引入，任何框架都能用。

引入

<script src="https://cdn.jsdelivr.net/npm/cap-widget@latest"></script>

TIP

生产环境建议钉住具体版本号，或把该文件下载后自托管，避免依赖第三方 CDN。

表单方式（零 JavaScript）

组件放在 <form> 内时，会自动注入隐藏的 cap-token 字段并随表单一起提交：

<form action="/submit" method="POST">
  <cap-widget data-cap-api-endpoint="https://api.capcat.xyz/<site-key>/"></cap-widget>
  <button type="submit">提交</button>
</form>

JavaScript 方式（SPA / 自定义流程）

监听 solve 事件拿到 token，自行决定何时发送：

const widget = document.querySelector("cap-widget");
widget.addEventListener("solve", (e) => {
  const token = e.detail.token;
  // 把 token 发给你的服务端、解锁提交按钮等
});

常用属性

属性	说明
data-cap-api-endpoint	验证服务地址，格式 https://api.capcat.xyz/<site-key>/（site key 在控制台创建站点时获得），必填
data-cap-worker-count	求解使用的 Web Worker 数量，默认按设备核数

更完整的属性、主题定制与 React / Vue / Svelte 等框架接入示例，参见上游文档 Widget 章节。