Google reCAPTCHA erst nach Einwilligung laden

Google reCAPTCHA stellt beim Laden eine Verbindung zu Google her und übermittelt dabei Daten des Besuchers. Deshalb soll es erst geladen werden, wenn der Besucher im Consent-Layer zugestimmt hat. Ein Formular ohne Captcha ist aber keine Lösung, es wäre sofort das Ziel automatisierter Einsendungen. Wer nicht zustimmt, bekommt deshalb dasselbe Formular mit der WEBSALE-Rechenaufgabe statt des Captchas von Google.

Wie die Umschaltung funktioniert

Es gibt zwei Formularkonfigurationen, die sich nur im Captcha unterscheiden. Welche davon geladen wird, entscheidet eine einzige Klammerung im Template.

Zustimmung	Formularkonfiguration	Captcha
erteilt	`contact.config`	Google reCAPTCHA
nicht erteilt	`contact_ohne_recaptcha.config`	WEBSALE-Rechenaufgabe

Wegweiser: Integration eines INQUIRY-Formulars · AC- (AgreementCookies)

<AgreementCookies>
   Allow = yes
   ...
   <+Entry>
      ID             = googleRecaptcha
      Type           = OptIn
      Preselection   = unchecked
      Name           = Google reCAPTCHA
      Descr          = Schützt unsere Formulare vor automatisierten Einsendungen. Beim Laden wird eine Verbindung zu Google hergestellt.
      ConsentGroupID = <Ihre Gruppe>
   </+Entry>
   ...
</AgreementCookies>

Preselection = unchecked ist nicht verhandelbar. Ein vorab angehaktes Kästchen ist keine Einwilligung, und damit wäre der ganze Aufwand auf dieser Seite vergeblich.

Füllen Sie Descr aus. Der Besucher soll entscheiden, und dafür muss er wissen, worüber. Im Beispiel der bisherigen Beschreibung bleibt das Feld leer. Referenz: Abschnitt AgreementCookies

Schritt 2: Die zweite Formularkonfiguration anlegen

Legen Sie im OSB-Dienst “Konfiguration” im Bereich “Formulare (Inquiry)” eine Kopie Ihrer Formularkonfiguration an, beispielsweise contact_ohne_recaptcha.config, und schalten Sie darin das Captcha von Google ab:

<Captcha>
   UseReCaptchaV3       = no
   UseArithmeticCaptcha = yes
   CaptchaDescription   = Eine kleine Rechenaufgabe
   CaptchaNotFilledIn   = Bitte lösen Sie die Rechenaufgabe
   CaptchaError         = Die Rechenaufgabe wurde nicht gelöst
</Captcha>

Zwei Konfigurationen bedeuten zwei Dateien, die auseinanderlaufen können. Jede Änderung am Formular, jedes neue Feld und jede neue Empfängeradresse muss in beide. Notieren Sie das an der Stelle, an der die Formulare gepflegt werden.

Schritt 3: Die passende Konfiguration einbinden

Auf dem Template des Kontaktformulars, beispielsweise tpl_contact.htm:

{AC-AgreementMadeForID(googleRecaptcha)}
   ~WS-ExternInclude($URL-Homepage$/cgi/inquiry4.cgi?inq4=$WS-ShopID$.$WS-SubShopID$&m=$WS-MallID$&ini=contact.config)~
{/AC-AgreementMadeForID(googleRecaptcha)}

{!AC-AgreementMadeForID(googleRecaptcha)}
   ~WS-ExternInclude($URL-Homepage$/cgi/inquiry4.cgi?inq4=$WS-ShopID$.$WS-SubShopID$&m=$WS-MallID$&ini=contact_ohne_recaptcha.config)~
{/!AC-AgreementMadeForID(googleRecaptcha)}

Referenz: AC-AgreementMadeForID() · WS-ExternInclude()

Schritt 4: Beide Captcha-Varianten im Formulartemplate

Im Template mit den Formularfeldern, beispielsweise inquiry_contact.htm:

