{T}
项目内容
课程名称未提供
当前章节登录注册中的行为验证与验证码方案
知识领域前端安全 / 登录注册 / 验证码与风控
学习目标理解常见验证码方案的差异，掌握行为验证与 Cloudflare Turnstile 的接入思路
整理时间2026-03-29
资料校对结合 Cloudflare 官方文档修正关键术语与接入细节

一、为什么登录注册场景需要验证能力 必须掌握

1.1 验证能力的业务价值

概念说明

登录、注册、找回密码、支付确认等接口，往往是恶意流量重点攻击的入口。常见风险包括：

  • 机器批量注册
  • 短信轰炸
  • 暴力破解账号密码
  • 爬虫滥刷活动接口
  • DDoS 或高频恶意请求

验证机制的核心目标不是“让用户更难操作”，而是“区分真实用户与自动化脚本/恶意流量”。

语法/用法

前端通常承担两类职责：

  • 在页面中挂载验证码或行为验证组件
  • 将验证结果随表单或接口请求一起提交给后端

后端通常承担两类职责：

  • 校验验证码结果或令牌是否合法
  • 基于风控策略决定是否放行请求

代码示例

ts
interface LoginPayload {
  username: string;
  password: string;
  captchaToken?: string;
}

async function submitLogin(payload: LoginPayload) {
  return fetch("/api/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(payload),
  });
}

注意事项

  • 前端只负责“收集验证结果”，不要把“是否通过验证”的最终判断留在前端。
  • 任何验证码方案都不能替代后端限流、日志审计、IP 风控等安全能力。

二、常见验证码与验证方案对比 重要

2.1 短信验证码

概念说明

短信验证码主要用于“确认手机号归属”和“二次校验身份”，本质上不等于高强度防机器人方案。

语法/用法

典型流程如下：

  1. 用户输入手机号
  2. 前端请求发送短信验证码
  3. 用户输入收到的验证码
  4. 后端校验验证码是否正确、是否过期、是否超过尝试次数

代码示例

ts
async function sendSmsCode(phone: string) {
  return fetch("/api/sms/send", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ phone }),
  });
}

注意事项

  • 发送短信前，最好先叠加图形验证码或行为验证，避免被恶意刷短信。
  • 必须限制发送频率、IP 频率、设备频率和单手机号日上限。
  • 短信验证码有成本，不能直接暴露在无保护接口前。

2.2 图形验证码 / 拖拽验证码 / 点选验证码

概念说明

这是最传统的反自动化方式，通过识别图片、拖拽拼图、点选目标图像等方式确认是否为真人操作。

语法/用法

典型接入方式：

  • 前端嵌入第三方验证码组件
  • 用户完成交互
  • 组件返回票据、校验串或 token
  • 前端把结果提交给后端
  • 后端调用服务商接口完成二次校验

代码示例

ts
type CaptchaVerifyResult = {
  token: string;
  challenge: string;
};

async function verifyBeforeRegister(result: CaptchaVerifyResult) {
  return fetch("/api/register/precheck", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(result),
  });
}

注意事项

  • 接入成本低，但对用户体验有影响。
  • 对视觉识别、移动端交互、弱网环境不够友好。
  • 第三方服务价格、配额、峰值限制会变化，生产环境要重点评估成本。

2.3 行为验证

概念说明

行为验证不一定要求用户手动识别图片，而是通过请求上下文、浏览器环境、行为轨迹、风险评分等信号判断访问是否可信。

语法/用法

行为验证通常综合以下信息：

  • IP 与地域分布
  • 请求频率
  • 设备指纹或浏览器信号
  • 鼠标、键盘、滚动等交互行为
  • 历史访问模式

代码示例

ts
function collectClientSignals() {
  return {
    userAgent: navigator.userAgent,
    language: navigator.language,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    screen: `${window.screen.width}x${window.screen.height}`,
  };
}

