在WordPress登录屏幕中实现reCAPTCHA v3

Question

谷歌刚刚发布了他们的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在WordPress版本 3.1.0 之后可用,因此请确保在此之后使用WordPress版本.

API密钥

从这里获取测试密钥,不确定它们是否适用于reCaptcha v3 Beta,但我已在管理控制台注册.虽然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