不可见的 Recaptcha 徽章定位问题
Invisible Recaptcha Badge Positioning Issue
我最近开始使用 Google 的 Recaptcha 新方法 - 他们的新 Invisible Recaptcha。我意识到这个版本的实现有点不同，因为你将 recaptcha 属性直接附加到你的提交按钮，然后调用 google 的 recaptcha api 并开始验证过程。我的所有这些工作正常，但我遇到的一个主要问题是 "Protected by recaptcha" 徽章定位。
将 recaptcha 配置添加到我的提交按钮后，我开始在屏幕右侧看到徽章。根据其他网站的说法，这个徽章应该只是一个方形的 recaptcha 标志，直到它被悬停然后它应该滑出成为我最初在我的网站上看到的大矩形。
这是我在实施隐形重新验证后在我的网站上看到的图片。
这里是包含recaptcha属性的提交按钮代码：
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
注意：其他 data-badge 选项，例如 inline 和 bottomleft 会导致相同的定位问题。
包含按钮的表单代码：
<form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
<h2 class="sr-only">Login Form</h2>
<div></div>
<div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
</div>
<div class="form-group">
<input type="text" name="username" placeholder="Username" class="form-control" id="username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" placeholder="Email" class="form-control" id="email" />
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control" id="password" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
</div>
<a href="#" class="forgot">
<div></div>Already have an account? Sign in.</a>
</div>
</form>
我遇到了这个 recaptcha 徽章的两个问题：
- 徽章在其边界外出现故障box/border类型的东西
- 在悬停之前它也不会部分定位在屏幕外，就像它应该的那样。在我用鼠标以任何方式与它交互之前，我看到了完整的矩形。我应该会看到方形徽标，直到我将鼠标悬停在它上面，然后它滑出成为完整的矩形。
基本上，我需要弄清楚如何正确定位它，以便它像预期的那样从屏幕外滑入，并正确地包含在其边框内。
Google Chrome 开发人员工具告诉我这些是徽章 div 的当前属性，在加载 window 时生成：
非常感谢您提供的任何帮助！如果我错误地认为徽章是必需的，请纠正我，我会用 CSS 强制删除它，但是，我担心这可能会扰乱验证码验证过程并违反 Google的政策。
经过多次试验和错误，我发现 recaptcha 徽章定位到它的包含元素而不是正文，并且它还从它的包含元素继承了它的 line-height。
由于我无法直接从包含的元素中删除徽章并将其移动到正文中，因此我通过 JQuery 和轻微的 CSS 更改解决了这个问题。
JQuery: 将徽章附加到主体而不是其包含元素（表单）
为此，我必须确保徽章已完全加载到站点中。 Google 使这变得困难，但我能够通过使用 jQuery.initialize by timpler.
来做到这一点
一旦我的页面上有了 initialize.min.js 运行，我就简单地使用了这个代码：
jQuery(document).ready(function() {
$('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body
});
$.initialize(".grecaptcha-badge", function() {
$(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page
});
CSS: 添加了对 line-height 的更改以将徽章与其容器
正确定位
.grecaptcha-badge {
line-height:50px !important;
}
这很难弄清楚，但最终归结为徽章从其父级继承了太多属性。我希望这对以后的人有所帮助！
这可能有帮助：https://developers.google.com/recaptcha/docs/invisible#config
您可以设置 data-badge="inline" 以允许您控制 CSS。
您可以在页面任意位置的 div 元素中添加验证码
<div class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible">
</div>
当您提交表单时，应调用以下 javascript 以启动验证码验证
grecaptcha.execute();
onSubmit 函数（在 data-callback 标签属性中指定）将在验证码验证成功时调用。在那里你得到了 recaptcha 令牌，它可以作为隐藏字段注入到你的表单中以进行后端验证。
function onSubmit(recaptchaToken) {
// inject token as hidden form field and submit form
}
我最近开始使用 Google 的 Recaptcha 新方法 - 他们的新 Invisible Recaptcha。我意识到这个版本的实现有点不同，因为你将 recaptcha 属性直接附加到你的提交按钮，然后调用 google 的 recaptcha api 并开始验证过程。我的所有这些工作正常，但我遇到的一个主要问题是 "Protected by recaptcha" 徽章定位。
将 recaptcha 配置添加到我的提交按钮后，我开始在屏幕右侧看到徽章。根据其他网站的说法，这个徽章应该只是一个方形的 recaptcha 标志，直到它被悬停然后它应该滑出成为我最初在我的网站上看到的大矩形。
这是我在实施隐形重新验证后在我的网站上看到的图片。
这里是包含recaptcha属性的提交按钮代码：
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
注意：其他 data-badge 选项，例如 inline 和 bottomleft 会导致相同的定位问题。
包含按钮的表单代码：
<form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
<h2 class="sr-only">Login Form</h2>
<div></div>
<div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
</div>
<div class="form-group">
<input type="text" name="username" placeholder="Username" class="form-control" id="username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" placeholder="Email" class="form-control" id="email" />
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control" id="password" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
</div>
<a href="#" class="forgot">
<div></div>Already have an account? Sign in.</a>
</div>
</form>
我遇到了这个 recaptcha 徽章的两个问题：
- 徽章在其边界外出现故障box/border类型的东西
- 在悬停之前它也不会部分定位在屏幕外，就像它应该的那样。在我用鼠标以任何方式与它交互之前，我看到了完整的矩形。我应该会看到方形徽标，直到我将鼠标悬停在它上面，然后它滑出成为完整的矩形。
基本上，我需要弄清楚如何正确定位它，以便它像预期的那样从屏幕外滑入，并正确地包含在其边框内。
Google Chrome 开发人员工具告诉我这些是徽章 div 的当前属性，在加载 window 时生成：
非常感谢您提供的任何帮助！如果我错误地认为徽章是必需的，请纠正我，我会用 CSS 强制删除它，但是，我担心这可能会扰乱验证码验证过程并违反 Google的政策。
经过多次试验和错误，我发现 recaptcha 徽章定位到它的包含元素而不是正文，并且它还从它的包含元素继承了它的 line-height。
由于我无法直接从包含的元素中删除徽章并将其移动到正文中，因此我通过 JQuery 和轻微的 CSS 更改解决了这个问题。
JQuery: 将徽章附加到主体而不是其包含元素（表单）
为此，我必须确保徽章已完全加载到站点中。 Google 使这变得困难，但我能够通过使用 jQuery.initialize by timpler.
来做到这一点一旦我的页面上有了 initialize.min.js 运行，我就简单地使用了这个代码：
jQuery(document).ready(function() {
$('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body
});
$.initialize(".grecaptcha-badge", function() {
$(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page
});
CSS: 添加了对 line-height 的更改以将徽章与其容器
.grecaptcha-badge {
line-height:50px !important;
}
这很难弄清楚，但最终归结为徽章从其父级继承了太多属性。我希望这对以后的人有所帮助！
这可能有帮助：https://developers.google.com/recaptcha/docs/invisible#config
您可以设置 data-badge="inline" 以允许您控制 CSS。
您可以在页面任意位置的 div 元素中添加验证码
<div class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible">
</div>
当您提交表单时，应调用以下 javascript 以启动验证码验证
grecaptcha.execute();
onSubmit 函数（在 data-callback 标签属性中指定）将在验证码验证成功时调用。在那里你得到了 recaptcha 令牌，它可以作为隐藏字段注入到你的表单中以进行后端验证。
function onSubmit(recaptchaToken) {
// inject token as hidden form field and submit form
}