React Turnstile与表单提交：终极重试逻辑与令牌验证完整指南

React Turnstile与表单提交终极重试逻辑与令牌验证完整指南【免费下载链接】react-turnstileCloudflare Turnstile integration for React.项目地址: https://gitcode.com/gh_mirrors/re/react-turnstileReact Turnstile是一个专为React应用设计的Cloudflare Turnstile集成库它提供了简单而强大的方式来保护你的表单免受自动化攻击。本文将详细介绍如何在React应用中实现表单提交的重试逻辑和令牌验证帮助你提升用户体验同时确保安全性。为什么需要重试逻辑Turnstile令牌是一次性使用的——一旦在服务器上验证令牌就会被消耗无法再次使用。这意味着如果用户提交表单时遇到验证错误例如密码错误他们必须在重新提交前再次完成Turnstile挑战这会产生不必要的摩擦。一个常见的解决方案是允许使用相同的令牌进行几次重新提交然后再要求新的挑战。你可以使用useRefAPI来实现这一点仅在需要时以编程方式重置小部件。实现表单提交重试逻辑调整MAX_TRIES来控制共享一个已验证令牌的总提交次数。将其设置为1可在每次提交时进行验证。use client; import { useRef, useState } from react; import { Turnstile } from marsidev/react-turnstile; import type { TurnstileInstance } from marsidev/react-turnstile; const MAX_TRIES 5; export default function LoginForm() { const turnstileRef useRefTurnstileInstance | null(null); const [triesLeft, setTriesLeft] useState(0); const [captchaToken, setCaptchaToken] useStatestring | null(null); const [error, setError] useStatestring | null(null); async function handleSubmit(e: React.FormEventHTMLFormElement) { e.preventDefault(); const formData new FormData(e.currentTarget); try { if (triesLeft 0) { const res await fetch(/api/verify, { method: POST, body: JSON.stringify({ token: captchaToken }), headers: { content-type: application/json }, }); const data await res.json(); if (!data.success) { setError(Captcha validation failed. Please try again.); turnstileRef.current?.reset(); return; } setTriesLeft(MAX_TRIES - 1); setError(null); } else { setTriesLeft((prev) prev - 1); } const res await fetch(/api/login, { method: POST, body: JSON.stringify({ username: formData.get(username), password: formData.get(password), }), headers: { content-type: application/json }, }); const data (await res.json()) as { success: boolean; message?: string }; if (!data.success) { setError(data.message ?? Login failed. Please try again.); } } catch { setError(An unexpected error occurred. Please try again.); turnstileRef.current?.reset(); } } return ( form onSubmit{handleSubmit} input typetext nameusername placeholderUsername / input typepassword namepassword placeholderPassword / {error p{error}/p} Turnstile ref{turnstileRef} siteKey{{ siteKey }} onSuccess{(token) setCaptchaToken(token)} onExpire{() { setCaptchaToken(null); setTriesLeft(0); }} / button typesubmitLogin/button /form ); }onExpire回调将triesLeft重置为0因此下一次提交将使用新令牌触发新的服务器端验证。始终在服务器上进行验证——重试计数器只是客户端的UX优化。服务器端令牌验证方法令牌的验证需要在服务器上完成。以下是使用Next.js 13 App Router的示例实现。客户端实现use client; import { Turnstile } from marsidev/react-turnstile; export default function LoginForm() { const formRef React.useRefHTMLFormElement(null); async function handleSubmit(event: React.FormEventHTMLFormElement) { event.preventDefault(); const formData new FormData(formRef.current!); const token formData.get(cf-turnstile-response); const res await fetch(/api/verify, { method: POST, body: JSON.stringify({ token }), headers: { content-type: application/json, }, }); const data await res.json(); if (data.success) { // 令牌已验证 } } return ( form ref{formRef} onSubmit{handleSubmit} input typetext placeholderusername / input typepassword placeholderpassword / Turnstile siteKey{{ siteKey }} / button typesubmitLogin/button /form ); }服务器端实现import type { TurnstileServerValidationResponse } from marsidev/react-turnstile; const verifyEndpoint https://challenges.cloudflare.com/turnstile/v0/siteverify; const secret {{ secretKey }}; export async function POST(request: Request) { const { token } (await request.json()) as { token: string }; const res await fetch(verifyEndpoint, { method: POST, body: secret${encodeURIComponent(secret)}response${encodeURIComponent(token)}, headers: { content-type: application/x-www-form-urlencoded, }, }); const data (await res.json()) as TurnstileServerValidationResponse; return new Response(JSON.stringify(data), { status: data.success ? 200 : 400, headers: { content-type: application/json, }, }); }快速集成步骤安装React Turnstile库在表单中添加Turnstile组件实现客户端重试逻辑设置服务器端验证端点测试表单提交和验证流程要开始使用React Turnstile请克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-turnstile有关更多详细信息请参阅项目文档重试逻辑实现docs/form-submission-retry-logic.mdx令牌验证指南docs/validating-a-token.mdx通过实现这些技术你可以为用户提供流畅的表单体验同时保持高水平的安全性防止自动化攻击和滥用。React Turnstile使这一过程变得简单而高效是任何React应用的理想选择。【免费下载链接】react-turnstileCloudflare Turnstile integration for React.项目地址: https://gitcode.com/gh_mirrors/re/react-turnstile创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考