隱形Recaptcha徽章定位問題

Question

我最近開始使用Google的新方法Recaptcha--他們的新隱形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> 

我遇到兩個問題與此驗證碼徽章：

1. 這個徽章上glitched其邊框的外/邊框類型的東西
2. 它也沒有定位部分屏幕上直到徘徊，就像它應該是。在以任何方式與鼠標交互之前，我都看到了完整的矩形。我應該看到方形的標誌，直到我將它懸停在它上面，然後滑出整個矩形。

基本上，我需要弄清楚如何正確定位它，以便它從屏幕外滑入，就像它應該的那樣，並且正好包含在邊框內。

谷歌Chrome瀏覽器開發工具告訴我，這些都是徽章股利，所產生的當前屬性加載窗口時：

我真的很感激任何幫助，您可以提供！如果我錯誤地認爲徽章是必需的，請糾正我的錯誤，然後我會用CSS強制刪除徽章，但是，恐怕這可能會導致驗證碼驗證過程混亂並違反Google的政策。

Answer 1

經過大量的反覆試驗，我發現recaptcha徽章被放置在其包含的元素上而不是身體上，並且還從其包含的元素繼承它的line-height。

因爲我不能直接從其包含的元素中移除徽章並將其移到身體上，所以我通過JQuery和輕微的CSS更改解決了問題。

JQuery的： Appened徽章的身體，而不是它包含的元素（形式）

爲了做到這一點，我必須確保徽章已經完全加載到該網站。 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; 
} 

這是一個難以解決的問題，但最終它只是歸結爲從它的父母繼承一些太多屬性的徽章。我希望這將有助於未來的人！

Answer 2

這可能幫助：https://developers.google.com/recaptcha/docs/invisible#config

您可以設置data-badge="inline"允許您控制CSS。