注意事项

  • 行为验证通常要和服务端风控联动，单独依赖前端采集信号价值有限。
  • 过度采集要注意隐私合规和最小必要原则。

三、Cloudflare Turnstile：无感验证码替代方案 必须掌握

3.1 Turnstile 是什么

概念说明

Cloudflare Turnstile 是一种用于替代传统 CAPTCHA 的验证方案。它倾向于通过浏览器环境与风险信号完成验证，在必要时才触发轻量交互，减少图片识别、九宫格点选这类高摩擦体验。

课程原文里提到的“ten style / turn style / cloud free / cloud flow”等说法，规范术语分别是：

  • Turnstile
  • Cloudflare
  • cf_clearance Cookie

语法/用法

Turnstile 常见模式：

  • Managed：推荐模式，根据风险动态决定是否需要交互
  • Non-Interactive：用户可见，但尽量无交互
  • Invisible：完全后台验证

代码示例

html
<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  async
  defer
></script>

<form id="login-form">
  <input name="username" />
  <input name="password" type="password" />
  <div
    class="cf-turnstile"
    data-sitekey="你的站点公钥"
  ></div>
  <button type="submit">登录</button>
</form>

注意事项

  • Turnstile 可以独立使用，并不要求整个站点必须托管在 Cloudflare 上。
  • 根据 Cloudflare 官方文档，免费计划当前支持最多 20 个 widgets，并支持不限量的验证请求；具体套餐能力仍应以官网实时文档为准。
  • 如果使用 Invisible 模式，需要关注隐私政策披露要求。

3.2 Turnstile 的工作原理

概念说明

Turnstile 在前端生成验证 token，后端再通过 Cloudflare 的 Siteverify API 校验 token 是否真实、是否过期、是否被重复使用。

语法/用法

完整流程：

  1. 前端页面加载 Turnstile 小部件
  2. Cloudflare 根据风险信号生成验证结果
  3. 前端拿到 token，例如 cf-turnstile-response
  4. 前端提交表单时把 token 一起发送到业务后端
  5. 后端调用 https://challenges.cloudflare.com/turnstile/v0/siteverify
  6. 后端根据校验结果决定是否继续登录、注册、发送短信等操作

代码示例

ts
async function loginWithTurnstile(formData: {
  username: string;
  password: string;
  turnstileToken: string;
}) {
  return fetch("/api/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  });
}

后端校验示例：

ts
async function validateTurnstileToken(token: string, remoteip?: string) {
  const params = new URLSearchParams();
  params.append("secret", process.env.TURNSTILE_SECRET_KEY || "");
  params.append("response", token);

  if (remoteip) {
    params.append("remoteip", remoteip);
  }

  const response = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      body: params,
    }
  );

  return response.json();
}

注意事项

  • 只在前端渲染组件但不做服务端校验，等于没有真正接入安全能力。
  • token 默认 5 分钟 失效，且只能校验一次。
  • secret key 必须保存在服务端，不能暴露到前端代码里。

3.3 cf_clearance 与预清除能力 了解

概念说明

标准 Turnstile 默认返回的是一次性校验 token。只有在开启 pre-clearance 等特定能力时，才会额外结合 cf_clearance Cookie，让后续请求在一定时间内通过 Cloudflare 边缘层的安全检查。

语法/用法

可以理解为：

  • 用户先完成一次可信校验
  • 后端仍然要校验 Turnstile token
  • 如果启用了 pre-clearance，Cloudflare 还会签发 cf_clearance
  • 后续请求在有效期内可以减少重复挑战，主要用于 Cloudflare 的 WAF / Challenge 体系

注意事项

  • 这不代表业务后端可以省略自己的接口鉴权与风控逻辑。
  • cf_clearance 更多是 Cloudflare 安全体系的一部分，不应与业务登录态混淆。
  • 不要把“拿到 Cookie”误解成“业务请求天然安全”，真正放行业务请求的依据仍然应该是你自己的鉴权与服务端校验结果。

四、验证码方案选型思路 重要

