Nová reCAPTCHA pro formuláře

Ahoj, díky za doplněk. Měl jsem problém od verze 2.0.1. ReCaptcha se mi nechtěla zobrazit. Vyřešil jsem to až podle dokumentace google. Dokud jsem tam nedal ten onload=onloadCallback, tak mi to psalo, že grecaptcha je neznámu funkce. Možná jsem ale něco dělal blbě já.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>

var onloadCallback = function() {
	$('.g-recaptcha').each(function () {
		var el = $(this);
		grecaptcha.render(el[0], {
			sitekey: el.attr('data-sitekey')
		});
	});
};

Tak nakonec byl problém v tom, že jsem zvyklý javascripty psát stylem

;(function (window, $) {

	function onReCaptchaLoad() {
		// ...
	}

})(window, window.jQuery);

tam, kde používám jQuery. To by ale vyžadovalo načtenost jQuery ještě před načtením reCAPTCHA api. To by ostatně nevadilo, proto jsem updatoval přiložený script, aby byl pokud možno co nejrobustnější.

Takže jsem zkoušel nasadit captchu, vše OK ale až na jedno. Captcha se sice zobrazí ale je úplně jedno zda se ověřím nebo ne – formulář se stejně odešle. Jinak to zkouším na nette 2.3.1 a formulář renderuji ručně (možná to bude ten problém).

uestla napsal(a):

Formulář se odešle a výsledek je jaký? Nezapomínáš navěšovat validační pravidlo? Nebo máš na mysli nevalidování se na straně javascriptu? To totiž není implementované.

Vše mám dle readme na gitu. Formulář vykresluji ručně a vše funguje tak jak má. Ale captch je tam prostě na ozdobu, je jedno zda se uživatel ověří nebo ne. Protože žádná hláška typu ‚dokaž že jsi člověk‘ nikde nevyskočí i přesto, že mám ošetřený výpis chyb formuláře.

Pomocí composeru jsem nainstaloval ale asi špatně:

Fatal Error

Class ‚ReCaptchaControl\ReCaptchaExtension‘ not found

Nějaká rada? Je možná instalace bez composer-u, přímo vložit do adresáře?

Prosím o radu :)

Editoval duff123 (28. 4. 2015 18:55)

Prosím jak to mám udělat, když mám projekt, který běží pod několika doménama a potřebuju mít více site key a secret key?

Ideálně bych potřeboval, aby ve třídě ReCaptcha byl setter pro $siteKey a $secretKey.

Potom bych totiž mohl při vytváření formuláře udělat:
$form["captcha"]->getReCaptcha()->setSiteKey("bbbb")->setSecretKey("aaaaaa");

Bylo by možné udělat takovou úpravu?

Nebo je jiná možnost, jak měnit site key a secret key podle situace?

Editoval H0w4rd (3. 2. 2016 16:45)

@H0w4ard Není lepší přidat ke klíčí ty další domény?

Tak to by potom nebyl problém udělat něco takového, ne?

services:
	- Config
reCaptcha:
    siteKey: @Config::getSiteKey()
    secretKey: @Config::getSecretKey()
    methodName: 'addReCaptcha' # optional

Editoval Antik (3. 2. 2016 22:51)

Do třídy, kde máš uložené ty klíče nebo vytvoříš novou, předáš databázi nebo jiné úložiště, uděláš gettery, zaregistruješ do konfigu a přes gettery předáš recaptche klíče.

Nejlepší by bylo zapsání do cache, protože předpokládám, že ty klíče se často měnit nebudou.

webdata napsal(a):

Takže jsem zkoušel nasadit captchu, vše OK ale až na jedno. Captcha se sice zobrazí ale je úplně jedno zda se ověřím nebo ne – formulář se stejně odešle. Jinak to zkouším na nette 2.3.1 a formulář renderuji ručně (možná to bude ten problém).

tohle jeste nikdo neopravil ??? dik

Václav Kraus napsal(a):

@randallll Já to používám na několika projektech a tento problém jsem ještě neměl. Takže nejspíš ano :)

nevim, z nejakeho duvodu se mi form odesle ikdyz captcha neni odfajfknuta

extensions:
    translation: Kdyby\Translation\DI\TranslationExtension
    reCaptcha: ReCaptchaControl\ReCaptchaExtension

translation:
    debugger: on
    default: en
    fallback: [en_En, en]
    whitelist: ['cs', 'en', 'pl', 'es', 'fr', 'ge', 'it', 'ru', 'sk', 'se']

reCaptcha:
    siteKey: ***
    secretKey: ***
    methodName: 'addReCaptcha'

