Modul-Vorstellung: Recaptcha

m4r73n · January 19, 2016, 10:38am

Ich würde gerne ein neues Modul vorstellen. Wir haben Googles Recaptcha für OXID implementiert.

Das neue Recaptcha erlaubt es dem Benutzer in den allermeisten Fällen, durch das einfache Anklicken einer Checkbox zu bestätigen, dass er ein Mensch und kein Spambot ist. Das ist auf jeden Fall um einiges benutzerfreundlicher als das Entziffern eines schwer zu lesenden Schriftzugs.

Eine Demo findet ihr in unserem Demo-Shop, zum Beispiel im Kontaktformular.

Das Modul wurde unter der GPL veröffentlicht und ist hier auf Github verfügbar: https://github.com/marten-seemann/OXID_recaptcha
Bug-Reports, Verbesserungsvorschläge und am besten natürlich Pull-Requests sind ausdrücklich erwünscht.

andoreen · January 27, 2016, 1:57am

Hallo m4r73n,

ich habe einige Tage damit verbracht das Modul zum Laufen zu bringen. Es scheitert jedoch beim Azure Original und beim RoxIVE Theme. Kannst Du mir für das RoxIVE den Einbau in die Templates erklären.

Das ist die Fehlermeldung, die ich nur bei Aktivierung des Moduls und Abschicken des Formulars ohne Änderung erhalte:

require(): Failed opening required ‘…/shop/modules/recaptcha/core/…/vendor/autoload.php’ (include_path=‘.:/usr/share/php5.6’) in …shop/modules/recaptcha/core/oxcaptcha_ext.php on line 11

Das Verzeichnis “vendor” und die Datei “autoload,php” gibt es nicht.

Danke Dir!

m4r73n · January 27, 2016, 4:55am

Hast du das Release unter https://github.com/marten-seemann/OXID_recaptcha/releases heruntergeladen? Da sollte der [I]vendor[/I]-Ordner eigentlich dabei sein.

Ich denke mal, der Einbau in ein Roxive sollte genauso funktionieren wie beim Azure, die Anleitung findest du hier.

andoreen · January 27, 2016, 8:12am

Hm, im Sourcecode war der Ordner drin. Aber sowohl im Azure, wie auch im RoxIVE bekomme ich ne Fehlermeldung:

Smarty error: [in form/contact.tpl line 56]: syntax error: unrecognized tag ‘block’ (Smarty_Compiler.class.php, line 590) in …peugeot-metropolis.de/shop/core/smarty/Smarty.class.php on line 1094

Das ist die contact.tpl nach der Änderung:

        <li class="verify">
<label class="req">[{block name="captcha_label"}][{ oxmultilang ident="VERIFICATION_CODE" suffix="COLON" }][{/label}]</label>            [{assign var="oCaptcha" value=$oView->getCaptcha() }]
            [{block name="captcha_body"}]
    [{assign var="oCaptcha" value=$oView->getCaptcha() }]
    [{if $oCaptcha->isImageVisible()}]
        <img src="[{$oCaptcha->getImageUrl()}]" alt="">
    [{else}]
        <span class="verificationCode" id="verifyTextCode">[{$oCaptcha->getText()}]</span>
    [{/if}]
    <input type="text" data-fieldsize="verify" name="c_mac" value="" class="js-oxValidate js-oxValidate_notEmpty">
    <p class="oxValidateError">
        <span class="js-oxError_notEmpty">[{ oxmultilang ident="ERROR_MESSAGE_INPUT_NOTALLFIELDS" }]</span>
    </p>
[{/block}]
        </li>

m4r73n · January 27, 2016, 9:07am

Sieht so aus, als würde da der schließende Tag für den [I]captcha_label[/I]-Block fehlen, oder?

andoreen · January 27, 2016, 9:09am

Da fragst Du mich was. Ick bin Anwender.

andoreen · February 4, 2016, 12:20pm

Gibt es schon eine Lösung?

Edit: Der kleine Fehler liegt in der Anleitung. Statt

<label class=“req”>[{block name=“captcha_label”}][{ oxmultilang ident=“VERIFICATION_CODE” suffix=“COLON” }][{/label}]</label>

muß es so

<label class=“req”>[{block name=“captcha_label”}][{ oxmultilang ident=“VERIFICATION_CODE” suffix=“COLON” }][{/lblock}]</label>

aussehen. Trotzdem vielen Dank für das tolle Modul.

Jetzt suche ich nur noch nach einer Lösung den Block direkt unterhalb des Eingabefelds zu setzen. Im Moment rückt er raus.

EDIT: So schaut die Lösung jetzt für das RoxIVE Theme bei mir aus.

