在WordPress登录屏幕中实现reCAPTCHA v3



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 的交互似乎并没有被抑制。

  • 每次新会话时,我都在隐身测试,所以这不是问题。

有人可以告诉我我错过了什么吗?

首先,确保启用JavaScript。如果没有,请参阅验证码常见问题解答中的此链接。

我已经测试了以下代码,没有任何错误,并在右下角有 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版本。


接口密钥

从这里获取测试密钥,不确定它们是否适用于 reCaptcha v3 Beta,但我已在管理控制台注册。虽然,本地主机不是受支持的域,因此如果您在本地工作,请使用虚拟主机。

如果您在管理控制台中添加或更改了网域,则需要 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 常见问题解答

这是工作解决方案,将"函数.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');

最新更新