Gelöst Google reCaptcha aus dem Evo-Template entfernen

[FPrüfer]

Da sich das Thema aktuell wachsender Beliebtheit erfreut, habe ich hier eine "kleine" Anleitung zusammengestellt, wie man im JTL- Shop das Google reCaptcha aus dem Evo-Template entfernt und stattdessen eine der integrierten Captcha-Methoden verwendet.
Ein wenig Handarbeit ist allerdings notwendig. Diese beschränckt sich jedoch auf Änderungen die über ein Child-Template abgebildet werden können. Änderungen am Shop-Core sind nicht notwendig.
Die Anleitung ist keine Copy & Paste - Vorlage, sondern soll als Anleitung und Hinweisgeber für die eigene Anpassung dienen!
Ich gehe davon aus, dass bereits ein Child Template des Evo vorhanden ist und ein aktueller JTL-Shop 4.06 verwendet wird (das Vorgehen gilt jedoch auch für JTL-Shop 4.05, jedoch sind dort ggfs. die angegebenen Zeilennummern abweichend). Wie ein Child-Template angelegt wird, wird hier nicht weiter erläutert. Es sind auch grundlegende Kenntnisse in HTML und PHP notwendig und man sollte wissen was man tut.

Step 1 - Funktion für den alternativen Captcha-Code bereitstellen
Im Child-Template wird dazu ein Verzeichnis php mit einer Datei functions.php und dem folgenden Inhalt angelegt:

<?php
/**
 * @global JTLSmarty $smarty
 */

include realpath(__DIR__ . '/../../Evo/php/functions.php');

$smarty->registerPlugin('function', 'getOldCaptchaCode', 'getOldCaptchaCode');

/**
 * @param array     $params
 * @param JTLSmarty $smarty
 * @return stdClass
 */
function getOldCaptchaCode($params, &$smarty)
{
    $result = generiereCaptchaCode($params['code']);

    if (isset($params['assign'])) {
        $smarty->assign($params['assign'], $result);
    }

    return $result;
}

Step2 - Eine Template-Datei für das alternative Captcha anlegen
Im Child Template wird dazu das Verzeichnis snippets (wenn noch nicht vorhanden) angelegt und darin eine Datei alternative_captcha.tpl mit folgendem Inhalt abgelegt:

{getOldCaptchaCode code=3 assign="captchaCode"}
<input type="hidden" name="md5" value="{$captchaCode->codemd5}" id="captcha_md5">
<div class="captcha">
    <img src="{$captchaCode->codeURL}" alt="code" id="captcha" />
</div>
<div class="form-group float-label-control required{if !empty($captchaError)} has-error{/if}">
    <input class="form-control" type="text" name="captcha" tabindex="30" id="captcha_text" placeholder="{lang key="enterCaptcha" section="global"}" />
</div>
{if !empty($captchaError)}
    <div class="form-error-msg text-danger"><i class="fa fa-warning"></i> {lang key="invalidToken" section="global"}</div>
{/if}

Step3 - Alle Templates mit Nutzung des reCaptcha anpassen
Die reCaptcha - Implementation in den Templates ist leider nicht in Smarty-Blöcke gekapselt, so dass die betroffenen Templates komplett, bzw. die jeweils übergeordneten Blöcke aus dem Evo in das Child kopiert werden müssen. Zur Änderung von Templatedateien bitte ggfs. hier: Änderungen an Template-Dateien nachlesen. Die betroffenen Templatedateien sind aktuell:

• account/login.tpl
• blog/details.tpl
• boxes/box_login.tpl
• checkout/inc_billing_address_form.tpl
• contact/index.tpl
• layout/header_shop_nav.tpl
• newsletter/index.tpl
• productdetails/availability_notification_form.tpl
• productdetails/question_on_item.tpl
• register/form/customer_login.tpl

In allen Dateien muss nach

<div class="g-recaptcha" data-sitekey="{$Einstellungen.global.global_google_recaptcha_public}" data-callback="captcha_filled"></div>

gesucht werden. Der komplette div-Container wird dann durch

{include file="snippets/alternative_captcha.tpl" captchaError=""}

ersetzt.
Wenn es unterhalb des entfernten reCaptcha-Containers noch Code in der Form:

{if isset($fehlendeAngaben.captcha) && $fehlendeAngaben.captcha != false}
    <div class="form-error-msg text-danger"><i class="fa fa-warning"></i>
        {lang key="invalidToken" section="global"}
    </div>
{/if}

gibt, dann kann dieser ebenfalls entfernt werden. Zusätzlich muß dann der Captcha-include leicht geändert werden.

{include file="snippets/alternative_captcha.tpl" captchaError=$fehlendeAngaben.captcha}

Die Variable $fehlendeAngaben.captcha kann hierbei in jeder Template-Datei variieren und muß an die Gegebenheiten angepasst werden.

Step4 - Die Funktion renderCaptcha aus jtl.evo.js entfernen
Auch hierfür muß die komplette Originaldatei aus Evo/js/ ins Verzeichnis js des Child kopiert werden. (Falls nicht vorhanden das Verzeichnis js im Child anlegen)
In der kopierten Datei wird der komplette Code:

