在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);
            });
    });
});  

---

版本問題

在WordPress版本 3.1.0 之后可以使用login_enqueue_scripts ，因此請確保在此之后使用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

Answer 2

這是工作解決方案，將'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');