INTEGRITY Dokumentace

← Cloudflare Turnstile / turnstile / tutorials

Ochrana formulářů

Tento návod vás provede integrací Cloudflare Turnstile pro ochranu webových formulářů, například přihlašovacích, registračních nebo kontaktních. Naučíte se vložit widget Turnstile na straně klienta a ověřit token Turnstile přes Siteverify API na straně serveru.

Než začnete

Získání sitekey a secret key pro Turnstile

  1. V řídicím panelu Cloudflare přejděte na Turnstile . Přejděte na Turnstile ↗
  2. Vytvoření nového widgetu Turnstile.
  3. Zkopírujte si sitekey a secret key, budete je potřebovat v dalším kroku.

Přidejte widget Turnstile do svého HTML formuláře

  1. Přidejte widget Turnstile do svého formuláře.
  2. Nahraďte <YOUR-SITE-KEY> hodnotou sitekey z Cloudflare.
  3. Přidejte data-callback atribut k divu widgetu Turnstile. Tato JavaScriptová funkce se zavolá po úspěšném ověření.
  4. Tlačítko pro odeslání musí být na začátku neaktivní.
Příklad
<!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>

Ověření tokenu Turnstile na straně serveru

Token Turnstile odeslaný ze strany klienta je potřeba ověřit. Níže je příklad v Node.js.

Příklad v 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");
});

Na co si dát pozor

Ověření tokenu Turnstile je nutné zpracovat správně. Tato část shrnuje klíčové body, na které je třeba myslet.

Ověření tokenu po vyplnění formuláře

Správně implementovaný postup