在此演示中，我将在基于 next.js 构建的 react 应用程序中使用 google recaptcha v3 凭据。 recaptcha 令牌将在客户端生成并在服务器端验证。
链接
演示
代码库
第 1 步：生成您的 recaptcha 凭证
前往 google recaptcha v3 并生成您的凭据。
第2步：导入recaptcha库
登录后复制
注意：您可以使用一些包，但实现很简单。
第 3 步：在点击处理程序中调用执行方法
const loginclickhandler = (event) => { event.preventdefault(); grecaptcha.enterprise.ready(async () => { const token = await grecaptcha.enterprise.execute( process.env.next_public_re_captcha_site_key, { action: "login" } ); await submit(token); });};
登录后复制
grecaptcha 是导入脚本注入的对象。
注意：使用 next.js 时，请确保浏览器中公开的所有环境变量都以 next_public 为前缀。
当用户单击登录时，应用程序会通过调用 grecaptcha 对象中的两个方法自动为其生成验证码：
window.grecaptcha.enterprise.ready：这可确保 google recaptcha 对象已准备就绪。window.grecaptcha.enterprise.execute：这会生成验证码令牌。
最后，数据连同生成的验证码令牌一起发送到后端（在我的例子中，我使用 lambda 函数）。
const submit = async (code) => { await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", { method: "post", headers: { "content-type": "application/json", }, body: json.stringify({ code }), });};
登录后复制
注意：如果您使用表单，您还需要包含其他字段值，例如用户名、名称或表单收集的任何其他数据。
第四步：在后端验证验证码
const validaterecaptcha = async (captcha) => { const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.re_captcha_secret_key}&response=${captcha}`; const response = await fetch(url, { method: "post", headers: { "content-type": "application/json", }, body: json.stringify({ captcha }), }); return response.json();};
登录后复制
validaterecaptcha 是一个调用 google api 端点的后端方法，传递 secret_key（存储为环境变量）和客户端生成的验证码令牌。
如果验证码有效，api 响应将如下所示：
{ "success": true, "challenge_ts": "2024-11-24T03:04:34Z", "hostname": "localhost", "score": 0.9}
登录后复制
结论
recaptcha 对于保护表单至关重要，尤其是当您希望阻止机器人提交表单时。 google 提供免费套餐，每月提供多达 10,000 次评估（在撰写本文时），这使其成为许多应用程序的可靠选择。谷歌提供的库使集成变得更加容易。您只需要传递您的凭据：客户端上的 site_key 和服务器端上的 secret_key。
要记住的一个关键点是 secret_key 永远不应该在客户端公开，因为这可能会损害应用程序的安全性。只有 site_key 是供客户端使用的。
以上就是React：ReCAPTCHA vlient 和服务器演示的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2648444.html
![在 Nodejs 中进行身份验证的正确方法 [uide]](https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png)