Como instalar chaves de site com caixa de seleção (teste de caixa de seleção) em páginas da Web

Nesta página, explicamos como instalar uma chave de site com um teste de caixa de seleção Não sou um robô no seu site. Dependendo de como você configurou a opção de segurança de teste ao criar a chave de site com caixa de seleção, o reCAPTCHA Enterprise pode exigir que o usuário final resolva um teste de CAPTCHA antes de gerar um token válido.

Antes de começar

  1. Escolha o melhor método para configurar o reCAPTCHA Enterprise no ambiente e conclua a configuração.

  2. Crie uma chave de site com caixa de seleção. Como alternativa, é possível copiar o ID de uma chave de site com caixa de seleção executando uma das seguintes etapas:

    • Para copiar o ID de uma chave de site atual com caixa de seleção no Console do Google Cloud, faça o seguinte:

      1. Acesse a página do reCAPTCHA Enterprise.

        Acessar o reCAPTCHA Enterprise

      2. Na lista de chaves reCAPTCHA, mantenha o ponteiro do mouse sobre o código que você quer copiar e clique em .

    • Para copiar o ID de uma chave de site atual com caixa de seleção usando a API REST, use o método projects.keys.list.

    • Para copiar o ID de uma chave de site atual com caixa de seleção usando a ferramenta gcloud, use o comando gcloud recaptcha keys list.

Como renderizar o widget reCAPTCHA no front-end

Para exibir o widget reCAPTCHA na sua página da Web, use um dos seguintes métodos:

Renderizar automaticamente o widget

Com esse método, é possível renderizar o widget em qualquer objeto (como div ou span) com a classe g-recaptcha.

Na página da Web, inclua o recurso JavaScript necessário e um elemento HTML com a classe g-recaptcha.

No elemento com a classe g-recaptcha, inclua também o atributo data-sitekey e defina-o como igual à chave de site com caixa de seleção.

O script deve ser carregado usando o protocolo HTTPS e pode ser incluído em qualquer ponto da página sem restrição.

O exemplo a seguir é um snippet de exemplo de código:

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

Renderizar explicitamente o widget

Com esse método, é possível renderizar o widget por um script JavaScript atual usando o método grecaptcha.enterprise.render(). Use esse método para evitar disputas ou se quiser mostrar o widget com base na lógica atual do JavaScript.

Para garantir que não haja disputas ao renderizar o widget explicitamente, analise as considerações a seguir:

  • Primeiro, ordene seus scripts com a função de callback e, depois, com a API reCAPTCHA Enterprise.
  • Use os parâmetros async e defer nas tags script.

Para renderizar o widget explicitamente, siga estas etapas:

  1. Para adiar a renderização do widget, faça o seguinte:

    1. Especifique a função de callback onload antes que a API reCAPTCHA Enterprise e outras dependências sejam carregadas.

       <script type="text/javascript">
       var onloadCallback = function() {
          alert("grecaptcha is ready!");
       };
       </script>
      
    2. Depois que a função de callback for executada, chame o método grecaptcha.enterprise.render() com os seguintes parâmetros da API JavaScript.

      • container: o elemento HTML para renderizar o widget reCAPTCHA. Especifique o ID do contêiner (string) ou o próprio elemento DOM.

      • parameters: um objeto que contém parâmetros como pares de chave-valor, por exemplo, {"sitekey": "your_site_key", "theme": "light"}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Para renderizar o widget, insira o recurso do JavaScript. Defina onload como o nome da função de callback onload e inclua render=explicit.

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

Exemplo 1

O exemplo de código a seguir mostra a renderização explícita após um callback 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' : ' site_key',
        });
      };
    </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"
        async defer>
    </script>
  </body>
</html>

Exemplo 2

O exemplo de código a seguir mostra a renderização explícita de vários 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' : 'site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'site_key',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'site_key',
          '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"
        async defer>
    </script>
  </body>
</html>

A seguir