<?php
  public function createComponentContactForm() {
        $form = new Form();
        //$form->getElementPrototype()->class('ajax');
        $form->addHidden('to_email')
                ->setAttribute('id', 'to_email');
        $form->addText('name', $this->translator->translate('default.contact.form_name'))
                ->setAttribute('placeholder', $this->translator->translate('default.contact.form_name'))
                ->setRequired($this->translator->translate('default.contact.form_message_required', NULL, array('label' => '%label')))
                ->addRule(Form::MAX_LENGTH, $this->translator->translate("default.contact.form_message_max_length", NULL, array('label' => '%label', 'value' => '%value')), 50);
        $form->addText('company', $this->translator->translate('default.contact.form_company'))
                ->setAttribute('placeholder', $this->translator->translate('default.contact.form_company'))
                ->addCondition(Form::FILLED)
                ->addRule(Form::MAX_LENGTH, $this->translator->translate("default.contact.form_message_max_length", NULL, array('label' => '%label', 'value' => '%value')), 50);
        $form->addText('email', $this->translator->translate('default.contact.form_your_email'))
                ->setAttribute('placeholder', $this->translator->translate('default.contact.form_your_email'))
                ->setRequired($this->translator->translate('default.contact.form_message_required', NULL, array('label' => '%label')))
                ->addRule(Form::EMAIL, $this->translator->translate("default.contact.form_message_email", NULL, array('label' => '%label')))
                ->addRule(Form::MAX_LENGTH, $this->translator->translate("default.contact.form_message_max_length", NULL, array('label' => '%label', 'value' => '%value')), 50);
        $form->addText('subject', $this->translator->translate('default.contact.form_subject'))
                ->setAttribute('placeholder', $this->translator->translate('default.contact.form_subject'))
                ->setRequired($this->translator->translate('default.contact.form_message_required', NULL, array('label' => '%label')))
                ->addRule(Form::MAX_LENGTH, $this->translator->translate("default.contact.form_message_max_length", NULL, array('label' => '%label', 'value' => '%value')), 50);
        $form->addTextArea('message', $this->translator->translate('default.contact.form_message'))
                ->setAttribute('cols', 5)
                ->setAttribute('rows', 6)
                ->setAttribute('placeholder', $this->translator->translate('default.contact.form_message'))
                ->setRequired($this->translator->translate('default.contact.form_message_required', NULL, array('label' => '%label')))
                ->addRule(Form::MAX_LENGTH, $this->translator->translate("default.contact.form_message_max_length", NULL, array('label' => '%label', 'value' => '%value')), 50);
        $form->addReCaptcha('captcha', $this->translator->translate('default.contact.form_verification'))
                ->addRule(\ReCaptchaControl\ReCaptchaControl::VALID, $this->translator->translate('default.contact.form_message_verification'));
        $form->addButton('cancel', $this->translator->translate('default.contact.form_cancel'))
                ->setAttribute('data-dismiss', 'modal')
                ->setAttribute('aria-label', 'Close')
                ->setAttribute('class', "btn btn-default");
        $form->addSubmit('send', $this->translator->translate('default.contact.form_submit'))
                ->setAttribute('class', "btn btn-primary");
        return $form;
    }
?>

<div class="modal fade" id="modalSendEmail" tabindex="-1" role="dialog" aria-labelledby="contactLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{_default.contact.modal_title}</h4>
            </div>
            <div class="modal-body">
                {snippet contactForm}
                    {control contactForm}
                {/snippet}
            </div>
        </div>
    </div>
</div>

Editoval randallll (23. 2. 2016 19:46)

@uestla ještě ti v tom příspěvku zůstal nadpis s v2 :-)

EDIT:
Stejně jako se psalo víše, mám v tuto chvíli reCaptchu pouze pro ozdobu. Neudělal jsem nic víc, než je implementace dle tvého githubu. Vykresluji formulář ručně, každopádně zkoušel jsem i {control contactForm} a taktéž bez úspěchu.

						{form contactForm}
<div class="form-group icon">
    <div class="control input">
									{input name}
        <i class="fa fa-user"></i>
    </div>
</div>
<div class="form-group icon">
    <div class="control input last">
									{input email}
        <i class="fa fa-envelope"></i>
    </div>
</div>
<div class="form-group icon">
    <div class="control input textarea">
									{input message}
        <i class="fa fa-comment"></i>
    </div>
</div>
							<div class="form-group">
								{input captcha}
							</div>
<div class="form-group">
								{input submit class => 'btn btn-xlg btn-primary'}
</div>
						{/form}

PS: Formulář zpracovávám kompletně v onSubmit, je to takto správně?

Editoval GEpic (3. 7. 2016 3:26)

@GEpic Čas jsem si nakonec našel :-)

verze 4.0.0

• upraveno pro Nette 2.4
• přidán bower.json
• přidán jednoduchý test tests/basic.php (spouštějte v prohlížeči)

@GEpic Nejspíš nemáš verzi 4 – v ní už se setRequired() volá. Zkus si spustit tests/basic.php v prohlížeči, jestli ti bude fungovat…

Dobrý den,

pokouším se již nějaký pátek rozchodit recaptchu, ale bohužel bez úspěchu. ReCaptcha se mi vykresluje, ale bohužel nelze formulář odeslat. Do JS console se vypisuje: „Error: ReCAPTCHA placeholder element must be empty“. API key mám zaregistrované u Google. Domény také přidané.

Neone config:

extensions:
    reCaptcha: ReCaptchaControl\ReCaptchaExtension

