реализовать reCAPTCHA v3 в WordPress loginscreen

Google только что выпустил новую бета-версию своей recaptcha: reCaptcha v3. Я пытаюсь реализовать это в моих экранах входа в WordPress. Однако он показывает логотип recaptcha в нижнем правом углу (например, https://www.google.com/recaptcha/intro/v3beta.html), который указывает, что скрипт загружен. Кажется, я не могу запустить его.

Что я сделал:

1) Заблокирован скрипт api в заголовке моих экранов входа (работает)

2) Завоевал некоторые js, чтобы вызвать капчу

ставит в очередь

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 для запуска captcha

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

Это фактически регистрирует токен (356 символов) в консоли.

Хорошо знать

Я работаю над энтузиазмом развития бродяг, думал, что это может быть проблема, но взаимодействие с api, похоже, не сдерживается.
Я тестирую инкогнито, каждый раз, когда наступает новый сеанс, поэтому это не может быть проблемой.

Может ли кто-нибудь сказать мне, что мне не хватает?

Ответ 1

Прежде всего, включите JavaScript. Если нет, обратитесь к этой ссылке в reCaptcha faq.

Я протестировал следующий код без каких-либо ошибок и имел логотип reCaptcha в правом нижнем углу:

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);
            });
    });
});

Проблема с версией

login_enqueue_scripts был доступен после WordPress версии 3.1.0, поэтому после этого обязательно используйте версию WordPress.

Ключи API

Получите тестовые ключи отсюда, не уверен, что они работают на бета-версию reCaptcha v3, но я зарегистрировался в консоли администратора. Хотя, localhost не поддерживается, поэтому используйте виртуальный хост, если вы работаете локально.

Если вы добавили или изменили домены в консоли администратора, для внесения изменений потребуется 30 минут

Ключи тестирования:

Ключ сайта: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Секретный ключ: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

доступность

Если вы не видите логотип reCaptcha, возможно, google.com недоступен для загрузки скриптов. Попробуйте заменить его с помощью recaptcha.net следующим образом:

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

Если вы используете Content-Security-Policy (CSP) на своем веб-сайте, ознакомьтесь с reCaptcha faq

Ответ 2

Вот рабочее решение, измените функцию в вашем "functions.php" на это.

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', 'load_login_scripts');