Esta página foi traduzida pela API Cloud Translation.

reCAPTCHA v2

Esta página explica como exibir e personalizar o widget reCAPTCHA v2 na sua página da Web.

Para exibir o widget, você pode:

Renderizar automaticamente o widget ou
Renderizar explicitamente o widget

Veja Configurações para aprender como personalizar seu widget. Por exemplo, você pode especificar o idioma ou tema para o widget.

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

Renderizar automaticamente o widget reCAPTCHA

O método mais fácil para renderizar o widget reCAPTCHA na sua página é incluir o recurso JavaScript necessário e uma tag g-recaptcha. Tag g-recaptcha é um elemento DIVIDIR com nome de classe g-recaptcha e sua chave de site no Atributo data-sitekey:

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

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

Renderizar explicitamente o widget reCAPTCHA

É possível adiar a renderização especificando sua função de retorno de chamada onload e adicionando parâmetros ao recurso JavaScript.

Especifique sua função de retorno de chamada onload. Essa função será chamada quando todas as dependências foram carregadas.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
Insira o recurso JavaScript, configurando o parâmetro onload como o nome da sua função de retorno de chamada onload e o parâmetro render como explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
Quando seu retorno de chamada é executado, você pode chamar o método grecaptcha.render a partir da API JavaScript.
Sua função de retorno de chamada onload deve ser definida antes que a API do reCAPTCHA seja carregada. Para garantir que não haja condições de corrida:
- Encomende seus scripts com o retorno de chamada primeiro e, em seguida, reCAPTCHA
- Use 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-theme`	`theme`	`dark light`	`light`	Opcional. O tema de cores do widget.
`data-size`	`size`	`compact normal`	`normal`	Opcional. O tamanho do widget.
`data-tabindex`	`tabindex`		0	Opcional. O índice de tabulação do widget e 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.

JavaScript API

Método	Descrição
`grecaptcha.render`( container, parâmetros )	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.
`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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Renderização explícita para 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.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_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.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>