javascript - implementar reCAPTCHA v3 en WordPress loginscreen

api google-api

Question

Google acaba de lanzar una nueva versión beta de su recaptcha: reCaptcha v3. Estoy tratando de implementar esto en mis pantallas de inicio de sesión de WordPress. Sin embargo, muestra el logotipo de recaptcha en la esquina inferior derecha (como aquí: https://www.google.com/recaptcha/intro/v3beta.html ) que indica que el script está cargado, parece que no puedo activarlo.

Qué he hecho:

1) Encolado el script API en el encabezado de mis pantallas de inicio de sesión (en funcionamiento)

2) Encolado algunos js para activar el captcha.

Encolas

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 para activar el captcha

document.addEventListener("DOMContentLoaded", function(event) {
grecaptcha.ready(function() {
grecaptcha.execute(''MYKEY'', {action: ''login''}).then(function(token) {
console.log(token);
});
});
});

Esto realmente registra un token (356 caracteres de longitud) en la consola.

Bueno saber

• Estoy trabajando en un desarrollo vagabundo del desarrollo, pensé que ese podría ser el problema, pero la interacción con la API no parece estar restringida.

• Estoy probando en incógnito, cada vez que una nueva sesión, por lo que este no puede ser el problema.

¿Puede alguien decirme lo que me estoy perdiendo?

Answer 1

Aquí está la solución de trabajo, cambie la función en su ''functions.php'' a esto.

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'');

Answer 2

En primer lugar, asegúrese de habilitar JavaScript . Si no es así, consulte este enlace en reCaptcha faq .

He probado el siguiente código sin ningún error y tenía el logotipo de reCaptcha en la esquina inferior derecha:

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

Versión del problema

login_enqueue_scripts estaba disponible después de la versión 3.1.0 de WordPress, así que asegúrate de usar la versión de WordPress después de eso.

Claves API

Obtenga las claves de prueba desde here , no estoy seguro de si funcionan para reCaptcha v3 Beta, pero me registré en la consola de administración . Aunque, localhost no es un dominio compatible, use un host virtual si está trabajando localmente.

Si ha agregado o cambiado dominios en la consola de administración , demora 30 minutos para efectuar el cambio.

Claves de prueba:

Clave del sitio: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Clave secreta: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Accesibilidad

Si no está viendo el logotipo de reCaptcha, tal vez no se pueda acceder a google.com para cargar scripts. Intenta reemplazarlo con recaptcha.net esta manera:

wp_enqueue_script( ''recaptchav3'', ''https://www.recaptcha.net/recaptcha/api.js?render=SITE_KEY'');

Si usa Content-Security-Policy (CSP) en su sitio web, revise reCaptcha faq