Using Google reCAPTURE

[jarrettj]

Hi,

Good day.

Has anyone successfully added Google reCAPTURE to login page? Thanks.

Regards. JJ

[jarrettj]

Got it to work.

[jroedel]

Can you post the config you used?

[jarrettj]

Used javascript to enable a submit button if the recapture was clicked. Hope that helps?

login.phtml:

<div id="g-recaptcha"></div>
<input type="hidden" value="<?php echo $googleCaptureKey; ?>" name="gkey">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<div class="alert alert-danger captcha-error" style="display: none;"> Fill in the captcha! </div> 
</div>

login.js:

$(document).ready(function() {
    var siteKey = $('input[name="gkey"]').val();
    if (siteKey !== undefined && siteKey !== '') {
        $('form[name="forgot-password"]').submit(function( e ) {
            if(allowSubmit) return true;
            e.preventDefault();
            $('.captcha-error').show();
        });
    }
});

function onloadCallback() {
    var siteKey = $('input[name="gkey"]').val();
    grecaptcha.render('g-recaptcha', {
      'sitekey' : siteKey,
      'callback': capcha_filled,
      'expired-callback': capcha_expired
    });
}

var allowSubmit = false;
function capcha_filled () {
    $('.captcha-error').hide();
    allowSubmit = true;
}
function capcha_expired () {
    allowSubmit = false;
}

Hope that helps somewhat. :)

Regards. JJ