11

我最近开始使用 Google 的 Recaptcha 新方法 - 他们新的 Invisible Recaptcha。我意识到这个版本的实现有点不同，因为您将recaptcha 属性直接附加到您的提交按钮，然后调用google 的recaptcha api 并开始验证过程。我所有这些工作都很好，但我遇到的一个主要问题是“受recaptcha 保护”徽章定位。

将 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 徽章的两个问题：

  1. 徽章在其边界框/边框类型的东西之外出现故障
  2. 在悬停之前，它也不会部分位于屏幕外，就像它应该的那样。在我用鼠标以任何方式与它交互之前，我看到了整个矩形。我应该看到方形徽标，直到我将鼠标悬停在它上面，它滑出成为完整的矩形。

基本上，我需要弄清楚如何正确定位它，以便它像预期的那样从屏幕外滑入，并正确包含在其边框内。

谷歌 Chrome 开发者工具告诉我，这些是徽章 div 的当前属性，在加载窗口时生成：

在此处输入图像描述

我非常感谢您提供的任何帮助！如果我认为需要徽章的想法有误，请纠正我，我将使用 CSS 强制将其删除，但是，我担心这可能会扰乱验证码验证过程并违反 Google 的政策。

4

3 回答 3

8

这可能会有所帮助：https ://developers.google.com/recaptcha/docs/invisible#config

您可以设置data-badge="inline"为允许您控制 CSS。

于 2017-05-31T16:43:51.440 回答
6

经过大量的尝试和错误，我发现recaptcha 徽章定位到它的包含元素而不是正文，并且它也是line-height从它的包含元素继承的。

由于我无法直接从其包含元素中删除徽章并将其移动到正文中，因此我使用 JQuery 和轻微的 CSS 更改解决了这个问题。

JQuery：将徽章附加到正文而不是其包含元素（表单）

为了做到这一点，我必须确保徽章已经完全加载到站点中。谷歌使这变得困难，但我能够通过 timpler 使用 jQuery.initialize来做到这一点。

在我的页面上运行 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;
}

这是一个很难弄清楚的问题，但最终归结为徽章从其父级继承了太多属性。我希望这对将来的人有所帮助！

于 2017-03-16T23:20:56.317 回答
1

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
}
于 2018-09-27T16:14:10.057 回答