javascript - the - recaptcha v2 download




WordPress의 loginscreen에서 reCAPTCHA v3 구현 (2)

여기에 작동하는 해결책이 있습니다. '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');

Google은 reCaptcha v3의 recaptcha 베타 버전을 새로 출시했습니다. 내 WordPress 로그인 화면에서 이것을 구현하려고합니다. 그러나 오른쪽 하단에 recaptcha 로고 (예 : https://www.google.com/recaptcha/intro/v3beta.html )가 표시되어 스크립트가로드되었음을 나타내며 트리거가 실행되지 않는 것 같습니다.

내가 한 것:

1) 내 로그인 화면의 헤더에 API 스크립트를 대기열에 넣었습니다 (작동 중).

2) captcha를 트리거하기 위해 일부 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'));

captcha를 트리거하는 js

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

실제로 콘솔에 토큰 (356 자) 토큰을 기록합니다.

알아 둘만 한

  • 나는 방황하는 개발 envoirement에 종사하고있다, 그것이 문제일지도 모른다 생각했다. 그러나 api와 상호 작용하는 것은 억제되는 것처럼 보이지 않는다.

  • 시크릿 테스트를 시작할 때마다 새로운 세션이 생기므로 문제가 될 수 없습니다.

누군가 내가 놓친 걸 말해 줄 수 있니?


우선 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_scriptsWordPress 버전 3.1.0 이후 에 제공 login_enqueue_scripts 이후에는 WordPress 버전 을 사용해야합니다.

API 키

reCaptcha v3 Beta에서 작동하는지 확실하지 않지만 here 에서 테스트 키를 가져 오십시오.하지만 관리 콘솔에 등록되어 있습니다. 하지만 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을 검토하십시오.







recaptcha