captcha.moe

组件试用

滑一下，看看它怎么工作。

这里加载的是正式接入使用的同一个组件，连接官网试用站点完成真实挑战。不需要账号，也不会消耗任何额度。

示例表单

创建一个账号

交互模式

默认显示滑条；访客使用键盘、读屏器或开启“减少动态效果”时，自动改为徽标。推荐。

外观

明暗
主色
圆角
尺寸
字体
captcha.moe 标志

试用使用官网的独立试用站点。正式接入时，许可由你的服务端创建，Secret 只保存在服务端。

用到你的网站

当前外观的接入代码

上面选的每一项都对应一个 data-* 属性，默认值不用写。需要更精细地匹配网站，也可以在自己的 CSS 里设置 --mc-accent、--mc-radius 等变量，或用 ::part() 调整各个部件。

查看全部外观选项 →
HTML · 当前外观
<script src="https://captcha.moe/widget.js" async defer></script>

<div class="moe-captcha"
     data-sitekey="你的 Site key"
     data-intent="{{ intent_id }}"
     data-endpoint="https://captcha.moe"
     data-theme="light"></div>

下一步

拿到 token 之后

组件完成只代表浏览器拿到了 token。表单提交时，由你的服务端向 /siteverify 兑换它，成功后才执行注册、登录或下单。

完成上方组件后，这里会显示 token 的开头
  1. 表单提交时带上隐藏字段 moe-captcha-response。
  2. 服务端用 Secret 调用 POST /siteverify，带上保存的 intent_id 与幂等键。
  3. 返回 success: true 后再执行业务。token 最长 120 秒有效，只能兑换一次。
阅读完整接入指南 →
Node.js · 服务端校验
// 提交时：兑换 token，成功后才执行业务
const saved = session.captcha;
const result = await fetch("https://captcha.moe/siteverify", {
  method: "POST",
  headers: {
    authorization: `Bearer ${process.env.CAPTCHA_SECRET}`,
    "content-type": "application/json",
  },
  body: JSON.stringify({
    response: form.get("moe-captcha-response"),
    intent_id: saved.intentId,
    action: "signup",
    hostname: "example.com",
    idempotency_key: saved.nonce,
  }),
}).then((res) => res.json());

if (result.success === true) {
  // 创建账号
}