renderCaptcha: function(parameters) {
    if (typeof parameters !== 'undefined') {
        this.options.captcha =
            $.extend({}, this.options.captcha, parameters);
    }

    if (typeof grecaptcha === 'undefined' && !this.options.captcha.loaded) {
        this.options.captcha.loaded = true;
        var lang                    = document.documentElement.lang;
        $.getScript("https://www.google.com/recaptcha/api.js?render=explicit&onload=g_recaptcha_callback&hl=" + lang);
    } else {
        $('.g-recaptcha').each(function(index, item) {
            parameters = $.extend({}, $(item).data(), parameters);
            try {
                grecaptcha.render(item, parameters);
            }
            catch(e) { }
        });
    }
    $('.g-recaptcha-response').attr('required', true);
},

ab ca. Zeile 197 entfernt.
Zusätzlich die Aufrufe

this.renderCaptcha();

in der Funktion register (ab ca. Zeile 438)
und den kompletten Block

function g_recaptcha_callback() {
    $.evo.renderCaptcha();
}

am Ende der Datei entfernen.

Step5 - Die geänderte jtl.evo.js statt des Originals verwenden
In der template.xml des Child-Templates muss dazu unter <Minify> im Knoten <JS> ein Eintrag

<File Path="js/jtl.evo.js" override="true"/>

ergänzt werden. Wenn der Knoten <JS> nicht vorhanden ist, dann sieht das Ganze so aus:

<JS Name="jtl3.js">
    <File Path="js/jtl.evo.js" override="true"/>
</JS>

Das override="true" ist wichtig, da sonst die Datei zweimal eingebunden wird!

Step6 - Eine Sprachvariable für #enterCaptcha# anlegen und alternativen Spamschutz im Backend aktivieren
Damit im Frontend im Eingabefeld nicht #enterCaptcha# erscheint, muß im Backen noch eine entsprechende Sprachvariable für alle installierten Sprachen angelegt werden.
Jetzt muss nur noch im Backend unter System->Globale Einstellungen bei Spamschutz-Methode das "Captcha Sicherheitsstufe 3" aktiviert werden.

Wer jetzt alles richtig gemacht hat, bei dem sieht der JTL-Shop immer noch so aus wie vorher nur statt dem Google reCaptcha wird eine bunte Grafik mit einer Buchstaben/Zahlen-Kombination angezeigt.

Hinweis!
Beim Kopieren der Template-Dateien bitte unbedingt darauf achten, dass nicht bereits vorhandene Anpassungen überschrieben werden! Wenn die o.g. Datein bereits durch euch oder einen Servicepartner angepasst wurden, dann müssen diese Anpassungen berücksichtigt werden! Das Gleiche gilt für die functions.php und die jtl.evo.js. Im Zweifelsfall bitte lieber nochmal nachfragen oder jemanden bitten der sich damit auskennt!
Darüberhinaus übernehme ich keine Gewähr für vollständige Integration und Funktionsfähigkeit des Spamschutzes (Dieser wurde nicht umsonst im Evo ersetzt!). Für Änderungen an einem Child-Template ist zudem jeder selbst verantwortlich. Es sollte also unbedingt vor den Änderungen ein BACKUP der Dateien gemacht werden!

 

[wo0dle]

Moin,

super dank dir, genau danach habe ich gesucht und wollte gerade auf meinen alten Beitrag antworten das ich das Issue nicht mehr finden kann von dir. Schnell ausbauen das google Captcha

 

[chriz]

Also im 4.05 Build 6 funktioniert das leider nicht ... auf fehlen teils die oben genannten Dateien bzw. enthaltenen Codestellen.

 

[FPrüfer]

...fehlen teils die oben genannten Dateien bzw. enthaltenen Codestellen.

Welche Dateien bzw. welche Codestellen fehlen denn?

 

[Henson]

Hallo,

leider wird im 4.06-14 kein Captcha und danach auch nichts mehr angezeigt. Gab es hier einschneidende Änderungen?

 

[FPrüfer]

Wenn das Captcha nicht angezeigt wird, dann die Funktion getOldCaptchaCode in der eigenen functions.php wie folgt abändern:

/**
 * @param array     $params
 * @param JTLSmarty $smarty
 * @return void|stdClass
 */
function getOldCaptchaCode($params, &$smarty)
{
    $result = generiereCaptchaCode($params['code']);

    if (isset($params['assign'])) {
        $smarty->assign($params['assign'], $result);

        return;
    }

    return $result;
}

 

[mobade]

Also Bunte Grafik erscheint nur kann man zwar den Code eingeben

 

[mobade]

Habe es gefunden, Im Backend muss unterEinstellungen: Globale Einstellungen auch der Google reCAPTCHA Websiteschlüssel und der Google reCAPTCHA Geheimer Schlüssel entfernt werden.

 

[mobade]

Hallöchen,

Also es funktioniert, ( Kontaktformular ) https://bastel-dehs.de/Kontakt
Man kann sagen die Programmierung funzt auch in Version 4.06.15

Man könnte dies gleich noch vorbereiten für die Neue 5er Version

Danke nochmals für deinen Beitrag.

grüssle Mario

 

[AndrePiwonka]

Kann hier jemand das Problem nachstellen, dass wenn ich einmal ein Formular abgeschickt habe, der Captcha inaktiv bleibt?

 

[FPrüfer]

Hallo,
das ist ein Feature! Sobald ich mich einmal als "Mensch" identifiziert habe, muss ich das nicht erneut machen, solange meine Session besteht. Läuft die Session ab, muss das Captcha erneut bestätigt werden.