Mam 2 formularze na jednej stronie. Jedna z form ma cały czas wyświetlaną recaptcha. Drugi powinien wyświetlać recaptcha dopiero po pewnym zdarzeniu, takim jak maksymalna liczba prób logowania. Są więc chwile, kiedy potrzebowałbym 2 recaptcha, aby pojawiły się na tej samej stronie. czy to możliwe? Wiem, że prawdopodobnie mógłbym użyć jednego do obu, ale ze względu na układ, wolałbym mieć dwa. Dzięki.
Aktualizacja: cóż, myślę, że to może nie być możliwe. Czy ktoś może polecić inną bibliotekę przechwytywania do użytku równolegle z reCaptcha? Naprawdę chcę mieć 2 captcha na tej samej stronie.
Aktualizacja 2: co by było, gdyby każdy formularz był umieszczony w ramce iframe? Czy byłoby to akceptowalne rozwiązanie?
Hüseyin Yağlı
odpowiedzi . Większość przeglądarek powinna obsługiwać JavaScript, a domyślna reCAPTCHA i tak używa JavaScript. Nie wiem jednak, co należałoby zrobić, aby rozwiązać problem bez obsługi JavaScript.Odpowiedzi:
Podobne pytanie zostało zadane na stronie ASP ( link ), a konsensus był taki, że nie można tego zrobić z recaptcha. Wygląda na to, że wiele formularzy na jednej stronie musi udostępniać captcha, chyba że chcesz użyć innej captcha. Jeśli nie jesteś zamknięty w recaptcha, dobrą biblioteką do obejrzenia jest komponent Zend Frameworks Zend_Captcha ( link ). Zawiera kilka
źródło
Hüseyin Yağlı
odpowiedź wyjaśnia rozwiązanie. Dokumentacja reCAPTCHA dla tego rozwiązania jest dostępna pod adresem developers.google.com/recaptcha/docs/display#explicit_render . Nie wiem jednak, co należałoby zrobić, aby rozwiązać problem bez obsługi JavaScript.Dzięki aktualnej wersji Recaptcha ( wersja 2.0 reCAPTCHA API ) możesz mieć wiele recaptchas na jednej stronie.
Nie ma potrzeby klonowania recaptcha ani próby obejścia problemu. Musisz tylko umieścić wiele elementów div dla recaptch i wyraźnie wyrenderować w nich recaptcha.
Jest to łatwe dzięki Google Recaptcha API:
https://developers.google.com/recaptcha/docs/display#explicit_render
Oto przykładowy kod html:
W swoim kodzie javascript musisz zdefiniować funkcję zwrotną dla recaptcha:
Następnie adres URL skryptu recaptcha powinien wyglądać następująco:
Lub zamiast nadawać identyfikatory swoim polom recaptcha, możesz podać nazwę klasy i zapętlić te elementy za pomocą selektora klasy i wywołać .render ()
źródło
grecaptcha.getResponse(0)
igrecaptcha.getResponse(1)
zweryfikować wiele instancji, dodałbym, że indeksowanie musi odpowiadaćgrecaptcha.render
kolejności. W tym przykładziegrecaptcha.render('RecaptchaField1'...
zostanie zweryfikowana za pomocągrecaptcha.getResponse(0)
igrecaptcha.render('RecaptchaField2'...
zostanie zweryfikowana za pomocągrecaptcha.getResponse(1)
itp.Proste i zrozumiałe:
1) Utwórz swoje pola recaptcha normalnie za pomocą tego:
2) Załaduj skrypt za pomocą tego:
3) Teraz wywołaj to, aby iterować po polach i utworzyć recaptcha:
źródło
data-sitekey="YOUR_KEY_HERE"
jest bezużyteczny i można go usunąć z div (jeśli potrzebujesz zmienić klucz, mniej miejsc do edycji)grecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Można to łatwo osiągnąć za pomocą jQuery
clone()
funkcji .Musisz więc utworzyć dwa opakowujące elementy div dla recaptcha. Recaptcha div mojego pierwszego formularza:
Element div drugiego formularza jest pusty (inny identyfikator). Więc moje jest po prostu:
Wtedy javascript jest dość prosty:
Prawdopodobnie nie potrzebujesz drugiego parametru z
true
wartością wclone()
, ale nie zaszkodzi mieć go ... Jedyny problem z tą metodą polega na tym, że przesyłasz formularz przez ajax, problem polega na tym, że masz dwa elementy, które mają ta sama nazwa i musisz być trochę sprytniejszy, jeśli chodzi o sposób przechwytywania poprawnych wartości elementu (dwa identyfikatory elementów reCaptcha to#recaptcha_response_field
i #recaptcha_challenge_field na wypadek, gdyby ktoś ich potrzebował)źródło
Wiem, że to stare pytanie, ale na wypadek, gdyby ktoś w przyszłości go szukał. Możliwe jest umieszczenie dwóch captcha na jednej stronie. Różowa dokumentacja jest tutaj: https://developers.google.com/recaptcha/docs/display Przykład poniżej to tylko kopia dokumentu formularza i nie musisz określać różnych układów.
źródło
Ta odpowiedź jest rozszerzeniem @raphadko odpowiedź „s .
Jeśli chcesz ręcznie wyodrębnić kod captcha (jak w żądaniach ajax), musisz zadzwonić:
Ale jak pobrać parametr identyfikatora widżetu?
Używam tej definicji CaptchaCallback do przechowywania identyfikatora widżetu każdego pola g-recaptcha (jako atrybutu danych HTML):
Wtedy mogę zadzwonić:
wyodrębnić kod.
źródło
#your_recaptcha_box_id
?Mam formularz kontaktowy w stopce, który zawsze się wyświetla, a także niektóre strony, takie jak Utwórz konto, również mogą mieć captcha, więc jest dynamiczny i używam następnego sposobu z jQuery:
html:
javascript
źródło
To jest wolna od JQuery wersja odpowiedzi udzielonej przez raphadko i rzeczownik .
1) Utwórz swoje pola recaptcha normalnie za pomocą tego:
2) Załaduj skrypt za pomocą tego:
3) Teraz wywołaj to, aby iterować po polach i utworzyć recaptcha:
źródło
Patrząc na kod źródłowy strony wziąłem część reCaptcha i trochę zmieniłem kod. Oto kod:
HTML:
jQuery:
Używam tutaj prostej funkcjonalności karty javascript. Więc nie zawiera tego kodu.
Gdy użytkownik kliknie „Poproś o informacje”,
(#product_tabs_what)
JS sprawdzi, czyrecapExist
jestfalse
lub ma jakąś wartość. Jeśli ma wartość, spowoduje to wywołanieRecaptcha.destroy();
zniszczenia starej załadowanej reCaptchy i odtworzenie jej dla tej karty. W przeciwnym razie utworzy to po prostu reCaptcha i umieści w#more_info_recaptcha_box
div. To samo co w przypadku#product_tabs_wha
zakładki „Złóż ofertę” .źródło
źródło
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
tam, gdzie potrzebujesz, w formularzach /Dobrą opcją jest generowanie danych wejściowych recaptcha dla każdego formularza w locie (zrobiłem to z dwoma, ale prawdopodobnie możesz zrobić trzy lub więcej formularzy). Używam jQuery, walidacji jQuery i wtyczki formularza jQuery do wysyłania formularza przez AJAX, wraz z Recaptcha AJAX API -
https://developers.google.com/recaptcha/docs/display#recaptcha_methods
Gdy użytkownik przesyła jeden z formularzy:
Następnie mogą wypełnić recaptcha i ponownie przesłać formularz. Jeśli zamiast tego zdecydują się przesłać inny formularz, cóż, twój kod sprawdza istniejące recaptcha, więc będziesz mieć tylko jedną recaptcha na stronie naraz.
źródło
Aby dodać trochę do raphadko odpowiedzią jest : skoro masz wiele captchas (z jednej strony), nie można używać (uniwersalne)
g-recaptcha-response
parametr POST (ponieważ posiada tylko jeden CAPTCHA za odpowiedź). Zamiast tego powinieneś użyćgrecaptcha.getResponse(opt_widget_id)
wywołania dla każdego captcha. Oto mój kod (pod warunkiem, że każdy captcha znajduje się w swoim formularzu):HTML:
i
JavaScript:
Zauważ, że stosuję delegację zdarzenia (zobacz odśwież DOM po dodaniu elementu ) do wszystkich dynamicznie modyfikowanych elementów. To wiąże odpowiedź każdej indywidualnej capthy z jej formą
submit
.źródło
Oto rozwiązanie, które opiera się na wielu doskonałych odpowiedziach. Ta opcja jest wolna od jQuery i dynamiczna, nie wymagając od ciebie konkretnego kierowania elementów według id.
1) Dodaj swój znacznik reCAPTCHA w normalny sposób:
2) Dodaj do dokumentu następujące elementy. Będzie działać w każdej przeglądarce obsługującej API querySelectorAll
źródło
grecaptcha.getResponse()
Sposób przyjmuje opcjonalny „WIDGET_ID” parametrów i wartości domyślne w pierwszy widget utworzonego Jeżeli nie określono. Dlagrecaptcha.render()
każdego utworzonego widgetu zwracany jest identyfikator widgetu, który nie jest powiązany z atrybutemid
kontenera reCAPTCHA !!Każda reCAPTCHA ma własne dane odpowiedzi. Musisz podać identyfikator div reCAPTCHA i przekazać go do
getResponse
metody:na przykład
Odpowiedź dostępu:
lub
źródło
Jest to możliwe, po prostu nadpisz wywołania zwrotne Recaptcha Ajax. Działający jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/
Nie potrzebujesz nawet proxy div, ponieważ po nadpisaniu kod DOM nie zostanie wykonany. Wywołaj Recaptcha.reload () za każdym razem, gdy chcesz ponownie wywołać wywołania zwrotne.
źródło
Oto fajny przewodnik, jak to zrobić:
http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html
Zasadniczo dodajesz kilka parametrów do wywołania API i ręcznie renderujesz każdą recaptcha:
PS: Metoda „grecaptcha.render” otrzymuje identyfikator
źródło
Użyłbym niewidzialnej recaptcha. Następnie na swoim przycisku użyj tagu, takiego jak „formname = 'yourformname'”, aby określić, który formularz ma zostać przesłany i ukryć dane wejściowe formularza przesyłania.
Zaletą tego jest to, że pozwala zachować nienaruszoną walidację formularza html5, jedną recaptcha, ale wiele interfejsów przycisków. Po prostu przechwyć wartość wejściową „captcha” dla klucza tokena wygenerowanego przez recaptcha.
Uważam to za DUŻO prostsze i łatwiejsze w zarządzaniu.
źródło