Recaptcha (v2) does not appear unless I reload page with inspect element open.

315 views

Skip to first unread message

a.beson

unread,

May 29, 2018, 6:12:11 AM5/29/18

to reCAPTCHA

I implemented recaptcha v2 for a login page, based on the official documentation.

I inserted the script before the end of the head tag and added a recaptcha div into the form.

The code is similar to this:

...

   <script src='https://www.google.com/recaptcha/api.js'></script>

</head>

<body ng-app="myApp" ng-controller="main">
....


<div  class="g-recaptcha" data-sitekey="mykey"></div>

</form>



When I open the login page, there is some space where the captcha should be, but the captcha is not there (visible).

If I open element inspector in chrome and after that reload the page, the captcha appears. I can proceed with the captcha validation and login normally.

Comparing the pages with element inspector before and after the reload, this is what I get before the reload:

 <div class="row text-center captcha_row"> 
     <div class="col-sm-12"> 
         <div class="form-group"> 
             <div class="g-recaptcha" data-sitekey="mykey"></div> 
         </div> 
    </div> 
</div>

After the reload, it looks like this:

<div class="row text-center captcha_row"> 
    <div class="col-sm-12"> 
        <div class="form-group"> 
        <div class="g-recaptcha" data-sitekey="mykey">
            <div style="width: 304px; height: 78px;">
                <div>
                    <iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=mykey..." width="304" height="78" role="presentation" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox">
                         #document...
                    </iframe>
                </div>
                <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
                </textarea>
            </div>
         </div> 
         </div> 
    </div> 
</div>


The list of requests done in the two cases are not the same either.

I am sure the key is correct and valid. I don't know what else to check. The tests were done with google chrome. In the console section I do not see any error.

Reply all

Reply to author

Forward

0 new messages