Question

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触发验证码

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

这实际上会在控制台中记录一个（长356个字符）的令牌。

了解

我正在研究一个无所事事的开发环境，以为可能是问题所在，但与api的交互似乎并没有受到阻碍。
每次进行新会话时，我都以隐身方式进行测试，所以这不是问题。

有人可以告诉我我想念什么吗？

Answer 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可用after WordPress version 3.1.0 ，因此请确保在此之后使用WordPress版本。

API密钥

从here获取测试密钥，不确定它们是否适用于reCaptcha v3 Beta，但是我在admin console注册了。虽然localhost不是受支持的域，但是如果您在本地工作，请使用虚拟主机。

如果您在admin console中添加或更改了域，则需要30分钟才能生效

测试键：

网站密钥：6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
密钥：6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

可访问性

如果您没有看到reCaptcha徽标，则可能无法访问google.com来加载脚本。尝试用recaptcha.net替换它，如下所示：

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

如果您在网站上使用内容安全政策（CSP），请查看reCaptcha faq

Answer 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');

在WordPress登录屏幕中实施reCAPTCHA v3

2 个答案: