在 Next.js 14 中使用 reCAPTCHA v3
内容提要
该文章介绍了如何使用useFormState和useActionState与Google的reCaptcha v3集成，以实现表单数据的提交和验证。首先需要在reCAPTCHA v3管理控制台创建一个新站点，并将相关密钥添加到项目的环境变量中。然后使用react-google-recaptcha-v3包提供的组件和方法来运行reCaptcha脚本，并将验证码响应添加到表单数据中。最后，在服务器端验证验证码数据，并根据验证结果进行相应处理。作者表示将来还会更新关于useActionState的集成方法。
延伸解读
reCAPTCHA v3 的分数机制与验证逻辑
文章使用 reCAPTCHA v3 的分数机制，通过 Google 的 siteverify 接口返回的 score 来判断请求是否来自机器人。开发者需要根据业务场景设定阈值，例如分数低于某个值则视为可疑。这种机制无需用户交互，但需要服务器端验证，且分数并非绝对可靠，需结合其他风控措施。
环境变量配置与密钥安全
文章强调将 reCAPTCHA 的站点密钥和秘密密钥分别存储在环境变量中，其中站点密钥以 NEXT_PUBLIC_ 前缀暴露给浏览器，而秘密密钥仅在服务器端使用。同时提醒将 .env.local 加入 .gitignore，避免密钥泄露。这是集成第三方服务时的基本安全实践。
与 useFormState 的集成方式
文章展示了如何通过自定义函数 addRecaptcha 在表单提交前获取 reCAPTCHA 令牌，并将其作为表单字段附加到 FormData 中，再传递给服务器 action。这种方式不改变原有的 useFormState 流程，只是增加了一个预处理步骤，使得验证码验证与表单验证逻辑可以无缝结合。
当前限制与未来更新
作者指出该方法已在 useFormState 上测试通过，但尚未验证 useActionState，并计划未来更新。这意味着如果读者使用 useActionState，可能需要自行调整。此外，文章未涉及错误处理细节，如验证失败后的用户反馈，实际应用中需补充。
Q&A
如何在 Next.js 中集成 reCAPTCHA v3？
在 Next.js 中集成 reCAPTCHA v3 需要创建一个新站点并配置相关密钥，然后使用 react-google-recaptcha-v3 包提供的组件来运行 reCAPTCHA 脚本，并在表单提交前获取验证码响应。
如何设置环境变量以使用 reCAPTCHA v3？
在项目中创建 .env.local 文件，并添加 NEXT_PUBLIC_RECAPTCHA_SITE_KEY 和 RECAPTCHA_SECRET_KEY 变量，确保将其添加到 .gitignore 中。
如何在表单提交时添加 reCAPTCHA 响应？
在表单组件中使用 useFormState，并在提交前调用 executeRecaptcha 函数获取验证码响应，将其添加到表单数据中。
如何在服务器端验证 reCAPTCHA 数据？
在服务器端接收验证码令牌后，向 Google 的验证 API 发送请求，使用 RECAPTCHA_SECRET_KEY 进行验证，并根据返回的分数处理结果。
使用 useActionState 时如何集成 reCAPTCHA？
文章提到将来会更新关于 useActionState 的集成方法，目前主要使用 useFormState 进行集成。
react-google-recaptcha-v3 包的作用是什么？
react-google-recaptcha-v3 包提供 GoogleReCaptchaProvider 组件，用于运行 reCAPTCHA 脚本并将结果传递给子组件。
