Cómo configurar el idioma de Google ReCaptcha desde el principio y dinámicamente con JavaScript

ReCaptcha se usa ampliamente en muchos blogs y sitios web donde es necesario agregar protección adicional contra los bots que constantemente envían mensajes tontos en sus formularios de contacto. Es bastante fácil de implementar y es una buena opción entre otras opciones de código abierto. Como no todos los desarrolladores necesitan lidiar con sitios web en varios idiomas, no es fácil encontrar cómo cambiar el idioma de ReCaptcha durante la inicialización o de forma dinámica.

En este breve artículo, te explicaré cómo configurar fácilmente el idioma inicial de ReCaptcha o cambiarlo dinámicamente solo con JavaScript.

Cambiar el idioma en la inicialización

Para simplemente iniciar ReCaptcha con un idioma específico, lo único que necesitas hacer es proporcionar el parámetro de configuración regional al archivo de JavaScript solicitado de ReCaptcha. Este parámetro se puede especificar a través de un parámetro GET como este, por ejemplo, para solicitar la versión en español del archivo ReCaptcha, agrega el parámetro de idioma host ( hl) al archivo js solicitado con un valor de es:

<script src="https://www.google.com/recaptcha/api.js?hl=es"></script>

O en alemán con un valor de de:

<script src="https://www.google.com/recaptcha/api.js?hl=de"></script>

Después de la inicialización, el cuadro de ReCaptcha deberia comenzar con el idioma que desees.

Cambiar el idioma de forma dinámica

Si deseas cambiar dinámicamente el idioma de ReCaptcha, puedes usar el siguiente método auxiliar que actualizará el archivo de script de ReCaptcha de acuerdo con el idioma que desees:

/**
 * Cambie dinámicamente el idioma de ReCaptcha dentro del contenedor seleccionado.
 * 
 * @param recaptchaContainer 
 * @param lang 
 */
function setCaptchaLang(recaptchaContainer, lang) {
    lang = lang || "en";

    // 1. Busque el iframe de ReCaptcha
    const iframeGoogleCaptcha = recaptchaContainer.querySelector('iframe');

    // 2. Recuperar el idioma actual
    const currentLang = iframeGoogleCaptcha.getAttribute("src").match(/hl=(.*?)&/).pop();

    // 3. Verifique si el idioma que desea configurar es diferente al actual
    if (currentLang !== lang) {
        // 4. Si es así, cámbialo
        iframeGoogleCaptcha.setAttribute(
            "src",
            iframeGoogleCaptcha.getAttribute("src").replace(
                /hl=(.*?)&/,
                'hl=' + lang + '&'
            )
        );
    }
}

El método setCaptchaLang espera 2 argumentos, como primero, el nodo DOM del elemento que contiene la caja de ReCaptcha y como segundo parámetro, una cadena con el código del idioma.

Por ejemplo, considerando la siguiente inicialización de ReCaptcha:

<div id="recaptcha-container">
    <div style="display:inline-block;">
        <div class="g-recaptcha" data-sitekey="XXXXXXXXXXXX"></div>
    </div>
</div>
<script src="https://www.google.com/recaptcha/api.js?hl=es"></script>

Debería ser fácil cambiarlo del idioma original (español) a otro idioma como este:

// To change it to German
setCaptchaLang(document.getElementById("recaptcha-container"), "de");

// To change it to English
setCaptchaLang(document.getElementById("recaptcha-container"), "en");

Lista de idiomas

Para obtener una lista completa de los idiomas admitidos por ReCaptcha:

Puedes consultar la lista oficial de códigos en el sitio web de ReCaptcha aquí.

Que te diviertas ❤️!