Question

因此，我有一个website，并且在联系表单中添加了一个recaptcha。之前，我已经在多个网站上使用了该代码作为recaptcha和联系表，并且在这些网站上都可以正常使用。但是，由于某种原因，在此网站上，recaptcha无法在该网站的桌面版本上正常工作。

我尝试删除旧的Recaptcha并创建一个新的Recaptcha。那没用。

我认为这可能是因为同一页面上的移动版本和台式机版本具有不同的格式设置样式，可能会导致错误。但是，当我删除其中之一时，我得到了相同的结果-移动设备不错，而台式机则不然。

我在不同的浏览器中尝试过查看它是否是chrome错误，甚至更新了我的chrome-也不是。

我检查了是否还有其他人遇到类似的问题，他们声称they were loading the recaptcha twice。但是我检查了我的文件，除了标头中的google api链接之外，看不到其他任何要加载的文件。

标题：

<script src='https://www.google.com/recaptcha/api.js' async defer></script>
</head>

我的联系表的Recaptcha部分：

<div class = "row d-none d-sm-none d-md-block">
   <div class = "col-md-6">
      <div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:left;"></div>
   </div>
   <div class = "col-md-6">
      <div class = "submit" style = "text-align: right;">
         <button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
      </div>
   </div>
</div>
<div class = "row d-inline-block d-sm-inline-block d-md-none">
   <div class = "col-sm-12 text-center">
      <div class="g-recaptcha" id = "captcha" name = "captcha" data-sitekey="SITE_KEY_HERE" style = "text-align:center;"></div>
   </div>
</div>
<div class = "row d-block d-sm-block d-md-none">
   <div class = "col-sm-12 text-center">
      <div class = "submit">
         <button id = "submitForm" type="submit" name = "submit" class="btn btn-lg">Send Message</button>
      </div>
   </div>
</div>

我希望用户能够看到普通的recaptcha v2“我不是机器人”复选框，但我得到：

网站所有者错误：网站密钥的域无效

在桌面版本上。在移动版本上可以完美运行。

更新：我什至尝试为台式机和移动版制作唯一的recaptcha密钥，但这也不起作用。

Answer 1

解决了它！

对不起大家。

结果是我不小心添加了两个版本的联系表，但我没有意识到。我没有更新桌面上可见的站点密钥，而是继续编辑我以为拥有的表单的一个版本。因此它一直显示为无效。

我非常抱歉。我想这意味着有时需要逐行读取代码。

Answer 2

如果两次为台式机重新加载，则意味着以下代码可能会出现问题。

class =“行d-in-line-block d-sm-inline-block d-md-none”

您可以将类更改为“ visible-xs”并查看其是否有效吗？

Answer 3

您是否尝试过此处提到的显式渲染-https://developers.google.com/recaptcha/docs/display#explicit_render

如上面的链接所述，将脚本标签更改为

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>

然后添加一个回调函数，以逻辑方式渲染您想要的小部件（基于屏幕大小！）。

<script type="text/javascript"> var onloadCallback = function() { if (screen.width < 600) grecaptcha.render('captcha-one', { //id of the first captcha needs to be captcha-one 'sitekey' : 'your_site_key' }); else grecaptcha.render('captcha-two', { //id of the second captcha needs to be captcha-two 'sitekey' : 'your_site_key' }); }; </script>

或者您可能实际上只是根据提到的链接中的其他示例代码来渲染它们。

Recaptcha在移动设备上工作，但不在台式机上工作

3 个答案: