Aprende a definir inicial y dinámicamente el lenguaje del cuadro de Google ReCaptcha (¿eres un robot?) Con JavaScript

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:

Lenguaje Valor
Arabic ar
Afrikaans af
Amharic am
Armenian hy
Azerbaijani az
Basque eu
Bengali bn
Bulgarian bg
Catalan ca
Chinese (Hong Kong) zh-HK
Chinese (Simplified) zh-CN
Chinese (Traditional) zh-TW
Croatian hr
Czech cs
Danish da
Dutch nl
English (UK) en-GB
English (US) en
Estonian et
Filipino fil
Finnish fi
French fr
French (Canadian) fr-CA
Galician gl
Lenguaje Valor
Georgian ka
German de
German (Austria) de-AT
German (Switzerland) de-CH
Greek el
Gujarati gu
Hebrew iw
Hindi hi
Hungarian hu
Icelandic is
Indonesian id
Italian it
Japanese ja
Kannada kn
Korean ko
Laothian lo
Latvian lv
Lithuanian lt
Malay ms
Malayalam ml
Marathi mr
Mongolian mn
Norwegian no
Persian fa
Lenguaje Valor
Polish pl
Portuguese pt
Portuguese (Brazil) pt-BR
Portuguese (Portugal) pt-PT
Romanian ro
Russian ru
Serbian sr
Sinhalese si
Slovak sk
Slovenian sl
Spanish es
Spanish (Latin America) es-419
Swahili sw
Swedish sv
Tamil ta
Telugu te
Thai th
Turkish tr
Ukrainian uk
Urdu ur
Vietnamese vi
Zulu zu

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

Que te diviertas ❤️!


Conviertete en un programador más sociable

Patrocinadores