<div class=“form-group verify”>
<label class=“req col-lg-2”>[{block name=“captcha_label”}][{ oxmultilang ident=“VERIFICATION_CODE” suffix=“COLON” }][{/block}]</label> <div class=“col-lg-10 controls”>
<div class=“col-lg-10 controls”>
[{block name=“captcha_body”}]
[{assign var=“oCaptcha” value=$oView->getCaptcha()}]
<div class=“input-group”>
[{if $oCaptcha->isImageVisible()}]
<span class=“input-group-addon”>
<img src=“[{$oCaptcha->getImageUrl()}]” alt=“”>
</span>
[{else}]
<span class=“input-group-addon verificationCode” id=“verifyTextCode”>[{$oCaptcha->getText()}]</span>
[{/if}]
<input type=“text” name=“c_mac” value=“” class=“form-control” required=“required”>
[{/block}]
</div>
</div>
</div>

Damit kann ich gut leben. Ist das alles so korrekt?

m4r73n · February 4, 2016, 4:12pm

Mist, der Fehler lag tatsächlich in der Anleitung. Ich habe es korrigiert und die aktuelle Version auf Github gepusht. Danke für’s Fehler finden!

Bzgl. des Templates, hast du da mal einen Link für mich, dass ich mir das ganze ansehen kann?

andoreen · February 4, 2016, 4:17pm

Jupp, hier findest Du es.

m4r73n · February 4, 2016, 5:23pm

Da ist zweimal ein [I]div[/I] mit der class [I]col-lg-10 controls[/I]. Das darf aber nur einmal definiert werden.

andoreen · February 4, 2016, 5:27pm

Stimmt, da war der Monitor zu klein.[emoji3] Jetzt passt es.

So schauts jetzt aus:

<div class=“form-group verify”>
<label class=“req col-lg-2”>[{block name=“captcha_label”}][{ oxmultilang ident=“VERIFICATION_CODE” suffix=“COLON” }][{/block}]</label>
<div class=“col-lg-10 controls”>
[{block name=“captcha_body”}]
[{assign var=“oCaptcha” value=$oView->getCaptcha()}]
<div class=“input-group”>
[{if $oCaptcha->isImageVisible()}]
<span class=“input-group-addon”>
<img src=“[{$oCaptcha->getImageUrl()}]” alt=“”>
</span>
[{else}]
<span class=“input-group-addon verificationCode” id=“verifyTextCode”>[{$oCaptcha->getText()}]</span>
[{/if}]
<input type=“text” name=“c_mac” value=“” class=“form-control” required=“required”>
[{/block}]
</div>
</div>

Hupi · June 3, 2016, 11:01am

Hallo,

vielen Dank für das tolle Modul! Wir haben es gerade hier eingebaut:

https://www.shopcockpit.com/de/kontakt/

Allerdings kam keine gültige Verifizierung zustande, die Methode pass() brachte die Fehlermeldung “invalid json response”. Das passiert wohl, wenn auf dem Server “allow_url_fopen” auf 0 steht. In diesem Fall hat eine kleiner Änderung an Eurem Modul Abhilfe geschaffen:

Zeile 15 in der oxcaptcha_ext in:

    $recaptcha = new \ReCaptcha\ReCaptcha($secret, new \ReCaptcha\RequestMethod\CurlPost());

Gefunden hab ich die Lösung hier:

Viele Grüße

Alex

Dor99 · October 3, 2016, 3:41pm

Hallo,

das Modul habe ich von der entsprechenden Quelle runtergeladen und das Zip entpackt. Allerdings ist dort kein “copy this”-Ordner enthalten, wie in der Readme beschrieben.
wie habe ich genau vorzugehen?
Kannst du mir helfen, m4r73n?

Liebe Grüße
D.

m4r73n · October 6, 2016, 12:15pm

Einfach alle Dateien in den Ordner [I]modules/recaptcha[/I] packen.

laticauda88 · January 16, 2017, 11:00am

Hallo m4r73n,

erst einmal vielen Dank für das Modul. Tolle Arbeit und passt hevorragend zu meinem neuen Kontaktformular.

Auch ich habe mir das Modul heruntergeladen und vermisse ebenfalls den Ordner und die Datei autoload.php.

Habe auf dieser Seite: https://github.com/marten-seemann/OX...ptcha/releases das letzte Update geladen.

Wo finde ich die entsprechenden Dateien?

Danke,
Andreas

biebie_Jul · January 18, 2017, 10:46am

Hallo m4r73n,

vielen Dank für das Modul. Wir könnten das auch wirklich gut gebrauchen.

Ich hätte nur noch die Frage, ob das Modul für ältere Oxid PE-Versionen kompatibel ist?
Genauer gesagt geht es um die PE 4.6…
Gibt es da irgendwelche Einschränkungen?

Vielen Dank schon mal und viele Grüße,
Julia

marco.steinhaeuser · January 20, 2017, 5:48pm

Hallo Julia,

einfach in der Entwicklungsumgebung ausprobieren und dann hier Bescheid geben

Gruß