DEV Community
·
在 Next.js 14 中使用 reCAPTCHA v3
内容提要
该文章介绍了如何使用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的集成方法。
延伸问答
如何在 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 脚本并将结果传递给子组件。
