Invisible Recaptcha Badge Positioning Issue

Question

Gần đây tôi đã bắt đầu sử dụng phương pháp Recaptcha mới của Google - Invisible Recaptcha mới của họ. Tôi nhận ra rằng việc thực hiện phiên bản này là một chút khác nhau, khi bạn đính kèm các thuộc tính recaptcha trực tiếp vào nút gửi của bạn mà sau đó gọi apapi recaptcha của google và bắt đầu quá trình xác minh. Tôi có tất cả những gì làm việc tốt, nhưng một trong những vấn đề lớn mà tôi đang có là với "Protected bằng recaptcha" huy hiệu vị trí.

Sau khi thêm cấu hình xác thực lại vào nút gửi, tôi bắt đầu thấy huy hiệu ở bên phải màn hình của tôi. Theo các trang web khác, huy hiệu này được cho là chỉ là biểu tượng recaptcha vuông cho đến khi nó được di chuột và sau đó nó được cho là trượt ra thành hình chữ nhật lớn mà tôi nhìn thấy ban đầu trên trang web của tôi.

Đây là hình ảnh về những gì tôi thấy trên trang web của mình sau khi triển khai biểu tượng xác thực ẩn.

Đây là mã nút gửi chứa reCAPTCHA thuộc tính:

<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key" 
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button> 

Lưu ý: Các data-badge tùy chọn khác như inline và bottomleft nguyên nhân các vấn đề định vị tương tự.

Các quy tắc ứng của mẫu chứa các nút:

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

Tôi đang trải qua hai vấn đề với huy hiệu reCAPTCHA này:

1. Cấp hiệu quản lý glitched bên ngoài của hộp bounding của nó/loại đường viền điều
2. Nó cũng không được định vị một phần ngoài màn hình cho đến khi được di chuột, như được cho là vậy. Tôi nhìn thấy hình chữ nhật đầy đủ trước khi tôi tương tác với nó bằng bất kỳ cách nào với con chuột của tôi. Tôi sẽ thấy logo hình vuông cho đến khi tôi di chuột qua nó, và nó trượt ra thành hình chữ nhật đầy đủ.

Về cơ bản, tôi cần tìm ra cách đặt vị trí này đúng cách để nó trượt từ ngoài màn hình như được cho là và được chứa đúng bên trong đường viền của nó.

công cụ cho nhà phát triển của Google Chrome cho tôi biết rằng đây là những thuộc tính hiện tại của div huy hiệu, tạo ra khi cửa sổ được nạp:

Tôi thực sự đánh giá cao sự giúp đỡ nào mà bạn có thể cung cấp! Nếu tôi không đúng khi nghĩ rằng huy hiệu là bắt buộc, hãy sửa tôi và tôi sẽ buộc loại bỏ huy hiệu bằng CSS, tuy nhiên, tôi e rằng điều này có thể làm hỏng quy trình xác minh hình ảnh xác thực và vi phạm chính sách của Google.

Answer 1

Sau nhiều lần dùng thử và lỗi, tôi đã nhận ra rằng huy hiệu recaptcha đã định vị phần tử chứa của nó thay vì cho phần thân, và nó cũng thừa kế line-height từ phần tử chứa của nó.

Vì tôi không trực tiếp có thể xóa huy hiệu khỏi phần tử có chứa của nó và di chuyển nó đến cơ thể, tôi đã giải quyết vấn đề với JQuery và thay đổi CSS nhỏ.

JQuery: Appened huy hiệu cho cơ thể chứ không phải là yếu tố chứa của nó (theo mẫu)

Để làm được điều này, tôi phải đảm bảo rằng các huy hiệu đã được nạp đầy đủ vào trang web. Google làm cho điều này trở nên khó khăn, nhưng tôi có thể thực hiện điều đó bằng cách sử dụng jQuery.initialize by timpler.

Khi tôi đã có initialize.min.js chạy trên trang của tôi, tôi chỉ đơn giản là sử dụng mã này:

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: Added một sự thay đổi đến line-height đến vị trí huy hiệu đúng với container

.grecaptcha-badge { 
    line-height:50px !important; 
} 

Đây là một khó khăn để tìm ra, nhưng cuối cùng nó chỉ đơn giản là đi xuống huy hiệu thừa hưởng một vài thuộc tính quá nhiều từ cha mẹ của nó. Tôi hy vọng điều này sẽ giúp ai đó trong tương lai!

Answer 2

này có thể giúp: https://developers.google.com/recaptcha/docs/invisible#config

Bạn có thể đặt data-badge="inline" để cho phép bạn kiểm soát CSS.