谷歌刚刚发布了他们的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个字符长)令牌。
很高兴知道
有人能告诉我我错过了什么吗?
首先,确保启用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
这是工作解决方案,将'functions.php'中的函数更改为this。
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');