web-dev-qa-db-ja.com

WordPress loginscreenにreCAPTCHA v3を実装する

グーグルは彼らの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との相互作用は抑制されていないようです。

  • 私は新しいセッションのたびにシークレットモードでテストしているので、これは問題にはなりません。

誰か私が欠けているものを教えてもらえますか？

javascriptwordpressapigoogle-apirecaptcha
16
Maartje

まず、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 version3.1.0なので、確認してくださいWordPress以降のバージョンを使用します。

APIキー

こちら からテストキーを取得します。reCaptchav3 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');

WebサイトでContent-Security-Policy（CSP）を使用している場合は、 reCaptcha faq を確認してください。

10
Saleh Mahmood