Esta página foi traduzida pela API Cloud Translation.

reCAPTCHA invisível

Esta página explica como ativar e personalizar o reCAPTCHA invisível na sua página da Web.

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

Vincular automaticamente o desafio a um botão ou
Vincule o desafio a um botão de forma programática ou
Invocar o desafio programaticamente

Consulte Configurações para saber como personalizar o reCAPTCHA invisível. Por exemplo, você pode especificar o idioma ou o local do selo.

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

Vincular o desafio automaticamente a um botão

O método mais fácil para usar o widget reCAPTCHA invisível na sua página é incluir o recurso JavaScript necessário e adicionar alguns atributos ao seu 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 do JavaScript para processar a conclusão 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 em qualquer ponto da página sem restrição.

Vincule o desafio a um botão ou invoque-o de forma programática.

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

Invocar o desafio de forma programática.

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

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

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

Chame grecaptcha.execute em um método JavaScript.
```
grecaptcha.execute();
```
Quando o callback é executado, você pode chamar o método grecaptcha.render da API JavaScript.
Sua função de callback onload precisa ser definida antes que a API reCAPTCHA seja carregada. Para garantir que não haja disputas:
- Ordene seus scripts com o callback e depois o reCAPTCHA
- usar os parâmetros `async` e `defer` nas tags `script`

Configuração

Parâmetros de 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 do site.
`data-badge`	selo	inferior direito inferior esquerdo em linha	inferior direito	Opcional. Posicione o selo reCAPTCHA novamente. "inline" permite posicionar o elemento com CSS.
`data-size`	tamanho	invisível		Opcional. Usado para criar um widget invisível vinculado a um div e executado programaticamente.
`data-tabindex`	tabindex		0	Opcional. O índice de tabulação 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.
	isoladas		falso	Opcional. Para que os proprietários de plug-ins não interfiram nas instalações do reCAPTCHA em uma página. Se for verdadeiro, essa instância do reCAPTCHA fará 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. herdar Use os atributos data-* atuais no elemento se o parâmetro correspondente não for especificado. Os parâmetros têm 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 do widget opcional, se não for especificado, o padrão será o primeiro widget criado.

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>