隐形Recaptcha徽章定位问题

Question

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

将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>

我遇到了这个rec​​aptcha徽章的两个问题:

1. 徽章在其边界框/边框类型的东西之外出现了问题
2. 它也不是部分离屏幕,直到悬停,就像它应该是.在用鼠标以任何方式与它进行交互之前,我看到了完整的矩形.我应该看到方形徽标,直到我将鼠标悬停在它上面,然后滑出整个矩形.

基本上,我需要弄清楚如何正确定位,以便它像屏幕一样从屏幕外滑入,并且正确地包含在其边框内.

Google Chrome开发人员工具告诉我,这些是加载窗口时生成的徽章div的当前属性:

我非常感谢您提供的任何帮助!如果我认为徽章是必需的,那么请纠正我,我会强制将其删除,但是,我担心这可能会破坏验证码验证过程并违反Google的政策.

Answer 1

经过大量的试验和错误，我发现Recaptcha徽章是定位在其包含元素而不是主体上，并且它也line-height从其包含元素继承了它。

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

jQuery：将徽章附加到正文，而不是其包含元素（窗体）

为了做到这一点，我必须确保徽章已经完全加载到站点中。Google使这变得困难，但是我可以通过使用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;
}

这很难弄清楚，但最终它只是归因于徽章从其父代继承了太多属性。希望这对以后的人有所帮助！

Answer 2

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

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