Jak ponownie załadować ReCaptcha za pomocą JavaScript?

177

Mam formularz rejestracji w AJAX, więc chcę odświeżyć obraz Recaptcha za każdym razem, gdy wystąpi błąd (tj. Nazwa użytkownika jest już używana).

Szukam kodu kompatybilnego z ReCaptcha, aby przeładować go za pomocą JavaScript.

javascript recaptcha AhmetB - Google
źródło
1
Nie kłopocz się. Po co zmieniać CAPTCHA, jeśli nazwa użytkownika jest zajęta?
SLaks
18
@SLaks : prawdopodobnie dlatego, że najpierw sprawdza captcha, a następnie sprawdza użytkownika - a po użyciu captcha traci ważność. Robiąc to na odwrót, złośliwy użytkownik może łatwo sfałszować serwer i uzyskać listę wszystkich użytkowników używających brutalnej siły, nie przejmując się captcha.
Tomasz Nurkiewicz
1
@TomaszNurkiewicz AKTUALIZACJA: złośliwy użytkownik nie będzie mógł przesłać tego samego re-captcha do walidacji więcej niż raz. Więc nie, brutalna siła nie jest tutaj możliwa. Powodem odświeżenia captcha jest po prostu umożliwienie użytkownikowi ponownego wprowadzenia go.
Tony Sepia,
Uważam, że wykwalifikowany napastnik mógłby wykorzystać ataki czasowe, aby znaleźć błędne dane w zależności od tego, gdzie znajduje się weryfikacja bota; Wolę zachować moją jako pierwszą kontrolę i natychmiast odrzucić wszystko, jeśli się nie uda, pomaga również zmniejszyć obciążenie mojego serwera, więc nie robię zapytań DB, gdy i tak zostaną odrzucone
Steve Byrne

Odpowiedzi:

370

W przypadku reCaptcha v2 użyj:

grecaptcha.reset();

Jeśli używasz reCaptcha v1 ( prawdopodobnie nie ):

Recaptcha.reload();

Nastąpi to, jeśli w pliku window.

(Zaktualizowano na podstawie komentarza @ SebiH poniżej.)

AhmetB - Google
źródło
20
Dla każdego, kto używa nowej reCAPTCHA: linia została teraz zmieniona na grecaptcha.reset();( dokumentacja )
SebiH
Używam tego grecaptcha.reset();do moich aplikacji do reagowania i działa idealnie
yussan
4
jeśli nie jesteś pewien, czy grecaptcha jest załadowana, użyjif (window.grecaptcha) grecaptcha.reset();
fred727
Chociaż powoduje to ponowne załadowanie captcha, wartość pola dla odpowiedzi captcha nie wydaje się być usunięta, pozostawiając mój formularz prawidłowy.
Damian Green,
58

Jeśli używasz wersji 1

Recaptcha.reload();

Jeśli używasz wersji 2

grecaptcha.reset();
Dasun
źródło
1
Skopiowałem zaakceptowaną odpowiedź i przesłałem ponownie 3 lata później. Urg.
PR Whitehead
@PRWhitehead Zobacz historię edycji. Przy okazji, dziękuję za głos negatywny.
Dasun
Zrobiłem, nie edytowałeś swojego i dodałeś go po raz pierwszy 3 miesiące po zaktualizowaniu zaakceptowanej odpowiedzi, aby odzwierciedlić zmianę w interfejsie API - wpływającą na trafność początkowej odpowiedzi i lata po jej dodaniu. Głosowałem w dół, ponieważ ta zaakceptowana odpowiedź jest bardziej przydatna.
PR Whitehead
2
Dodałem tę odpowiedź, ponieważ napotkałem ten sam problem. Chociaż zaakceptowana odpowiedź odzwierciedlała prawidłową odpowiedź w tamtym czasie, nie była wystarczająco jasna. Przynajmniej dla mnie, dlatego zdecydowałem się dodać jako nową odpowiedź z wyraźnym rozdziałem (zaakceptowana odpowiedź nie uwzględniła różnic w stosunku do wersji).
Dasun
8 
grecaptcha.reset(opt_widget_id)

Resetuje widżet reCAPTCHA. Można przekazać opcjonalny identyfikator widgetu, w przeciwnym razie funkcja resetuje pierwszy utworzony widget. (ze strony internetowej Google)

Kutalia
źródło
resetuje tylko pierwszą captcha na stronie
Maxwell sc
@ Maxwells.c Czy w ogóle przeczytałeś post? Opcjonalnie możesz przekazać identyfikator widżetu i usunąć n-ty widżet. Jeśli nie zdasz, pierwszy zostanie zresetowany.
Kutalia,
1
Jaki dokładnie jest identyfikator widżetu? Próbowałem przekazać identyfikator HTML recaptcha <div>, ale pojawił się błąd „nieprawidłowy identyfikator klienta recaptcha”. Myślę, że muszę jawnie wyrenderować widget, ponieważ myślę, że metoda render () zwraca identyfikator, którego potrzebuję.
Pete
6

Spróbuj tego 

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

Jeśli zadzwonisz do showRecaptcha, captchadiv zostanie wypełnione nową instancją recaptcha.

Tim
źródło
możesz zmienić swój kod i zadzwonić do showRecaptcha onload? Czy to ci pomaga?
Tim
6

Możesz też po prostu zasymulować kliknięcie przycisku odświeżania

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }
AlxVallejo
źródło
1
Z jakiegoś powodu Recaptchai grecaptchaoba są niezdefiniowane na mojej stronie. U mnie to zadziałało, z niewielką modyfikacją:if( $("#recaptcha_reload").length > 0 ){ ....
Nate-Bit Int,
Użyłem tego, aby wiedzieć, kiedy jest zakończona iteracja tablicy bez liczenia jej elementów.
m3nda
3

Dla użytkowników AngularJS:

$window.grecaptcha.reset();
Marcelo C.
źródło
1
W moim przypadku bez $ - window.grecaptcha.reset ();
Tony Sepia,
3

W przypadku nowej wersji reCaptcha v2 użyj:

grecaptcha.reset();
Cel korporacyjny
źródło
2

Jeśli używasz wersji 1.0 interfejsu API reCAPTCHA, zaktualizuj do wersji 2.0 (wersja 1.0 nie jest już obsługiwana)

Służy grecaptcha.reset();do resetowania captcha.

s sharif
źródło
0

jeśli używasz nowej recaptcha 2.0, użyj tego: dla kodu za:

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

dla prostego javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Sara Khan
źródło