Recaptcha 正在移动设备上工作，但不在桌面上

Question

所以，我有一个website，并且我在联系表单中添加了一个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“我不是机器人”复选框，但我得到：

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

在桌面版本上。它在移动版本上运行良好。

更新：我什至尝试为桌面版和移动版制作唯一的验证码，但这也没有用。

Answer 1

解决了！！

对不起大家。

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

非常非常抱歉大家。我想这意味着有时逐行阅读您的代码是值得的..

Answer 2

如果它为桌面重新加载两次，这意味着下面的代码可能会出现问题。

class= "行 d-inline-block d-sm-inline-block d-md-none"

你能把class改成“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>

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