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

29

Ważne: wersja 1.0 interfejsu API reCAPTCHA nie jest już obsługiwana, uaktualnij do wersji 2.0.

Możesz użyć grecaptcha.reset (); aby zresetować captcha.

Źródło: https://developers.google.com/recaptcha/docs/verify#api-request

— abhiagNitk
źródło

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