首页 > web前端 > js教程 > 正文

React:ReCAPTCHA vlient 和服务器演示

聖光之護
发布: 2024-11-26 08:03:33
转载
735人浏览过

在此演示中,我将在基于 next.js 构建的 react 应用程序中使用 google recaptcha v3 凭据。 recaptcha 令牌将在客户端生成并在服务器端验证。

链接

  • 演示

  • 代码库

第 1 步:生成您的 recaptcha 凭证

前往 google recaptcha v3 并生成您的凭据。

React:ReCAPTCHA vlient 和服务器演示

第2步:导入recaptcha库

<script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.next_public_re_captcha_site_key}`} />
登录后复制
注意:您可以使用一些包,但实现很简单。

第 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 和服务器演示的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号