我目前正在开发一个 React 项目，其中表单安全性至关重要。为了打击垃圾邮件和滥用行为，我决定将 Google reCAPTCHA 集成到我的表单中。然而，我面临着将其与 React 的 useFormState 挂钩无缝整合的挑战。我主要关心的是 reCAPTCHA 令牌的有效性，它在生成后仅持续 2 分钟。我需要确保在提交表单时、在触发服务器端操作之前准确获取令牌，以防止令牌被误用或过期。
useFormState 钩子是我的表单逻辑、管理状态和处理提交的核心。不幸的是，我还没有找到一种直接的方法来将 reCAPTCHA 验证集成到此工作流程中。直接使用 event.preventDefault() 修改 onSubmit 事件来手动处理提交并包含令牌检索不是一种选择，因为它与当前架构相矛盾，并且可能会引入不必要的复杂性。
我正在向任何使用 useFormState 挂钩或类似设置在 React 应用程序中成功实现 Google reCAPTCHA 的人寻求建议、最佳实践或解决方案。具体来说，如何在提交时获取 reCAPTCHA 令牌并确保其包含在发送到我的服务器的表单数据中，同时保持表单的现有结构和逻辑完好无损？任何建议或代码示例将不胜感激。
我也遇到了同样的问题。我在这里写了一篇文章。
https://dev.to/danshari/using-recaptcha-v3-with-nextjs-14-5cc7