WordPress 로그인 화면에서 reCAPTCHA v3 구현

WordPress 로그인 화면에서 reCAPTCHA v3 구현

구글은 리캡차 v3의 새로운 베타 버전을 출시했다.WordPress 로그인 화면에서 구현하려고 합니다.그러나 오른쪽 아래 구석에 retapcha 로고가 표시되어 있습니다(예를 들어, 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와의 상호작용이 억제되지 않는 것 같습니다.

• 새로운 세션이 있을 때마다 익명으로 테스트하고 있기 때문에 문제가 되지 않습니다.

내가 뭘 놓쳤는지 누가 말해줄래?

우선, 반드시 유효하게 해 주세요.JavaScript그렇지 않은 경우 reCaptcha FAQ에서 이 링크를 참조하십시오.

다음 코드를 오류 없이 테스트하여 오른쪽 하단에 리캡차 로고가 표시되었습니다.

리캡처 V3/리캡처 V3.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' ) );

리캡처 V3/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다음과 같습니다.

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

웹 사이트에서 CSP(Content-Security-Policy)를 사용하는 경우 reCaptcha FAQ를 검토하십시오.

여기 동작하는 솔루션이 있습니다.기능의 기능을 변경합니다.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');

언급URL : https://stackoverflow.com/questions/51376912/implement-recaptcha-v3-in-wordpress-loginscreen