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:

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 o nome de classe "g-recaptcha", a chave do site no atributo data-sitekey e o nome de um callback JavaScript para processar a conclusão do captcha no atributo data-callback.


  
    reCAPTCHA demo: Simple page
     
     
  
  
    

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

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

É 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.

Invoque o desafio programaticamente.

É 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.

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

  2. Chame grecaptcha.execute em um método JavaScript.

    grecaptcha.execute();
    

    Quando o callback for executado, chame o método grecaptcha.render da API JavaScript.

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.
selo de dados selo inferior direito inferior esquerdo em linha 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 programaticamente.
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.
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, a instância 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.
herança
Usar 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


  
    reCAPTCHA demo: Explicit render after an onload callback
    
  
  
    

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


  
  
  
  
  
    
Name: (required)