reCaptcha:
    siteKey: '*můjKey*'
    secretKey: '*můjKey*'
    methodName: 'addReCaptcha' # optional

Továrničku mám takto:

	public function create()
	{
		$form = new Form;
		$form->addText('nickname', 'Jméno:')
			->setRequired('Prosím, zadejte vaše jméno.');

		$form->addText('headline', 'Nadpis::')
			->setRequired('Prosím, zadejte nadpis.');

	    $form->addText('email', 'E-mail:')
			->setRequired('Prosím zadejte váš email.');

		$form->addTextArea('text')
			->setRequired('Napoložili jste žádný dotaz.');

		$form->addReCaptcha('recaptcha', NULL, "Please prove you're not a robot.")
			->setRequired('Napoložili jste žádný dotaz.');

		$form->addSubmit('send', 'Odeslat');

		$form->onSuccess[] = array($this, 'formSucceeded');
		return $form;
	}


	public function formSucceeded($form)
	{
		...
	}

Poté v šabloně takto:

{form commentForm}
...
<div n:name="recaptcha"></div>
...
{/form}

Zkoušel jsem i takto:

{form commentForm}
...
{input recaptcha}
...
{/form}

prosím o pomoc, už si nevím rady. Děkuju…

Editoval dubblen (19. 8. 2016 6:58)

GEpic napsal(a):

Zkus změnit toto:

$form->addReCaptcha('recaptcha', NULL, "Please prove you're not a robot.")
    ->setRequired('Napoložili jste žádný dotaz.');

Na:

$form->addReCaptcha('recaptcha', NULL, "Please prove you're not a robot.");

Děkuju za radu, bohužel ale nepomohlo.

Jediné co to udělá je to, že se stránka reloadne, ale obsah metody „formSucceeded“ se neprovede.

Editoval dubblen (19. 8. 2016 16:43)

@dubblen Zkusil jsem vykreslit recaptchu pomocí n:name a vše funguje. Hlásí to chybu v konzoli i po @GEpic ově úpravě?

Používáš form nějak „nestandardně“ (vykresluješ vícekrát na jedné stránce, AJAX, …)?

dubblen napsal(a):

uestla napsal(a):

@dubblen Zkusil jsem vykreslit recaptchu pomocí n:name a vše funguje. Hlásí to chybu v konzoli i po @GEpic ově úpravě?

Používáš form nějak „nestandardně“ (vykresluješ vícekrát na jedné stránce, AJAX, …)?

Vykresluju už pomocí {input recaptcha}, ale pořád žádná změna. Chybu v JS consoli jsem již vyřešil. V templatě jsem importoval recaptcha.js 2× (zbytky z některého z pokusů v minulosti). Každopádně na celkové (ne)funkčnosti to nic nezměnilo. Když v továrničce odmažu řádek s addReCpatcha, tak vše funguje. Ale bez ReCaptchy…

No já měl taky problém ten, že jsem musel importovat skript v hlavičce <head>, namísto v patičce stránek, jako je to s ostatními JS.

dubblen napsal(a):

Tohle je tracy dump requestu z presenteru. Pro jistotu recaptcha.js načítám taky už v <head>. Stále bez úspěchu. Po kliknutí na „Odeslat“ se stránka pouze refreshne, ale nic se neprovede.

Nette\Http\Request #9071
method private => "POST" (4)
url private => Nette\Http\UrlScript #0813
post private => array (6)
nickname => "Jméno " (7)
email => "info@mail.com" (13)
headline => "Nadpis " (7)
text => "asdasdasd" (9)
send => "Odeslat" (7)
"g-recaptcha-response" => "03AHJ_VusdsQQeBGb8Kq5XjjnHrrzV2YH_Dvqfscu-iPpI0rIWC1OoQibqLMnXFKz20renoZEzUb87AU55362WdOuIfx5IWrhbkhx1sLT6B2mxGIC2N73fodxmg18yukzzuLfsKInw6Q-UmIybB1Eh ... " (1230)
files private => array ()
cookies private => array (2)
PHPSESSID => "6ia94ea9e4bdfe8s6iqkrfp336" (26)
"nette-browser" => "kvxnrnrkoz" (10)
headers private => array (12)
remoteAddress private => "::1" (3)
remoteHost private => NULL
rawBodyCallback private => Closure #0725
file => "/vendor/nette/http/src/Http/RequestFactory.php" (81)
line => 273
variables => array ()
parameters => ""

No a když přidáš k formuláři událost onError a zkusíš dumpnout $form->getErrors()?

PS: Taky se mrkni jestli máš poslední verzi reCaptchy.

Editoval GEpic (21. 8. 2016 20:14)

Chyby formuláře tedy v šabloně nevypisuješ. Máš správně nastavený siteKey a secretKey? Máš povolenou doménu, na které reCAPTCHu používáš (localhost by měl jít automaticky)?

Pak už mě napadá leda postupně dumpovat jednotlivé větve v ReCaptcha::validate(), jestli třeba cURL nevrací nějakou chybu…

Budu ti vděčný, když něco najdeš, kdybys to nahlásil – mohl bych pak zkusit přidat nějakou lepší chybo ou zprávu…