在 WordPress 登录屏幕中实现 reCAPTCHA v3 [英] implement reCAPTCHA v3 in WordPress loginscreen
问题描述
Google 刚刚发布了他们 recaptcha 的新测试版:reCaptcha v3.我正在尝试在我的 WordPress 登录屏幕中实现这一点.但是它确实在右下角显示了 recaptcha 徽标(例如:https://www.google.com/recaptcha/intro/v3beta.html) 这表明脚本已加载我似乎无法触发它.
Google just released a new beta version of their recaptcha: reCaptcha v3. I am trying to implement this in my WordPress login screens. However it does show the recaptcha logo in the bottom right corner (like here: https://www.google.com/recaptcha/intro/v3beta.html) which indicates that the script is loaded I can not seem to get it triggered.
我所做的:
1) 将 API 脚本排入我的登录屏幕的标题中(工作)
1) Enqueued the API script in the header of my login screens (working)
2) 加入一些 js 以触发验证码
2) Enqueued some js to trigger the captcha
入队
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 个字符长)令牌.
This does actually log a (356 characters long) token in the console.
注意事项
我正在开发一个无业游民的开发环境，我认为这可能是问题所在，但与 api 的交互似乎并没有被抑制.
I am working on a vagrant development envoirement, thought that might be the problem but the interacting with the api doesn't seem to be held down.
我在隐身模式下进行测试，每次都有一个新会话，所以这不是问题.
I am testing in incognito, each time a new session, so this can not be the problem.
有人能告诉我我错过了什么吗?
Can someone tell me what I'm missing?
推荐答案
首先，确保启用 JavaScript.如果没有，请参阅 reCaptcha 常见问题 中的此链接.
First of all, make sure to enable JavaScript. If not, refer to this link at reCaptcha faq.
我已经测试了以下代码没有任何错误并且右下角有 reCaptcha 标志:
I've tested the following code without any error and had reCaptcha Logo in the bottom right corner:
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 版本.
login_enqueue_scripts was available after WordPress version 3.1.0 so make sure to use WordPress version after that.
API 密钥
从此处获取测试密钥，不确定它们是否适用于 reCaptchav3 Beta，但我已在 管理控制台 注册.虽然 localhost 不是受支持的域，因此如果您在本地工作，请使用虚拟主机.
Get the testing keys from here, not sure if they work for reCaptcha v3 Beta but I had my registered at admin console. Although, localhost is not a supported domain so use a virtual host if you're working locally.
如果您在管理控制台中添加或更改了域，则需要 30 分钟才能生效改变
If you have added or changed domains in admin console, it takes 30 minutes to effect the change
测试密钥:
站点密钥:6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
密钥:6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
辅助功能
如果您没有看到 reCaptcha 徽标，则可能无法访问 google.com 进行脚本加载.尝试用 recaptcha.net 替换它，如下所示:
If you're not seeing reCaptcha logo, maybe google.com is not accessible for script loading. Try to replace it with recaptcha.net like this:
wp_enqueue_script( 'recaptchav3', 'https://www.recaptcha.net/recaptcha/api.js?render=SITE_KEY');
如果您在网站上使用内容安全策略 (CSP)，请查看reCaptcha 常见问题解答
If you're using Content-Security-Policy (CSP) on your website, please review reCaptcha faq
这篇关于在 WordPress 登录屏幕中实现 reCAPTCHA v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
