Como recarregar o ReCaptcha usando JavaScript?

177

Eu tenho um formulário de inscrição no AJAX para poder atualizar a imagem do Recaptcha sempre que ocorrer um erro (por exemplo, nome de usuário já em uso).

Estou procurando um código compatível com o ReCaptcha para recarregá-lo usando JavaScript.

javascript recaptcha AhmetB - Google
fonte
1
Não se incomode. Por que alterar o CAPTCHA se o nome de usuário é usado?
SLaks
18
@ Slaks : provavelmente porque ele primeiro verifica o captcha e depois o usuário - e uma vez que o captcha é usado, ele não é mais válido. Fazer isso da maneira inversa ao usuário mal-intencionado pode danificar facilmente o servidor e obter a lista de todos os usuários usando força bruta sem se incomodar com o captcha.
Tomasz Nurkiewicz 11/11
1
@TomaszNurkiewicz UPDATE: o usuário mal-intencionado não poderá enviar o mesmo re-captcha para validação mais de uma vez. Portanto, não, força bruta não é possível aqui. O motivo para atualizar o captcha é simplesmente permitir que o usuário o insira novamente.
Tony Sepia
Acredito que um invasor habilidoso possa explorar ataques de tempo para descobrir quais dados estão errados, dependendo de onde está a validação do bot; Eu prefiro manter o meu como o primeiro cheque e imediatamente rejeitar qualquer coisa se eles falharem, também ajuda a reduzir a carga no meu servidor para que eu não estou fazendo consultas DB quando será rejeitada qualquer maneira
Steve Byrne

Respostas:

370

Para o reCaptcha v2, use:

grecaptcha.reset();

Se você estiver usando o reCaptcha v1 ( provavelmente não ):

Recaptcha.reload();

Isso será feito se já houver um Recaptcha carregado no window.

(Atualizado com base no comentário de @ SebiH abaixo.)

AhmetB - Google
fonte
20
Para qualquer um usando o novo reCAPTCHA: A linha agora mudou para grecaptcha.reset();( documenation )
SebiH
Estou usando este grecaptcha.reset();para o meu reagir apps, e ele funciona perfeitamente
yussan
4
Se você não tem certeza grecaptcha é carregado, o usoif (window.grecaptcha) grecaptcha.reset();
fred727
Embora isso recarregue o captcha, o valor do campo para a resposta captcha não parece ser removido, deixando meu formulário válido.
Damian Green
58

Se você estiver usando a versão 1

Recaptcha.reload();

Se você estiver usando a versão 2

grecaptcha.reset();
Dasun
fonte
1
Copiou a resposta aceita e republicada 3 anos depois. Urg.
PR Whitehead
@PRWhitehead Consulte o histórico de edições. Entre, obrigado pelo voto negativo.
Dasun 28/02
Sim, você não editou a sua e a adicionou primeiro três meses após a resposta aceita ter sido atualizada para refletir uma alteração na API - afetando a relevância da resposta inicial e anos após a adição. Eu diminuí a votação porque essa resposta aceita é mais útil.
PR Whitehead
2
Eu adicionei esta resposta porque enfrentei o mesmo problema. Embora a resposta aceita refletisse a resposta correta na época, não era clara o suficiente. Pelo menos para mim, foi por isso que decidi adicionar como uma nova resposta com uma separação clara (a resposta aceita falhou em observar as diferenças em relação às versões).
Dasun
8 
grecaptcha.reset(opt_widget_id)

Redefine o widget reCAPTCHA. Um ID de widget opcional pode ser passado, caso contrário, a função redefine o primeiro widget criado. (da página da web do Google)

Kutalia
fonte
ele só repor o primeiro captcha na página
Maxwell sc
@ Maxwells.c Você já leu o post? Opcionalmente, você pode passar um ID de widget e excluir o enésimo widget. Se você não passar, o primeiro será redefinido.
Kutalia
1
Qual é exatamente o ID do widget? Tentei passar a identificação html do recaptcha <div>, mas recebi o erro "identificação de cliente recaptcha inválida". Estou pensando que preciso renderizar o widget explicitamente porque acho que o método render () retorna o ID de que preciso.
Pete
6

Tente isto 

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

Se você chamar showRecaptcha, o captchadiv será preenchido com uma nova instância de recaptcha.

Tim
fonte
você pode alterar seu código e chamar showRecaptcha onload? Isso está ajudando você?
Tim
6

Ou você pode simular um clique no botão Atualizar

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }
AlxVallejo
fonte
1
Por alguma razão, Recaptchae grecaptchaambos estão indefinidos na minha página. Isso funcionou para mim, com uma ligeira modificação:if( $("#recaptcha_reload").length > 0 ){ ....
Nate-Bit Int
Eu usei isso para saber quando é concluída a iteração de uma matriz sem contar seus elementos.
M3nda
3

Para usuários do AngularJS:

$window.grecaptcha.reset();
Marcelo C.
fonte
1
No meu caso sem $ - window.grecaptcha.reset ();
Tony Sepia
3

Para nova versão do reCaptcha v2, use:

grecaptcha.reset();
Finalidade corporativa
fonte
2

Se você estiver usando a versão 1.0 da API reCAPTCHA, atualize para a versão 2.0 (a versão 1.0 não é mais suportada)

Use grecaptcha.reset();para redefinir o captcha.

s sharif
fonte
0

se você estiver usando o novo recaptcha 2.0, use isto: para o código por trás:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

para javascript simples

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Sara Khan
fonte