{WS-Include}

   {AC-AgreementMadeForID(googleRecaptcha)}
      {CAPTCHA-RecaptchaV3Error}~CAPTCHA-RecaptchaV3Error~{/CAPTCHA-RecaptchaV3Error}

      <div id="recaptcha-badge"></div>
      <input type="hidden" name="g_recaptcha_token">

      <script src="~CAPTCHA-RecaptchaV3ApiUrl~?render=explicit&onload=onloadGoogleRecaptchaCallback"></script>
      <script>
         var recaptchaClientId = null;

         function onloadGoogleRecaptchaCallback() {
            recaptchaClientId = grecaptcha.render("recaptcha-badge", {
               "sitekey": "~CAPTCHA-RecaptchaV3SiteKey~",
               "badge": "inline",
               "size": "invisible"
            });
         }

         document.querySelector("form").addEventListener("submit", function (e) {
            if (recaptchaClientId === null) {
               return;
            }
            var token = document.querySelector("[name='g_recaptcha_token']");
            if (token.value !== "") {
               return;
            }
            e.preventDefault();
            var form = this;
            grecaptcha.ready(function () {
               grecaptcha
                  .execute(recaptchaClientId, { action: "~CAPTCHA-RecaptchaV3ActionName~" })
                  .then(function (value) {
                     token.value = value;
                     form.submit();
                  });
            });
         });
      </script>
   {/AC-AgreementMadeForID(googleRecaptcha)}

   {!AC-AgreementMadeForID(googleRecaptcha)}
      <div {CAPTCHA-Input_error}class="fehler"{/CAPTCHA-Input_error}>
         <p>~CAPTCHA-Description~ *</p>
         <label for="~CAPTCHA-Input_name~">
            ~CAPTCHA-ArithmeticOperand1~ ~CAPTCHA-ArithmeticOperation~ ~CAPTCHA-ArithmeticOperand2~ =
         </label>
         <input type="text" id="~CAPTCHA-Input_name~" name="~CAPTCHA-Input_name~"
                value="~CAPTCHA-Input_value~" maxlength="10" inputmode="numeric">
      </div>
   {/!AC-AgreementMadeForID(googleRecaptcha)}

{/WS-Include}

Das Token darf erst beim Absenden geholt werden.Ein Token von reCAPTCHA v3 ist nur rund zwei Minuten gültig. Die bisherige Beschreibung holt es unmittelbar beim Laden der Seite. Wer das Formular in Ruhe ausfüllt, sendet dann ein abgelaufenes Token, und die Einsendung wird abgewiesen. Besonders lange Formulare und Besucher, die zwischendurch etwas nachschlagen, sind betroffen.Das Beispiel oben holt das Token deshalb erst im submit-Ereignis und sendet das Formular danach ab.

Die bisherige Beschreibung verwendet an dieser Stelle jQuery. Im Beispiel oben steht stattdessen document.querySelector, damit das Formular nicht von einer weiteren Bibliothek abhängt. Das Eingabefeld der Rechenaufgabe hat jetzt eine id, damit die Beschriftung darüber tatsächlich zum Feld gehört. Ohne id zeigt das for-Attribut ins Leere.

Die Fehlermarkierung gehört nicht als style-Attribut ins Template. Mit einer Klasse bleibt die Gestaltung im Stylesheet, und die Markierung lässt sich an einer Stelle ändern.

Grenzen der Lösung

Stimmt der Besucher erst nach dem Laden der Seite zu, wirkt die Umschaltung erst beim nächsten Aufruf. Wenn der Consent-Layer die Seite nach der Zustimmung ohnehin neu lädt, erledigt sich das von selbst. Andernfalls erwähnen Sie es im Layer. Die Rechenaufgabe ist kein gleichwertiger Ersatz, sondern eine einfachere Hürde. Rechnen Sie damit, dass über diesen Weg mehr automatisierte Einsendungen durchkommen, und prüfen Sie nach der Umstellung, ob das Aufkommen steigt. Die CAPTCHA--Tags und die Parameter des Abschnitts <Captcha> gehören zum Formularprogramm INQUIRY4 und sind in dessen eigener Beschreibung dokumentiert.

Anwendungsbeispiele

Google reCAPTCHA erst nach Einwilligung laden

Wie die Umschaltung funktioniert

Schritt 2: Die zweite Formularkonfiguration anlegen

Schritt 3: Die passende Konfiguration einbinden

Schritt 4: Beide Captcha-Varianten im Formulartemplate

Grenzen der Lösung

Verwandte Themen

​Wie die Umschaltung funktioniert

​Schritt 1: Den Eintrag im Consent-Layer anlegen

​Schritt 2: Die zweite Formularkonfiguration anlegen

​Schritt 3: Die passende Konfiguration einbinden

​Schritt 4: Beide Captcha-Varianten im Formulartemplate

​Grenzen der Lösung

​Verwandte Themen

Wie die Umschaltung funktioniert

Schritt 1: Den Eintrag im Consent-Layer anlegen

Schritt 2: Die zweite Formularkonfiguration anlegen

Schritt 3: Die passende Konfiguration einbinden

Schritt 4: Beide Captcha-Varianten im Formulartemplate

Grenzen der Lösung

Verwandte Themen