Como instalar chaves de site de caixas de seleção (desafio da caixa de seleção) em sites

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

Antes de começar

  1. Escolha o melhor método para configurar o reCAPTCHA Enterprise em seu ambiente e concluir a configuração.

  2. Criar uma chave de site de caixa de seleção.

Como renderizar o widget reCAPTCHA no front-end

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

Renderizar automaticamente o widget

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

Na sua 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 igual à chave da caixa de seleção do site.

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 código de amostra:

    <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, você pode renderizar o widget por meio de um script JavaScript existente usando o método grecaptcha.enterprise.render(). Use este método para evitar disputas ou se quiser mostrar o widget com base na lógica JavaScript existente.

Para garantir que não haja condições de corrida ao renderizar o widget explicitamente, revise as seguintes considerações:

  • Ordene os scripts com a função de callback primeiro e, em seguida, 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 da API reCAPTCHA Enterprise e outras dependências serem carregadas.

       <script type="text/javascript">
       var onloadCallback = function() {
          alert("grecaptcha is ready!");
       };
       </script>
      
    2. Depois que sua 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 JavaScript. Defina onload como o nome da sua função de retorno de chamada 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