Saturday, 21 July 2018

implement reCAPTCHA v3 in WordPress loginscreen

Google just released a new beta version of their recaptcha: reCaptcha v3. I am trying to implement this in my WordPress login screens. However it does show the recaptcha logo in the bottom right corner (like here: https://www.google.com/recaptcha/intro/v3beta.html) which indicates that the script is loaded I can not seem to get it triggered.

What I've done:

1)Enqueued the api script in the header of my login screens (working)

2)Enqued some js to trigger the captcha

Enqueues

public static function load_login_scripts()
{
    wp_enqueue_script( 'recaptchav3', 'https://www.google.com/recaptcha/api.js?render=KEY');
    wp_enqueue_script( 'custom-recaptcha', 'somepath/recaptcha.js' );
}



add_action( 'login_enqueue_scripts', array($this, 'load_login_scripts'));

js to trigger the captcha

document.addEventListener("DOMContentLoaded", function(event) { 
grecaptcha.ready(function() {
  grecaptcha.execute('MYKEY', {action: 
'login'}).then(function(token) {
      console.log(token);
  });
});
});

This does actually log a (356 characters long) token in the console.

Good to know

  • I am working on a vagrant development envoirement, thought that might be the problem but the interacting with the api doesn't seem to be held down.

  • I am testing in incognito, each time a new session, so this can not be the problem.

Can someone tell me what I'm missing?



from implement reCAPTCHA v3 in WordPress loginscreen

No comments:

Post a Comment