流星雨人机验证

在线演示

选择一种方式体验人机验证

容器 <div data-captcha> 放在 <form> 内，验证成功后自动注入隐藏域 captcha_token；未通过验证时会拦截提交。
点击提交会在新标签打开服务端回显，能看到收到的表单字段。

查看全部代码

<form action="/api/register" method="post">
  <input name="username" required>
  <div data-captcha></div>      <!-- 唯一的接入标记 -->
  <button type="submit">提交</button>
</form>
<script src="https://captcha.example.com/captcha/loader.js"></script>

后端（Express）同时挂两个解析中间件即可支持表单与 JSON：
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.post('/api/register', requireCaptcha, handler);

点击按钮：弹出验证浮窗 → 拿到 token → 以 JSON 提交到 /api/v1/demo-echo

调用 Captcha.verifyModal() 才弹出浮窗，不会一进页面就打扰用户；用户关闭浮窗时 Promise reject，err.code === 'USER_CANCELLED'。

查看全部代码

<script src="https://captcha.example.com/captcha/loader.js"></script>
<script>
  document.querySelector('#submit').onclick = async () => {
    const { token } = await Captcha.verifyModal();   // 弹出验证浮窗
    const res = await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: 'u', captcha_token: token })
    });
    console.log(await res.json());
  };
</script>

点击上方按钮开始验证。

演示会调用快速令牌校验接口并消耗令牌。正式业务必须由自己的服务端调用 /api/v1/fast/check，不能信任前端校验结果。

查看对接文档 · MCP 接入