4.1 选型维度

概念说明

课程中用了多个服务商举例，核心不是记住价格，而是理解选型维度。

语法/用法

选择方案时建议关注：

  • 成本：按次计费、按峰值计费、包年包月
  • 可达性：目标用户所在网络环境能否稳定访问
  • 用户体验：是否需要频繁点图、拖拽、二次交互
  • 安全能力：是否支持风控、风险分级、服务端校验
  • 集成复杂度：前后端接入成本、运维复杂度
  • 合规要求：隐私政策、数据跨境、Cookie 披露

注意事项

  • 课程中提到的第三方价格属于示例性信息，服务商套餐会频繁调整，生产决策应以官网最新价格页为准。
  • 海外方案即使功能和价格有优势，也要评估国内访问稳定性。

4.2 一个实用的组合策略

概念说明

大多数项目不应该只依赖单一验证码方案，而应该做分层防护。

语法/用法

推荐的组合方式：

  1. 默认场景启用低摩擦行为验证，如 Turnstile
  2. 高风险场景叠加短信验证码或二次验证
  3. 接口层再补限流、黑名单、风控评分
  4. 针对注册、短信发送、密码重置分别配置不同阈值

代码示例

ts
function getRiskLevel(action: "login" | "register" | "sms") {
  const riskMap = {
    login: "medium",
    register: "high",
    sms: "very-high",
  } as const;

  return riskMap[action];
}

注意事项

  • 不同业务动作风险不同，不能“一套验证码走天下”。
  • 高频接口必须独立治理，特别是短信发送接口。

五、DDoS 与异常行为识别的基本思路 重要

5.1 平台如何识别异常行为

概念说明

平台通常不会只看单次请求，而是结合流量模式和行为模式来判断。

语法/用法

常见识别维度：

  • 单 IP 请求频率异常
  • 同设备短时间访问多个敏感接口
  • 页面链接点击顺序极不自然
  • 请求头、浏览器特征、执行环境异常
  • 同类请求在短时间内大规模爆发

代码示例

ts
type VisitEvent = {
  path: string;
  timestamp: number;
};

function isSuspiciousBurst(events: VisitEvent[]) {
  if (events.length < 10) return false;

  const duration = events[events.length - 1].timestamp - events[0].timestamp;
  return duration < 3_000;
}

注意事项

  • 误杀正常用户是风控系统常见问题，因此阈值不能设置得过于激进。
  • 机器学习可以辅助判断，但不能替代清晰可解释的规则体系。

代码实战案例

需求描述

在登录页面集成 Cloudflare Turnstile。用户提交表单时，前端把 Turnstile token 一并传给后端；后端调用 Siteverify API 完成校验，校验通过后才允许执行登录逻辑。

完整实现代码

前端页面示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页</title>
    <script
      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
      async
      defer
    ></script>
  </head>
  <body>
    <form id="login-form">
      <input id="username" placeholder="用户名" />
      <input id="password" type="password" placeholder="密码" />

      <div
        class="cf-turnstile"
        data-sitekey="你的站点公钥"
      ></div>

      <button type="submit">登录</button>
    </form>

    <script>
      const form = document.getElementById("login-form");

      form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const tokenInput = document.querySelector(
          'input[name="cf-turnstile-response"]'
        );

        const payload = {
          username: document.getElementById("username").value,
          password: document.getElementById("password").value,
          turnstileToken: tokenInput ? tokenInput.value : "",
        };

        const response = await fetch("/api/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        });

        const result = await response.json();
        console.log(result);
      });
    </script>
  </body>
</html>

Node.js 服务端示例：

ts
import express from "express";

const app = express();

app.use(express.json());

