INTEGRITY Документация

← Cloudflare Turnstile / turnstile / tutorials

Защита форм

Это руководство проведёт вас через интеграцию Cloudflare Turnstile для защиты веб-форм: входа, регистрации или обратной связи. Вы узнаете, как разместить виджет Turnstile на стороне клиента и проверить токен Turnstile через Siteverify API на стороне сервера.

Перед началом работы

Получение sitekey и секретного ключа Turnstile

  1. На панели управления Cloudflare перейдите к разделу Turnstile страницу. Перейдите в Turnstile ↗
  2. Создание нового виджета Turnstile.
  3. Скопируйте sitekey и секретный ключ: они понадобятся на следующем шаге.

Добавьте виджет Turnstile в HTML-форму

  1. Добавьте виджет Turnstile в форму.
  2. Замените <YOUR-SITE-KEY> на sitekey, полученный в Cloudflare.
  3. Добавьте data-callback к элементу div виджета Turnstile. Эта функция JavaScript будет вызвана после успешного прохождения проверки.
  4. Кнопка отправки формы должна быть изначально неактивна.
Пример
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Contact Form</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="Name" required />
			<input type="email" name="email" placeholder="Email" required />
			<textarea name="message" placeholder="Message" required></textarea>

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

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

Проверка токена Turnstile на стороне сервера

Токен Turnstile, отправленный с клиентской стороны, нужно проверить. Ниже приведён пример на Node.js.

Пример на Node.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) {
			// Token is valid, proceed with form submission
			const name = req.body.name;
			const email = req.body.email;
			const message = req.body.message;
			// Your form processing logic here
			res.send("Form submission successful");
		} else {
			res.status(400).send("Turnstile verification failed");
		}
	} catch (error) {
		res.status(500).send("Error verifying Turnstile token");
	}
});

app.listen(3000, () => {
	console.log("Server is running on port 3000");
});

Важные замечания

Правильная проверка токена Turnstile критически важна. В этом разделе собраны ключевые моменты, о которых стоит помнить.

Проверка токена после ввода данных формы

Правильная реализация сценария