为什么 Google ReCaptcha v2 复选框在移动设备上的空闲时间超过 5 分钟后会中断？
Why does Google ReCaptcha v2 checkbox break after >5min idle time on a mobile device?
我在 ASP.NET Core 3.1 MVC 应用程序中实现了 Google ReCaptcha v2 Checkbox。它在移动设备和桌面上运行良好 - 我可以填写表格，单击提交，验证码会出现一个 bootstrap 确认模式，我可以确认我的提交。
但是，在我的移动设备上（我测试了 Chrome 和 Brave 浏览器），如果表单页面空闲时间超过 5 分钟，然后我填写表单并拉出确认模式，验证码有时会中断，看起来像这样：
一个灰色的盒子，上面有一张悲伤的脸。这不是一个描述性很强的错误。
我尝试了验证码的自动呈现和显式呈现，但问题仍然存在。
我的验证码 html，它位于最初未显示的 bootstrap modal 中：
<div id="recaptcha" class="g-recaptcha" data-size="compact" data-sitekey="@ViewData["ReCaptchaKey"]"></div>
显式呈现验证码的代码：
/**
* Function gets called when the google recaptcha API loads. This is to ensure element is present in html before
* initialising captcha.
* More info:
*/
var _captchaTries = 0;
function recaptchaOnload() {
_captchaTries++;
if (_captchaTries > 9)
return;
if ($('.g-recaptcha').length > 0) {
grecaptcha.render("recaptcha");
return;
}
window.setTimeout(recaptchaOnload, 1000);
}
头部验证码的脚本标记：
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit"></script>
我说过，我试过用验证码自动渲染，使代码更简单，但问题仍然存在。
编辑：我正在开发另一个带有 reCAPTCHA 的应用程序，这种情况仍然会发生，但在这个新案例中，它不是在超过 5 分钟后发生的，而且它不在模式中。该错误似乎并不常见且难以重现。刷新页面修复它。我注意到的唯一模式是，当我在我的 phone 上访问该网站时，它往往会出现一段时间没有访问它。
我仍然不知道这个错误的原因是什么，但我找到了处理它的方法。
在 reCAPTCHA 上方，您可以添加一个调用 grecaptcha.reset(); 方法的按钮：
<input type="button" onclick="grecaptcha.reset();" value="Reload" />
如果 reCAPTCHA 出现问题，单击按钮可将其重置为工作状态。
我在 ASP.NET Core 3.1 MVC 应用程序中实现了 Google ReCaptcha v2 Checkbox。它在移动设备和桌面上运行良好 - 我可以填写表格，单击提交，验证码会出现一个 bootstrap 确认模式，我可以确认我的提交。
但是，在我的移动设备上（我测试了 Chrome 和 Brave 浏览器），如果表单页面空闲时间超过 5 分钟，然后我填写表单并拉出确认模式，验证码有时会中断，看起来像这样：
一个灰色的盒子，上面有一张悲伤的脸。这不是一个描述性很强的错误。
我尝试了验证码的自动呈现和显式呈现，但问题仍然存在。
我的验证码 html，它位于最初未显示的 bootstrap modal 中：
<div id="recaptcha" class="g-recaptcha" data-size="compact" data-sitekey="@ViewData["ReCaptchaKey"]"></div>
显式呈现验证码的代码：
/**
* Function gets called when the google recaptcha API loads. This is to ensure element is present in html before
* initialising captcha.
* More info:
*/
var _captchaTries = 0;
function recaptchaOnload() {
_captchaTries++;
if (_captchaTries > 9)
return;
if ($('.g-recaptcha').length > 0) {
grecaptcha.render("recaptcha");
return;
}
window.setTimeout(recaptchaOnload, 1000);
}
头部验证码的脚本标记：
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit"></script>
我说过，我试过用验证码自动渲染，使代码更简单，但问题仍然存在。
编辑：我正在开发另一个带有 reCAPTCHA 的应用程序，这种情况仍然会发生，但在这个新案例中，它不是在超过 5 分钟后发生的，而且它不在模式中。该错误似乎并不常见且难以重现。刷新页面修复它。我注意到的唯一模式是，当我在我的 phone 上访问该网站时，它往往会出现一段时间没有访问它。
我仍然不知道这个错误的原因是什么，但我找到了处理它的方法。
在 reCAPTCHA 上方，您可以添加一个调用 grecaptcha.reset(); 方法的按钮：
<input type="button" onclick="grecaptcha.reset();" value="Reload" />
如果 reCAPTCHA 出现问题，单击按钮可将其重置为工作状态。