reCAPTCHA invisível

Nesta página, explicamos como ativar e personalizar o reCAPTCHA invisível na sua página da Web.

Para invocar o reCAPTCHA invisível, você pode:

Consulte Configurações para saber como personalizar o reCAPTCHA invisível. Por exemplo, talvez você queira especificar o idioma ou a localização do selo.

Consulte Como verificar a resposta do usuário para saber se o usuário resolveu o captcha.

Vincular o desafio automaticamente a um botão

O método mais fácil de usar o widget invisível reCAPTCHA na sua página é incluir o recurso JavaScript necessário e adicionar alguns atributos ao botão HTML. Os atributos necessários são um nome de classe "g-recaptcha", a chave do site no atributo data-sitekey e o nome de um callback JavaScript para processar o preenchimento do captcha no atributo data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

O script precisa ser carregado usando o protocolo HTTPS e pode ser incluído de qualquer ponto da página sem restrições.

Vincule programaticamente o desafio a um botão ou invoque o desafio.

É possível adiar a vinculação especificando sua função de callback ao carregar e adicionando parâmetros ao recurso JavaScript. Esse recurso funciona da mesma forma que o desafio reCAPTCHA normal.

Invoque o desafio programaticamente.

É possível invocar a verificação reCAPTCHA de maneira programática, renderizando o desafio em um div com um atributo data-size="invisible" e chamando a execução programaticamente.

  1. Crie um div com data-size="invisible".

    <div class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible">
    </div>
    
  2. Chame grecaptcha.execute em um método JavaScript.

    grecaptcha.execute();
    

    Quando o callback for executado, será possível chamar o método grecaptcha.render da API JavaScript.

Configuração

Parâmetros do recurso JavaScript (api.js)

Parâmetro Valor Descrição
onload Opcional. O nome da sua função de retorno de chamada a ser executada quando todas as dependências forem carregadas.
render explicit
onload
Opcional. Se deve renderizar o widget explicitamente. O padrão é onload, que renderizará o widget na primeira tag g-recaptcha encontrada.
hl Veja códigos de idioma Opcional. Força o widget a renderizar em um idioma específico. Detecta automaticamente o idioma do usuário se não for especificado.

Atributos de tag g-recaptcha e parâmetros grecaptcha.render

atributo de tag g-recaptcha parâmetro grecaptcha.render Valor Padrão Descrição
data-sitekey sitekey Sua chave de site.
selo-dados ícone canto inferior direito in-line inferior esquerdo canto inferior direito Opcional. Reposicione o selo reCAPTCHA. "inline" permite posicioná-lo com CSS.
data-size tamanho invisível Opcional. Usado para criar um widget invisível vinculado a um div e executado de maneira programática.
data-tabindex tabindex 0 Opcional. O tabindex do desafio. Se outros elementos da sua página usarem tabindex, ele deverá ser definido para facilitar a navegação do usuário.
data-callback callback Opcional. O nome da sua função de retorno de chamada, executada quando o usuário envia uma resposta bem-sucedida. O token g-recaptcha-response é passado para seu retorno de chamada.
data-expired-callback expired-callback Opcional. O nome da sua função de retorno de chamada, executada quando a resposta reCAPTCHA expira e o usuário precisa verificar novamente.
data-error-callback error-callback Opcional. O nome da sua função de retorno de chamada, executado quando o reCAPTCHA encontra um erro (geralmente conectividade de rede) e não pode continuar até que a conectividade seja restaurada. Se você especificar uma função aqui, será responsável por informar o usuário que ele deve tentar novamente.
isolado false Opcional. Para que os proprietários de plug-ins não interfiram nas instalações atuais do reCAPTCHA em uma página. Se verdadeiro, esta instância reCAPTCHA vai fazer parte de um espaço de ID separado.

JavaScript API

Método Descrição
grecaptcha.render(
container,
parâmetros,
herdar
)
Renderiza o contêiner como um widget reCAPTCHA e retorna o ID do widget recém-criado.
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 key=value, por exemplo, {"sitekey": "your_site_key", "theme": "light"}. Consulte os parâmetros grecaptcha.render.
herança
Use os atributos data-* existentes no elemento se o parâmetro correspondente não for especificado. Os parâmetros terão precedência sobre os atributos.
grecaptcha.execute(
opt_widget_id
)
Invoque programaticamente a verificação reCAPTCHA. Usado se o reCAPTCHA invisível estiver em um div em vez de um botão.
opt_widget_id
ID opcional do widget, o padrão é o primeiro widget criado, se não especificado.
grecaptcha.reset(
opt_widget_id
Redefine o widget reCAPTCHA.
opt_widget_id
ID opcional do widget, o padrão é o primeiro widget criado, se não especificado.
grecaptcha.getResponse(
opt_widget_id
Obtém a resposta para o widget reCAPTCHA.
opt_widget_id
ID opcional do widget, o padrão é o primeiro widget criado, se não especificado.

Exemplos

Renderização explícita após um retorno de chamada onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Invocar o desafio reCAPTCHA invisível após a validação do lado do cliente.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>