在 Next.js 14 中使用 reCAPTCHA v3
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
该文章介绍了如何使用useFormState和useActionState与Google的reCaptcha v3集成，以实现表单数据的提交和验证。首先需要在reCAPTCHA v3管理控制台创建一个新站点，并将相关密钥添加到项目的环境变量中。然后使用react-google-recaptcha-v3包提供的组件和方法来运行reCaptcha脚本，并将验证码响应添加到表单数据中。最后，在服务器端验证验证码数据，并根据验证结果进行相应处理。作者表示将来还会更新关于useActionState的集成方法。
🎯
关键要点
- 使用useFormState和useActionState提交表单数据到服务器。
- 在reCAPTCHA v3管理控制台创建新站点并配置相关信息。
- 将reCAPTCHA密钥添加到项目的环境变量中。
- 使用react-google-recaptcha-v3包提供的组件运行reCaptcha脚本。
- 在表单提交前获取reCAPTCHA响应并将其添加到表单数据中。
- 在服务器端验证reCAPTCHA数据并根据验证结果处理。
- 作者计划未来更新关于useActionState的集成方法。
➡️