app.post("/api/login", async (req, res) => {
  const { username, password, turnstileToken } = req.body;

  if (!turnstileToken) {
    return res.status(400).json({
      message: "缺少行为验证 token",
    });
  }

  const formData = new URLSearchParams();
  formData.append("secret", process.env.TURNSTILE_SECRET_KEY || "");
  formData.append("response", turnstileToken);

  const verifyResponse = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      body: formData,
    }
  );

  const verifyResult = await verifyResponse.json();

  if (!verifyResult.success) {
    return res.status(403).json({
      message: "行为验证未通过",
      errorCodes: verifyResult["error-codes"] || [],
    });
  }

  // 这里才进入真正的账号密码校验逻辑
  if (username === "admin" && password === "123456") {
    return res.json({ message: "登录成功" });
  }

  return res.status(401).json({ message: "账号或密码错误" });
});

app.listen(3000);

代码逐行解析

  1. 前端先引入 Turnstile 官方脚本，它会负责渲染验证组件。
  2. 表单中放置 cf-turnstile 容器，并通过 data-sitekey 绑定站点公钥。
  3. Turnstile 验证成功后，会自动在表单里注入 cf-turnstile-response 字段。
  4. 用户点击登录时，前端把用户名、密码和 turnstileToken 一起发送给后端。
  5. 后端收到请求后，先检查 token 是否为空。
  6. 后端使用 secret key 调用 Siteverify API 进行校验。
  7. 如果 success 为 false，说明 token 无效、过期或已被重复使用，请求应直接拒绝。
  8. 只有验证通过之后，才继续执行真正的登录鉴权逻辑。

常见问题与解决方案

问题原因分析解决方案
前端已经显示验证成功，后端还是拦截请求只做了前端渲染，没有调用服务端 Siteverify API后端必须二次校验 token，不能只相信前端状态
验证 token 经常失效token 存在有效期，且只能使用一次用户提交超时后重新拉起验证；不要复用历史 token
短信接口被刷爆只做了短信验证码，没有做前置风险控制在发送短信前加图形验证码或行为验证，并叠加限流策略
海外验证码方案在国内使用不稳定网络可达性、脚本加载、第三方域名访问受限在选型时优先验证真实网络环境，必要时准备降级方案
风控太严格导致正常用户被拦截规则阈值过严，误杀率高结合日志逐步调参，对高风险动作启用更强验证而不是全站一刀切

学习要点总结

  1. 登录注册场景的验证能力，本质上是在平衡安全性、成本和用户体验。
  2. 短信验证码适合身份确认，但不能单独承担防机器人任务。
  3. Turnstile 这类行为验证方案的核心是“前端生成 token，后端必须做服务端校验”。
  4. 验证码只是风控链路中的一环，还需要限流、行为分析、异常检测等能力配合。
  5. 技术选型时不要死记价格，重点应放在可达性、可维护性和安全闭环是否完整。

术语纠正与内容优化

  • 课程原文中的 CloudFlow、Cloud free，规范名称应为 Cloudflare。
  • 原文中的 ten style、turn style，规范名称应为 Turnstile。
  • 原文中的“fish 请求”应理解为 fetch 请求。
  • 原文中提到“有令牌就可以保证请求安全”，更准确地说：token 只是验证结果的一部分，必须由后端调用官方校验接口验证后才具备安全意义。
  • 原文中把 Turnstile 与 cf_clearance 混在了一起，更准确地说：普通 Turnstile 接入的核心产物是一次性 token；cf_clearance 只会在启用 pre-clearance 等特定能力时出现。
  • 原文中多处比较不同服务商价格，这类信息变化很快，学习时应把重点放在“方案差异和接入方式”，不要把价格视为长期稳定知识点。

延伸学习资源

参考说明

本文结合课程原文整理，并对部分口述内容做了规范化修正。Cloudflare Turnstile 的“可独立使用、免费计划限制、widget 模式、服务端校验要求、token 5 分钟有效且单次使用、pre-clearance 与 cf_clearance 的关系”等信息，基于 2026-03-29 可访问的 Cloudflare 官方文档进行了校对；第三方服务商价格属于时效性较强的信息，实际请以对应官网最新页面为准。