javascript - www - recaptcha logo

WordPressのloginscreenでreCAPTCHA v3を実装する (2)

Googleはrecaptchaの新しいベータ版reCaptcha v3をリリースしました。私は私のワードプレスのログイン画面でこれを実装しようとしています。しかし、スクリプトがロードされていることを示す右下隅にrecaptchaのロゴが表示されhttps://www.google.com/recaptcha/intro/v3beta.html （ここではhttps://www.google.com/recaptcha/intro/v3beta.htmlように表示され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文字の長さ）のトークンを記録します。

お役立ち情報

私は迷惑な開発のenvoirementに取り組んでいます、それは問題かもしれないと思ったが、APIとのやり取りは抑えられていないようだ。
私はシークレットで試していますが、毎回新しいセッションがあるので、これは問題にはなりません。

誰かが私に行方不明を教えてもらえますか？

ここでは、あなたの 'functions.php'の関数をこれに変更してください。

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

まず、 JavaScriptを有効にし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はWordPressバージョン 3.1.0 以降で使用できましたので、その後WordPressバージョンを使用してください。

APIキー

reCaptcha v3 Betaで動作するかどうかは不明ですが、管理コンソールで登録しています。ただし、localhostはサポートされていないため、ローカルで作業している場合は仮想ホストを使用してください。

管理コンソールでドメインを追加または変更した場合、変更を反映するまでに30分かかります

テストキー：

サイトキー： 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
秘密鍵： 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

アクセシビリティ

reCaptchaロゴが表示されない場合は、 google.comにスクリプトの読み込みができない可能性があります。 recaptcha.netようにrecaptcha.netと置き換えてみてください：

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

あなたのウェブサイトでコンテンツセキュリティポリシー（CSP）を使用している場合は、 reCaptcha faq