保护您的表单

本教程将引导您集成 Cloudflare Turnstile 来保护您的 Web 表单，例如登录、注册或联系表单。了解如何在客户端实施 Turnstile 小组件，并在服务器端通过 Siteverify API 验证 Turnstile 令牌。

开始之前

您必须拥有一个 Cloudflare 账户。
您必须拥有一个带有您想要保护的表单的 Web 应用程序。
您必须具备 HTML 以及您选择的服务器端语言（例如 Node.js 或 Python）的基础知识。

获取您的 Turnstile sitekey 和密匙 (secret key)

在 Cloudflare 仪表板中，前往 Turnstile 页面。 Go to Turnstile ↗
创建一个新的 Turnstile 小组件。
复制 sitekey 和密匙以在下一步中使用。

将 Turnstile 小组件添加到您的 HTML 表单中

将 Turnstile 小组件添加到您的表单中。
将 <YOUR-SITE-KEY> 替换为来自 Cloudflare 的 sitekey。
在 Turnstile 小组件 div 中添加 data-callback 属性。此 JavaScript 函数将在质询成功时被调用。
确保您的提交按钮最初是被禁用的。

示例html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<title>联系表单</title>
		<script
			src="https://challenges.cloudflare.com/turnstile/v0/api.js"
			async
			defer
		></script>
		<script>
			function enableSubmit() {
				document.getElementById("submit-button").disabled = false;
			}
		</script>
	</head>
	<body>
		<form id="contact-form" action="/submit" method="POST">
			<input type="text" name="name" placeholder="姓名" required />
			<input type="email" name="email" placeholder="邮箱" required />
			<textarea name="message" placeholder="留言内容" required></textarea>

			<!-- Turnstile 小组件 -->
			<div
				class="cf-turnstile"
				data-sitekey="<YOUR-SITE-KEY>"
				data-callback="enableSubmit"
			></div>

			<button type="submit" id="submit-button" disabled>提交</button>
		</form>
	</body>
</html>

在服务器端验证 Turnstile 令牌

您将需要验证从客户端发送的 Turnstile 令牌。以下是一个 Node.js 中的示例。

Node.js 示例js

const express = require("express");
const axios = require("axios");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post("/submit", async (req, res) => {
	const turnstileToken = req.body["cf-turnstile-response"];
	const secretKey = "your-secret-key";

	try {
		const response = await axios.post(
			"https://challenges.cloudflare.com/turnstile/v0/siteverify",
			null,
			{
				params: {
					secret: secretKey,
					response: turnstileToken,
				},
			},
		);

		if (response.data.success) {
			// 令牌有效，继续进行表单提交
			const name = req.body.name;
			const email = req.body.email;
			const message = req.body.message;
			// 在此处编写您的表单处理逻辑
			res.send("表单提交成功");
		} else {
			res.status(400).send("Turnstile 验证失败");
		}
	} catch (error) {
		res.status(500).send("验证 Turnstile 令牌时出错");
	}
});

app.listen(3000, () => {
	console.log("服务器正在端口 3000 上运行");
});

重要注意事项

正确处理 Turnstile 令牌的验证至关重要。本节介绍了需要记住的一些关键点。

在表单输入后验证令牌

确保在用户填写表单并选择 Submit（提交） 之后验证 Turnstile 令牌。
如果您在用户输入其数据之前验证令牌，恶意行为者可能会在获取有效令牌后，通过操纵表单提交来绕过保护。

正确的流程实施

当用户提交表单时，将表单数据和 Turnstile 令牌一起发送到您的服务器。
在服务器端，先验证 Turnstile 令牌。
根据验证响应，决定是否继续处理表单数据。