Instala claves de casilla de verificación (desafío de casilla de verificación) en sitios web

En esta página, se explica cómo instalar una clave de casilla de verificación con el desafío de casilla de verificación No soy un robot en tu sitio web. Según cómo hayas configurado la opción de seguridad del desafío cuando creaste la clave de casilla de verificación, es posible que reCAPTCHA requiera que el usuario final resuelva un desafío de CAPTCHA antes de generar un token válido.

Antes de comenzar

  1. Prepara tu entorno para Google Cloud Fraud Defense.

  2. Crea una clave de casilla de verificación.

    Como alternativa, puedes copiar el ID de una clave de casilla de verificación existente realizando uno de los siguientes pasos:

    • Para copiar el ID de una clave existente desde la Google Cloud consola, haz lo siguiente:

      1. Ve a la página Google Cloud Fraud Defense.

        Ir a Google Cloud Fraud Defense

      2. Selecciona la pestaña Keys.
      3. En la lista de claves de reCAPTCHA, busca la clave que deseas copiar y, luego, haz clic en .
    • Para copiar el ID de una clave existente con la API de REST, usa el método projects.keys.list.
    • Para copiar el ID de una clave existente con la gcloud CLI, usa el comando gcloud recaptcha keys list.

Renderiza el widget reCAPTCHA en el frontend

Para mostrar el widget reCAPTCHA en tu página web, usa uno de los siguientes métodos:

Renderiza automáticamente el widget

Con este método, puedes renderizar el widget en cualquier objeto (como un div o un span) con la clase g-recaptcha.

En tu página web, incluye el recurso de JavaScript necesario y un elemento HTML con la clase g-recaptcha.

En el elemento con la clase g-recaptcha, también incluye el atributo data-sitekey y configúralo con tu clave de casilla de verificación.

Para especificar una acción, incluye el atributo data-action y configúralo con un nombre de acción. Para obtener más orientación, consulta Acciones.

La secuencia de comandos debe cargarse mediante el protocolo HTTPS y puede incluirse desde cualquier punto de la página sin restricciones.

reCAPTCHA usa el idioma del navegador de forma predeterminada. Si deseas especificar un idioma diferente, usa el hl=LANG atributo en tu secuencia de comandos. Por ejemplo, para usar francés, especifica lo siguiente: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Para obtener información sobre los idiomas admitidos, consulta los códigos de idioma para reCAPTCHA.

El siguiente ejemplo es un fragmento de código de muestra:

    <html>
      <head>
        <title>reCAPTCHA demo: Simple page</title>
        <script src="https://www.google.com/recaptcha/enterprise.js"></script>
      </head>
      <body>
        <form action="?" method="POST">
          <div class="g-recaptcha" data-sitekey="KEY_ID" data-action="LOGIN"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

Renderiza explícitamente el widget

Con este método, puedes renderizar el widget a través de una secuencia de comandos de JavaScript existente con el método grecaptcha.enterprise.render(). Usa este método para evitar condiciones de carrera o si deseas mostrar el widget según la lógica de JavaScript existente.

Para evitar condiciones de carrera cuando renderizas el widget de forma explícita, ordena tus secuencias de comandos con la función de devolución de llamada primero y, luego, la API de reCAPTCHA.

Para renderizar el widget de forma explícita, sigue estos pasos:

  1. Para diferir la renderización del widget, haz lo siguiente:

    1. Especifica tu función de devolución de llamada onload antes de que se carguen la API de reCAPTCHA y otras dependencias.

       <script type="text/javascript">
 var onloadCallback = function() {
    alert("grecaptcha is ready!");
 };
 </script>

    2. Después de que se ejecute tu función de devolución de llamada, llama al grecaptcha.enterprise.render() método con los siguientes parámetros de la API de JavaScript.

      • conteiner: El elemento HTML para renderizar el widget reCAPTCHA. Especifica el ID del contenedor (cadena) o el elemento DOM.

      • parameters: Un objeto que contiene parámetros como pares clave-valor, por ejemplo, {"sitekey": "KEY_ID", "theme": "light"}.

      • acción: Especifica el nombre de la acción asociada con el elemento protegido.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. Para renderizar el widget, inserta el recurso de JavaScript. Configura onload con el nombre de tu función de devolución de llamada onload e incluye render=explicit.

    reCAPTCHA usa el idioma del navegador de forma predeterminada. Si deseas especificar un idioma diferente, usa el hl=LANG atributo en tu secuencia de comandos. Por ejemplo, para usar francés, especifica lo siguiente: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Para obtener información sobre los idiomas admitidos, consulta los códigos de idioma para reCAPTCHA.

     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit">
 </script>

Ejemplo 1

En el siguiente muestra de código, se muestra la renderización explícita después de una devolución de llamada onload:

<html>
   <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
     <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : 'KEY_ID',
          'action': 'LOGIN',
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
      <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit">
    </script>
  </body>
</html>

Ejemplo 2

En el siguiente muestra de código, se muestra la renderización explícita de varios widgets:

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
        <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.enterprise.render('example1', {
          'sitekey' : 'KEY_ID',
          'action': 'action1',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
          'action': 'action2',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'action': 'action3',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit">
    </script>
  </body>
</html>

¿Qué sigue?