Recaptcha 适用于移动设备，但不适用于桌面设备
Recaptcha is working on mobile, but not on desktop
所以，我有一个 website 并且我在联系表中添加了一个验证码。我之前在多个网站上将此代码用于验证码和联系表，并且在这些网站上运行良好。但是，出于某种原因，在该网站上，recaptcha 无法在该网站的桌面版本上运行。
我试过删除旧的验证码并创建一个新的。那没有用。
我认为可能是因为我在同一页面上为移动版和桌面版设置了不同的格式，这可能会导致错误。但是，当我删除其中一个 recaptchas 时，我得到了相同的结果 - 移动端没问题，但桌面端却不行。
我在不同的浏览器中试过它是否是一个 chrome 错误，甚至更新了我的 chrome - 也不是那个。
我查看是否还有其他人遇到过类似问题，他们声称 they were loading the recaptcha twice。但是我检查了我的文件，除了 header.
中的 google api link 之外，我看不到它要加载的任何地方
header:
<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 'I am not a robot' 复选框，但我得到：
ERROR for site owner: Invalid domain for site key
桌面版。它在移动版本上运行完美。
更新：我什至尝试为桌面版和移动版制作唯一的 recaptcha 密钥，但这也没有用。
如果它为桌面重新加载两次，这意味着下面的代码可能有问题。
class = "row d-inline-block d-sm-inline-block d-md-none"
你能把class改成"visible-xs"看看行不行？
你试过这里提到的显式渲染吗 - https://developers.google.com/recaptcha/docs/display#explicit_render
如上面 link 所述，将您的脚本标记更改为
<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>
或者您实际上可能只是根据提到的 link 中的其他示例代码渲染它们。
解决了！！
真的很对不起大家
原来我不小心添加了两个版本的联系表，我没有意识到。我没有更新桌面上可见的站点密钥，而是继续编辑我认为我拥有的表单的一个版本..所以它一直显示为无效。
非常非常抱歉大家。我想这意味着有时逐行阅读你的代码是值得的..
所以，我有一个 website 并且我在联系表中添加了一个验证码。我之前在多个网站上将此代码用于验证码和联系表，并且在这些网站上运行良好。但是，出于某种原因，在该网站上，recaptcha 无法在该网站的桌面版本上运行。
我试过删除旧的验证码并创建一个新的。那没有用。
我认为可能是因为我在同一页面上为移动版和桌面版设置了不同的格式，这可能会导致错误。但是，当我删除其中一个 recaptchas 时，我得到了相同的结果 - 移动端没问题，但桌面端却不行。
我在不同的浏览器中试过它是否是一个 chrome 错误，甚至更新了我的 chrome - 也不是那个。
我查看是否还有其他人遇到过类似问题，他们声称 they were loading the recaptcha twice。但是我检查了我的文件，除了 header.
中的 google api link 之外，我看不到它要加载的任何地方header:
<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 'I am not a robot' 复选框，但我得到：
ERROR for site owner: Invalid domain for site key
桌面版。它在移动版本上运行完美。
更新：我什至尝试为桌面版和移动版制作唯一的 recaptcha 密钥，但这也没有用。
如果它为桌面重新加载两次，这意味着下面的代码可能有问题。
class = "row d-inline-block d-sm-inline-block d-md-none"
你能把class改成"visible-xs"看看行不行？
你试过这里提到的显式渲染吗 - https://developers.google.com/recaptcha/docs/display#explicit_render
如上面 link 所述，将您的脚本标记更改为
<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>
或者您实际上可能只是根据提到的 link 中的其他示例代码渲染它们。
解决了！！
真的很对不起大家
原来我不小心添加了两个版本的联系表，我没有意识到。我没有更新桌面上可见的站点密钥，而是继续编辑我认为我拥有的表单的一个版本..所以它一直显示为无效。
非常非常抱歉大家。我想这意味着有时逐行阅读你的代码是值得的..