web-dev-qa-db-fra.com

implémenter reCAPTCHA v3 dans WordPress loginscreen

Google vient de publier une nouvelle version bêta de leur recaptcha: reCaptcha v3. J'essaie d'implémenter cela dans mes écrans de connexion WordPress. Cependant, il montre le logo recaptcha dans le coin inférieur droit (comme ici: https://www.google.com /recaptcha/intro/v3beta.html ) qui indique que le script est chargé je n'arrive pas à le faire déclencher.

Ce que j'ai fait:

1) Mise en file d'attente du script API dans l'en-tête de mes écrans de connexion (fonctionne)

2) Mis en file d'attente js pour déclencher le captcha

Files d'attente 

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 pour déclencher le captcha 

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

Cela enregistre en fait un jeton (long de 356 caractères) dans la console.

Bon à savoir

  • Je travaille sur un développement vagabond, habituellement, je pensais que cela pourrait être le problème, mais l'interaction avec l'API ne semble pas être limitée.

  • Je teste en incognito, à chaque nouvelle session, donc ça ne peut pas être le problème.

Quelqu'un peut-il me dire ce qui me manque?

javascriptwordpressapigoogle-apirecaptcha
16
Maartje

Tout d'abord, assurez-vous d'activer JavaScript. Sinon, reportez-vous à ce lien à FAQ reCaptcha .

J'ai testé le code suivant sans aucune erreur et j'avais le logo reCaptcha dans le coin inférieur droit:

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

Problème de version

login_enqueue_scripts était disponible après WordPress version 3.1.0 alors assurez-vous d'utiliser = WordPress version après cela.

Clés API

Obtenez les clés de test de ici , je ne sais pas si elles fonctionnent pour reCaptcha v3 Beta, mais je me suis inscrit sur console d'administration . Bien que localhost ne soit pas un domaine pris en charge, utilisez un hôte virtuel si vous travaillez localement.

Si vous avez ajouté ou modifié des domaines dans console d'administration , cela prend 30 minutes pour effectuer le changement

Clés de test:

Clé du site: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Clef secrète: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Accessibilité

Si vous ne voyez pas le logo reCaptcha, peut-être google.com n'est pas accessible pour le chargement du script. Essayez de le remplacer par recaptcha.net comme ça:

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

Si vous utilisez Content-Security-Policy (CSP) sur votre site Web, veuillez consulter FAQ reCaptcha

10
Saleh Mahmood