보이지 않는 Recaptcha 배지 위치 지정 문제

Question

최근 Google의 새로운 Recaptcha 방법 인 새로운 Invisible Recaptcha를 사용하기 시작했습니다. 이 버전의 구현은 recaptcha 속성을 Google의 recaptcha API를 호출하고 확인 프로세스를 시작하는 제출 버튼에 직접 첨부 할 때 약간 다름을 알았습니다. 나는 그 모든 것들이 정상적으로 작동하지만, 내가 가지고있는 중요한 문제는 "Recaptcha Protected by"배지 포지셔닝이다.

내 제출 버튼에 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> 

참고 : 같은 inline와 같은 위치 문제 원인 bottomleft 같은 다른 data-badge 옵션을 제공합니다.

버튼이 포함 된 형태의 코드 :이 reCAPTCHA를 배지 두 가지 문제가 발생하고

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

을 : 배지는 그 경계 상자의 외부 glitched됩니다

1. /경계 유형의 것
2. 그것은 또한 예정되어있는 것처럼, 공중에 떠날 때까지 부분적으로 화면 밖으로 위치하지 않습니다. 내 마우스로 어떤 방식 으로든 상호 작용하기 전에 전체 사각형을 볼 수 있습니다. 나는 그것 위에 마우스를 가져갈 때까지 정사각형 로고를보아야하고, 그것은 완전한 직사각형이되도록 미끄러 져 나간다.

는 기본적으로, 나는 그것이하도록되어, 그 경계의 안쪽에 제대로 포함되어있는 것처럼 오프 스크린에서 슬라이드 수 있도록 적절하게이 위치하는 방법을 알아낼 필요가있다.

Google 크롬 개발자 툴은 윈도우가로드 될 때 이러한 생성 된 배지 DIV의 현재 속성이 있음을 말해 :

난 정말 당신이 제공 할 수있는 모든 도움을 주셔서 감사합니다! 배지가 필요하다고 생각하는 것이 틀 렸으면 제게 정정하십시오. CSS로 강제 제거 하겠지만 captcha 인증 프로세스가 망가져 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

당신은 당신이 CSS를 제어 할 수 있도록 data-badge="inline"을 설정할 수 있습니다.