我最近开始使用Google的新方法Recaptcha - 他们新的Invisible Recaptcha . 我意识到这个版本的实现有点不同,因为你将recaptcha属性直接附加到你的提交按钮,然后调用google的recaptcha api并开始验证过程 . 我所有的工作都很好,但我遇到的一个主要问题是“受重新保护的徽章”定位 .
将recaptcha配置添加到我的提交按钮后,我开始在屏幕右侧看到徽章 . 根据其他网站,这个徽章应该只是一个方形的recaptcha徽标,直到它徘徊,然后它应该滑出来,我最初在我的网站上看到的大矩形 .
Here is an image of what I am seeing on my site after implementing the invisible recaptcha.
Here is the submit button code containing the recaptcha attributes:
<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
)会导致相同的定位问题 .
The code of of the form containing the button:
<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>
I am experiencing two issues with this recaptcha badge:
-
徽章在边界框/边框类型之外出现了问题
-
它也不是部分离屏幕,直到悬停,就像它应该是 . 在用鼠标以任何方式与它进行交互之前,我看到了完整的矩形 . 我应该看到方形徽标,直到我将鼠标悬停在它上面,然后滑出整个矩形 .
基本上,我需要弄清楚如何正确定位它,以便它像屏幕一样从屏幕外滑入,并正确地包含在其边框内 .
Google Chrome Developer tools tell me that these are the current attributes of the badge div, generated when the window is loaded:
我非常感谢您提供的任何帮助!如果我认为徽章是必需的,那么请纠正我,我会强制将其删除,但是,我担心这可能会破坏验证码验证过程并违反Google的政策 .
3 回答
您可以在页面上的任何位置的
div
元素中添加验证码当您提交表单时,应调用以下JavaScript以启动验证码验证
成功的验证码验证将调用
onSubmit
函数(在data-callback
标记属性中指定) . 在那里你得到了recaptcha令牌,可以作为隐藏字段注入你的表单进行后端验证 .这可能会有所帮助:https://developers.google.com/recaptcha/docs/invisible#config
您可以设置
data-badge="inline"
以允许您控制CSS .经过大量的反复试验,我发现重新获取徽章定位于其包含元素而不是身体,并且它还从其包含元素继承其
line-height
.由于我无法直接从其包含元素中删除徽章并将其移动到正文,因此我解决了JQuery的问题以及轻微的CSS更改 .
JQuery: 将徽章添加到正文而不是其包含元素(表单)
为了做到这一点,我必须确保徽章已经完全加载到网站中 . Google让这很困难,但我能够通过使用jQuery.initialize by timpler来实现 .
一旦我在我的页面上运行了initialize.min.js,我只是使用了这段代码:
CSS: 添加了对
line-height
的更改,以便使用其容器正确定位徽章这是一个难以理解的问题,但最终它只是归结为徽章继承了其母版的一些太多属性 . 我希望这有助于将来的某个人!