implement reCAPTCHA v3 in WordPress loginscreen

Question

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) Enqueued 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?

Answer 1

First of all, make sure to enable JavaScript. If not, refer to this link at reCaptcha faq.

I've tested the following code without any error and had reCaptcha Logo in the bottom right corner:

reCaptchaV3/reCaptchaV3.php

<?php 
/*
 * Plugin Name: reCaptchaV3 Beta
 * Plugin Author: N/A
 * Version: 0.1
 */

final class reCaptchaV3
{

    public function __construct()  { }

    public function init()
    {
        add_action( 'login_enqueue_scripts', array($this, 'load_login_scripts') );
    }

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

add_action( 'init', array( new reCaptchaV3(), 'init' ) );

reCaptchaV3/recaptcha.js

document.addEventListener("DOMContentLoaded", function(event) { 
    grecaptcha.ready(function() {
        grecaptcha.execute('SITE_KEY', {action: 

            'login'}).then(function(token) {
                console.log(token);
            });
    });
});  

---

Version Issue

login_enqueue_scripts was available after WordPress version 3.1.0 so make sure to use WordPress version after that.

---

API Keys

Get the testing keys from here, not sure if they work for reCaptcha v3 Beta but I had my registered at admin console. Although, localhost is not a supported domain so use a virtual host if you're working locally.

If you have added or changed domains in admin console, it takes 30 minutes to effect the change

Testing Keys:

Site Key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Secret Key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

---

Accessibility

If you're not seeing reCaptcha logo, maybe google.com is not accessible for script loading. Try to replace it with recaptcha.net like this:

wp_enqueue_script( 'recaptchav3', 'https://www.recaptcha.net/recaptcha/api.js?render=SITE_KEY');

If you're using Content-Security-Policy (CSP) on your website, please review reCaptcha faq