问题标签 [react-google-recaptcha]

我无法弄清楚为什么我的组件没有按预期工作。由于 Uncaught TypeError，reCAPTCHA 无法验证。单击复选框时 reCAPTCHA 开始验证，但在控制台中被错误消息中断。

我也遵循了本指南，但我遇到了同样的错误。我绝对不确定问题在哪个级别。这个相同的实现在 GatsbyJS 中按预期工作。

对于调试我的问题或为我指明正确方向的任何帮助，我将不胜感激。

我的组件

我正在尝试在 Next.js 中的联系表单上实施 Google Recaptcha。它会在需要时弹出挑战，但无论如何都会发送表单。到目前为止，这是我的代码：

在表格上：

这当然不起作用，因为即使 recaptcha 被触发，它仍然会发送表单。

我尝试添加onChange={onReCAPTCHAChange}，<ReCAPTCHA />但随后出现错误Uncaught (in promise) ReferenceError：

我正在尝试将 recaptcha v2 添加到我的 Gatsby/Netlify 站点表单中，但我错过了实际显示小部件的最后一部分。它只是没有显示它的放置位置。

到目前为止，我的代码是这样的

gatsby-ssr.js 文件：

以及联系方式：

在我将任何 Netlify 属性添加到我的表单之前，出现了错误“未捕获（承诺）错误：reCAPTCHA 占位符元素必须是元素或 id”，所以我很确定这与它无关。

有任何想法吗？谢谢。

我正在尝试创建一个 reCAPTCHA 密钥，并且我已经启用了 reCAPTCHA Enterprise API 并创建了一个密钥。

它创建了站点密钥，但我没有看到密钥。

我在网站的表单页面上使用 npm react-google-recaptcha 包来实现 google recaptcha v2 复选框

一旦验证了验证码，我就会触发 captchaOnChange 函数来记录来自谷歌 API 的响应并将触发器值设置为 true，这将在我的代码中进一步使用（我尝试了以下代码的多个版本，一个只有异步，一个没有异步和一个异步和等待）

一旦提交表格，我正在使用

重置recaptcha

现在的问题是，当用户第一次单击recaptcha 时，它工作正常，并且立即在recaptcha 上可见绿色勾号，但是在重置验证码并且用户想要再次提交表单并单击recaptcha 时提交表单后没有绿色勾号，它的加载持续不断，就像它被困在某个循环中一样，而且我正在检查检查元素的网络选项卡，在加载时没有向任何 recaptcha api 发送请求。

所以我怀疑在使用 recaptcha.reset()后onChange事件是否存在问题，我也发现一些人在互联网上报告了类似的问题，但我不确定它是否有任何问题或我们的实施问题。

请帮忙！！

我正在使用 react js 是我使用 react-google-captcha 的一种形式，并且在构建和后端我使用提供 CSP 安全性的头盔时工作得很好，并且出现了其他错误

在搜索了很多网站后，我添加了以下元标记

仍然没有运气。你遇到过这个问题吗？可以和我分享解决方案。提前致谢

在我的头盔配置中

我不确定这是一个特定于反应的问题，一个一般的 JavaScript 相关问题，还是只是一个关于网站及其源代码加载的基本功能问题（取决于一个人是否使用浏览器或任何其他程序来获取网站的内容/ 网络应用程序）。

我的目标：

我想从网站/前端排除机器人。只有人类才能访问它并访问那里提供的信息和功能。例如电子邮件地址、电话号码和联系表格。但是，我不希望访问者先创建帐户。

npx create-react-app my-app我使用以下相关设置创建了一个 Node.js 应用程序：package.json

这是我的index.js：

这是ValidationRecaptcha组件：

快速解释：

该代码在浏览器中按预期工作（我已经测试过 Chrome、Safari 和 Firefox）。在等待数据获取时，应用程序呈现在第一种情况下分配的内容，即verified === 0. 当响应被完全获取并且为负（即令牌无效或分数表示机器人）时，应用程序呈现在第二种情况下分配的内容，即verified === 1. 当响应完全获取并且是肯定的（即令牌有效）时，应用程序呈现在第三种情况下分配的内容目的地，即verified === 3/ 这里：else。最后一个案例呈现了<App/>它自己的所有功能、它的静态内容（如带有电子邮件地址、电话号码和地址的印记文本）和一个联系表格。

现在我的问题：

1. 这是合理的还是一个程序（例如，抓取网站的垃圾邮件机器人）能够获取所有 jsx 文件（因此仍然可以访问公共个人数据，如印记或任何其他组件中的电子邮件、电话号码、地址等那是层次结构的下层，即<App/>组件的子级）？当我手动测试无效令牌或分数时，我会看到verified === 1内容，Chrome 仅显示已在源中呈现的 jsx 文件，而不显示其余文件。我还可以在所有来源中搜索没有任何匹配项的电子邮件地址。但是这个电子邮件地址在子组件中是明文的<App/>（我不想要关于如何从机器人隐藏电子邮件的答案/建议，这不是我的问题）。当我使用有效的令牌和分数对其进行测试时，我可以看到我的应用程序并确定所有源文件。
2. 那么我可以假设一个反应应用程序只使运行时需要/呈现的文件可供公共使用吗？
3. 原则上，这个问题等于第一个问题，但无论如何我都会要求强调我的理解不足/问题：这是否已经将联系表单从垃圾邮件机器人攻击中保存到层次结构的下方，或者我是否必须在发送数据之前再次检查那里smtp 服务（通过使用 props 向下传递验证或通过使用另一个 reCAPTCHA 组件作为表单的提交按钮，但同样，这不是问题）？

我认为这些问题是由于缺乏对反应及其工作原理的了解，所以当有人有好的视频/教程/介绍可以帮助我时，我也会感激不尽！

最好的，最大的

我想在我的 django 应用程序的 settings.py 中设置一个 if 条件，以检查 url 并为该站点应用正确的 GOOGLE_RECAPTCHA_SECRET_KEY。由于本地主机和 Web 服务器域的差异。我用过requests._current_scheme_host但收到错误：

文件“/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/django/apps/registry.py”，第 136 行，在 check_apps_ready 中引发 AppRegistryNotReady（“尚未加载应用程序。 ") django.core.exceptions.AppRegistryNotReady：应用程序尚未加载。

我们的反应页面上有 NL 注册模块（多个位置）。我们正在尝试整合多个不可见的谷歌验证码。我们遇到的问题很少，并就此寻求帮助。我们正在使用 react-google-recaptcha npm 包。这是我们遇到的两个问题

第一期

即使我们将验证码标记为不可见，我们仍然看到挑战。

第 2 期

我们如何为同一页面实现多个recaptcha。我们的 NL 组件将被父级多次调用

这是我们的 NL 组件

处理提交

我正在尝试建立一个网站并拥有一个 API 来使用我的私钥处理请求（因此它们不能公开访问）。但是，我还签署了发送到此 API 的数据，每个用户都有自己的密钥对，对于注销的用户，我有一个通用密钥对。但是，我现在正在尝试处理验证码请求，但它尝试在客户端运行我的函数，因此无法访问存储在环境变量中的 API 密钥。如何强制我的函数在服务器端运行。错误：

功能：

我收到错误，它无法读取未定义的长度，那么如何强制此函数在服务器端运行，以便它可以访问环境变量而不暴露它们。