如何动态更改 Google reCAPTCHA (v2) 主题？

Question

我正在开发一个 Bootstrap 网站，该网站具有浅色和深色模式，通过 JavaScript 运行。我已成功将 Google reCAPTCHA (v2)（我不是机器人）集成到我的项目中。

但我希望能够通过主题切换开关动态更改 reCAPTCHA 主题。由于文档有一个属性

data-theme

，我们可以将其值设置为

dark

或

light

。

reCAPTCHA 容器的主要

div

位于

rc-anchor-light / rc-anchor-dark

内，通过它可以通过更改类 (

iframe

) 来切换主题。

我尝试通过从主题切换 JavaScript 函数添加和删除类 (

rc-anchor-light / rc-anchor-dark

) 来动态更改 reCAPTCHA 主题，但它不起作用，我无法弄清楚为什么。

Answer 1

虽然 reCAPTCHA v2 本身不支持动态主题切换，但这里有一个使用多个 reCAPTCHA 容器和 JavaScript 的解决方法：

具有不同主题的两个 reCAPTCHA 容器的 HTML 结构

<div class="rg-recaptcha border rounded hide" id="grecaptchaLight" data-callback="recaptchaVe" data-expired-callback="recaptchaEx" data-theme="light"></div>
<div class="rg-recaptcha border rounded hide" id="grecaptchaDark"  data-callback="recaptchaVe" data-expired-callback="recaptchaEx" data-theme="dark"></div>

JavaScript：

// Function to determine the preferred theme (light or dark)

function getPreferredThemeFunction() {
    // Implement your logic to determine the preferred theme here
    // This function should return 'light' or 'dark'
}

// Variable to store the preferred theme
var preferredTheme = getPreferredThemeFunction();

// Variables to store the reCAPTCHA widget IDs
var grecaptchaDarkWD, grecaptchaLightWD;

// Variable to track whether reCAPTCHA has been rendered
var gCapthaRendered = false;

// Callback function triggered when reCAPTCHA is loaded
var onloadCallback = function () {
    // Render reCAPTCHA widgets with dark and light themes
    grecaptchaDarkWD = grecaptcha.render('grecaptchaDark', {
        'sitekey': '1234567890',
        'theme': 'dark'
    });

    grecaptchaLightWD = grecaptcha.render('grecaptchaLight', {
        'sitekey': '1234567890',
        'theme': 'light'
    });

    // Mark reCAPTCHA as rendered
    gCapthaRendered = true;

    // If a preferred theme is set, switch to it
    if (preferredTheme) {
        changeReCaptcha(preferredTheme);
    }
};

// Function to dynamically change the reCAPTCHA theme
function changeReCaptcha(theme = 'light') {
    if (gCapthaRendered) {
        // Reset and hide the inactive reCAPTCHA container
        if (theme == 'dark') {
            document.getElementById('grecaptchaLight').innerHTML = "";
            grecaptcha.reset(grecaptchaDarkWD);
            document.getElementById('grecaptchaLight').classList.add("hide");
            document.getElementById('grecaptchaDark').classList.remove("hide");
        } else if (theme == 'light') {
            document.getElementById('grecaptchaDark').innerHTML = "";
            grecaptcha.reset(grecaptchaLightWD);
            document.getElementById('grecaptchaDark').classList.add("hide");
            document.getElementById('grecaptchaLight').classList.remove("hide");
        }
    }
}

您可以在此处检查相同的实现：https://rajesh.app/support