DokumentationAEM 6.5Benutzerhandbuch

Verwenden von CAPTCHA in adaptiven Formularen using-captcha-in-adaptive-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
Version
Artikel-Link
AEM as a Cloud Service
Hier klicken
AEM 6.5
Dieser Artikel

Adobe empfiehlt die Verwendung der modernen und erweiterbaren Kernkomponentenzur Datenerfassung für das Erstellen neuer adaptiver Formulareoder das Hinzufügen von adaptiven Formularen zu AEM Sites-SeitenDiese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Formulare dar und sorgen für beeindruckende Anwendererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen von adaptiven Formularen mithilfe von Foundation-Komponenten beschrieben.

CAPTCHA („Completely Automated Public Turing test to tell Computers and Humans Apart“ – „vollautomatischer öffentlicher Turing-Test zur Unterscheidung von Computern und Menschen“) ist ein Programm, das bei Onlinetransaktionen eingesetzt wird, um zwischen Menschen und Bots oder automatisierten Programmen zu unterscheiden. Es stellt eine herausfordernde Aufgabe und bewertet die Benutzerantwort, um festzustellen, ob es sich um einen Menschen oder einen Bot handelt, der mit der Site interagiert. Dabei wird verhindert, dass der Benutzer fortfährt, wenn der Test fehlschlägt, wodurch Onlinetransaktionen sicherer werden, da Bots keinen Spam senden oder andere bösartige Zwecke verfolgen können.

AEM Forms unterstützt CAPTCHA in adaptiven Formularen. Sie können den reCAPTCHA-Service von Google verwenden, um CAPTCHA zu implementieren.

NOTE
  • AEM Forms unterstützt reCAPTCHA v2 und Enterprise. Es werden keine anderen Versionen unterstützt.
  • Im Offline-Modus wird CAPTCHA in adaptiven Formularen in der AEM Forms-App nicht unterstützt.

Konfigurieren des reCAPTCHA-Services von Google für adaptive Formulare google-reCAPTCHA

AEM Forms-Benutzende können den reCAPTCHA-Service von Google verwenden, um CAPTCHA in adaptive Formulare zu implementieren. Er bietet erweiterte CAPTCHA-Funktionen zum Schutz Ihrer Site. Weitere Informationen zur Funktionsweise von reCAPTCHA finden Sie unter Google reCAPTCHA. Der reCAPTCHA-Service einschließlich reCAPTCHA v2 und reCAPTCHA Enterprise ist in AEM Forms integriert. Je nach Ihren Anforderungen können Sie den reCAPTCHA-Service konfigurieren, um Folgendes zu aktivieren:

reCAPTCHA

Konfigurieren von reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Erstellen Sie ein reCAPTCHA Enterprise-Projekt, mit aktivierter reCAPTCHA Enterprise-API.

  2. Rufen Sie die Projekt-ID ab.

  3. Erstellen Sie einen API-Schlüssel und einen Site-Schlüssel für Websites.

  4. Erstellen Sie einen Konfigurations-Container für Cloud-Dienste.

    1. Wählen Sie „Tools“ > „Allgemein“ > „Konfigurationsbrowser“. Weitere Informationen finden Sie in der Dokumentation zum Konfigurationsbrowser.

    2. Gehen Sie folgendermaßen vor, um den globalen Ordner für Cloud-Konfigurationen zu aktivieren, oder überspringen Sie diesen Schritt, um einen anderen Ordner für Cloud Service-Konfigurationen zu erstellen und zu konfigurieren.

      1. Wählen Sie im Konfigurationsbrowser die global Ordner und auswählen Eigenschaften.
      2. Aktivieren Sie im Dialogfeld „Konfigurationseigenschaften“ die Option Cloud-Konfigurationen.
      3. Wählen Sie Speichern und schließen aus, um die Konfiguration zu speichern und das Dialogfeld zu schließen.

    3. Wählen Sie im Konfigurationsbrowser die Option Erstellen.

    4. Legen Sie im Dialogfeld „Konfiguration erstellen“ einen Titel für den Ordner fest und aktivieren Sie Cloudkonfigurationen.

    5. Wählen Sie Erstellen, um den für Cloud Service-Konfigurationen aktivierten Ordner zu erstellen.

  5. Konfigurieren Sie den Cloud Service für reCAPTCHA Enterprise.

    1. Gehen Sie in der Experience Manager-Autoreninstanz zu tools-1 > Cloud Services.

    2. Wählen Sie reCAPTCHA aus. Die Konfigurationsseite öffnet sich. Wählen Sie den im vorherigen Schritt erstellten Konfigurationscontainer aus und wählen Sie Erstellen.

    3. Wählen Sie die Version „reCAPTCHA Enterprise“ und geben Sie den Namen, die Projekt-ID, den Site-Schlüssel und den API-Schlüssel (erhalten in Schritt 2 und 3) für den reCAPTCHA Enterprise-Dienst an.

    4. Wählen Sie den Schlüsseltyp aus. Der Schlüsseltyp sollte mit dem im Google Cloud-Projekt konfigurierten Site-Schlüssel übereinstimmen, z. B. Checkbox site key oder Score-based site key.

    5. Geben Sie einen Schwellenwert im Bereich 0-1 (Klicken Sie auf , um mehr über die Punktzahl zu erfahren). Werte, die größer oder gleich den Schwellenwerten sind, kennzeichnen menschliche Interaktionen, die ansonsten als Bot-Interaktion betrachtet werden.

      Hinweis:

      • Formularautorinnen und -autoren können eine Punktzahl im Bereich angeben, der für die unterbrechungsfreie Formularübermittlung geeignet ist.

    6. Wählen Sie Erstellen aus, um die Cloud-Service-Konfiguration zu erstellen.

    7. Geben Sie im Dialogfeld „Komponente bearbeiten“ den Namen, die Projekt-ID, den Site-Schlüssel und den API-Schlüssel an (erhalten in den Schritten 2 und 3), wählen Sie den Schlüsseltyp aus und geben Sie den Schwellenwert ein. Auswählen Einstellungen speichern  und wählen Sie  OK  , um die Konfiguration abzuschließen.

Sobald der reCAPTCHA Enterprise-Dienst aktiviert ist, kann er in adaptiven Formularen verwendet werden. Siehe Verwenden von CAPTCHA in adaptiven Formularen.

ReCaptcha Enterprise

Konfigurieren von Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. Rufen Sie ein reCAPTCHA-API-Schlüsselpaar von Google ab. Er enthält einen Site-Schlüssel und einen geheimen Schlüssel.

  2. Erstellen Sie einen Konfigurations-Container für Cloud-Dienste.

    1. Wählen Sie „Tools“ > „Allgemein“ > „Konfigurationsbrowser“. Weitere Informationen finden Sie in der Dokumentation zum Konfigurationsbrowser.

    2. Gehen Sie folgendermaßen vor, um den globalen Ordner für Cloud-Konfigurationen zu aktivieren, oder überspringen Sie diesen Schritt, um einen anderen Ordner für Cloud Service-Konfigurationen zu erstellen und zu konfigurieren.

      1. Wählen Sie im Konfigurationsbrowser die global Ordner und auswählen Eigenschaften.

      2. Aktivieren Sie im Dialogfeld „Konfigurationseigenschaften“ die Option Cloud-Konfigurationen.

      3. Wählen Sie Speichern und schließen aus, um die Konfiguration zu speichern und das Dialogfeld zu schließen.

    3. Wählen Sie im Konfigurationsbrowser die Option Erstellen.

    4. Legen Sie im Dialogfeld „Konfiguration erstellen“ einen Titel für den Ordner fest und aktivieren Sie Cloudkonfigurationen.

    5. Wählen Sie Erstellen, um den für Cloud Service-Konfigurationen aktivierten Ordner zu erstellen.

  3. Konfigurieren Sie den Cloud Service für reCAPTCHA v2.

    1. Navigieren Sie in der AEM-Autoreninstanz zu tools-1 > Cloud Services.
    2. Wählen Sie reCAPTCHA aus. Die Konfigurationsseite öffnet sich. Wählen Sie den im vorherigen Schritt erstellten Konfigurationscontainer aus und wählen Sie Erstellen.
    3. Wählen Sie Version als reCAPTCHA v2 aus, geben Sie den Namen, den Site-Schlüssel und den geheimen Schlüssel für den reCAPTCHA-Dienst an (abgerufen in Schritt 1) und wählen Sie aus. Erstellen , um die Cloud Service-Konfiguration zu erstellen.
    4. Geben Sie im Dialogfeld „Komponente bearbeiten“ die Site- und Geheimschlüssel an, die Sie in Schritt 1 erhalten haben. Wählen Sie Einstellungen speichern und wählen Sie dann OK, um die Konfiguration abzuschließen.

    Sobald der reCAPTCHA-Service konfiguriert ist, kann er in adaptiven Formularen verwendet werden. Weitere Informationen finden Sie unter Verwenden von CAPTCHA in adaptiven Formularen.

reCAPTCHA v2

Verwenden von reCAPTCHA in adaptiven Formularen using-reCAPTCHA

So verwenden Sie reCAPTCHA in adaptiven Formularen:

  1. Öffnen Sie ein adaptives Formular im Bearbeitungsmodus.

    note note
    NOTE
    Stellen Sie sicher, dass der beim Erstellen des adaptiven Formulars ausgewählte Konfigurations-Container den reCAPTCHA-Cloud Service enthält. Sie können auch adaptive Formulareigenschaften bearbeiten, um den Konfigurationscontainer zu ändern, der dem Formular zugeordnet ist.

  2. Ziehen Sie die CAPTCHA-Komponente im Komponenten-Browser in das adaptive Formular und legen Sie sie dort ab.

    note note
    NOTE
    Die Verwendung von mehr als einer CAPTCHA-Komponente in einem adaptiven Formular wird nicht unterstützt. Es wird nicht empfohlen, CAPTCHA in einem Fragment oder in einem Bedienfeld zu verwenden, das für das verzögerte Laden konfiguriert wurde.
    note note
    NOTE
    Captcha ist zeitabhängig und läuft in etwa einer Minute ab. Daher wird empfohlen, die Captcha-Komponente unmittelbar vor der Sendeschaltfläche im adaptiven Formular zu platzieren.

  3. Wählen Sie die hinzugefügte Captcha-Komponente aus und wählen Sie dann cmppr , um ihre Eigenschaften zu bearbeiten.

  4. Geben Sie einen Titel für das CAPTCHA-Widget an. Der Standardwert ist CAPTCHA. Wählen Sie Titel ausblenden, wenn der Titel nicht angezeigt werden soll.

  5. Wählen Sie aus der Dropdown-Liste Captcha-Service die Option reCAPTCHA, um den reCAPTCHA-Service zu aktivieren, wenn Sie ihn wie unter reCAPTCHA-Service von Google beschrieben konfiguriert haben.

  6. Wählen Sie eine Konfiguration aus der Dropdown-Liste „Einstellungen“.

  7. Wenn die ausgewählte Konfiguration die Version reCAPTCHA Enterprise aufweist:

    1. Sie können die reCAPTCHA-Cloud-Konfiguration auswählen, wobei der Schlüsseltyp als Kontrollkästchen ausgewählt ist. Beim Schlüsseltyp „Kontrollkästchen“ wird die angepasste Fehlermeldung als Inline-Meldung angezeigt, wenn die Captcha-Validierung fehlschlägt. Sie können zwischen den Größen Normal und Kompakt wählen.

    2. Sie können die reCAPTCHA-Cloud-Konfiguration auswählen, wobei der Schlüsseltyp als punktebasiert ausgewählt ist. Beim bewerteten Schlüsseltyp wird die angepasste Fehlermeldung als Popup-Meldung angezeigt, wenn die Captcha-Validierung fehlschlägt.

    3. Wenn Sie einen Bindungsverweis auswählen, sind die übermittelten Daten gebundene Daten, ansonsten handelt es sich um ungebundene Daten. Im Folgenden finden Sie XML-Beispiele für ungebundene Daten und gebundene Daten (mit Bindungsverweis als SSN), wenn ein Formular gesendet wird.

      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data>
            <captcha16820607953761>
                <captchaType>reCAPTCHAEnterprise</captchaType>
                <captchaScore>0.9</captchaScore>
            </captcha16820607953761>
        </data>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>371237912</SSN>
                <FirstName>Sarah </FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608034928</afSubmissionTime>
    </afSubmissionInfo>
    </afData>
      code language-xml 
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <afData>
    <afUnboundData>
        <data/>
    </afUnboundData>
    <afBoundData>
        <Root
            xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
            <PersonalDetails>
                <SSN>
                    <captchaType>reCAPTCHAEnterprise</captchaType>
                    <captchaScore>0.9</captchaScore>
                </SSN>
                <FirstName>Sarah</FirstName>
                <LastName>Smith</LastName>
            </PersonalDetails>
            <OtherInfo>
                <City>California</City>
                <Address>54 Residency</Address>
                <State>USA</State>
                <Zip>123112</Zip>
            </OtherInfo>
        </Root>
    </afBoundData>
    <afSubmissionInfo>
        <stateOverrides/>
        <signers/>
        <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
        <afSubmissionTime>20230608035111</afSubmissionTime>
    </afSubmissionInfo>
    </afData>

    Wenn die ausgewählte Konfiguration die Version „reCAPTCHA v2“ aufweist:

    1. Wählen Sie als Größe für das reCAPTCHA-Widget entweder Normal oder Kompakt aus. Sie können auch die Unsichtbar Option, um die CAPTCHA-Herausforderung nur anzuzeigen, wenn eine verdächtige Aktivität vorliegt. Das unten abgebildete Abzeichen mit reCAPTCHA geschützt wird auf den geschützten Formularen angezeigt.

      Durch Google geschützt mit reCAPTCHA-Badge

    Der reCAPTCHA-Dienst wird im adaptiven Formular aktiviert. Sie können das Formular in der Vorschau anzeigen und die CAPTCHA-Funktionsweise sehen.

  8. Speichern Sie die Eigenschaften.

NOTE
Wählen Sie nicht Standard aus der Dropdown-Liste „CAPTCHA-Service“ aus, da der standardmäßige AEM-CAPTCHA-Service nicht mehr unterstützt wird.

Ein- oder Ausblenden der CAPTCHA-Komponente auf Grundlage von Regeln show-hide-captcha

Sie können die CAPTCHA-Komponente auf Grundlage von Regeln, die Sie auf eine Komponente in einem adaptiven Formular anwenden, ein- oder ausblenden. Wählen Sie die Komponente aus, wählen Sie Regeln bearbeiten und dann Erstellen, um eine Regel zu erstellen. Weitere Informationen zum Erstellen von Regeln finden Sie im Regeleditor.

Beispielsweise darf die CAPTCHA-Komponente nur dann in einem adaptiven Formular angezeigt werden, wenn das Feld „Währungswert“ im Formular einen Wert von mehr als 25000 aufweist.

Wählen Sie im Formular das Feld Währungswert aus und erstellen Sie folgende Regeln:

Regeln zum Ein- oder Ausblenden

NOTE
  • Wenn Sie eine reCAPTCHA v2-Konfiguration mit der Größe als Unsichtbar oder den reCAPTCHA Enterprise punktebasierten Schlüsseln auswählen, dann ist die Option zum Anzeigen/Verbergen nicht anwendbar.

CAPTCHA validieren validate-captcha

Sie können CAPTCHA in einem adaptiven Formular entweder beim Übermitteln des Formulars validieren oder angeben, dass die CAPTCHA-Validierung auf Benutzeraktionen und -bedingungen basiert.

CAPTCHA bei Formularübermittlung validieren validation-form-submission

So validieren Sie ein CAPTCHA beim Übermitteln eines adaptiven Formulars automatisch:

  1. Wählen Sie die CAPTCHA-Komponente und wählen Sie dann cmppr aus, um die Komponenteneigenschaften anzuzeigen.
  2. Wählen Sie im Abschnitt Validieren von CAPTCHA CAPTCHA bei Formularübermittlung validieren.
  3. Wählen Sie Fertig aus, um die Komponenteneigenschaften zu speichern.

Validieren von CAPTCHA mit Benutzeraktionen und -bedingungen validate-captcha-user-action

Validieren eines CAPTCHA basierend auf Bedingungen und Benutzeraktionen:

  1. Klicken Sie auf die CAPTCHA-Komponente und wählen Sie cmppr aus, um die Komponenteneigenschaften anzuzeigen.

  2. Wählen Sie im Abschnitt Validieren von CAPTCHA die Option CAPTCHA mit Benutzeraktion validieren.

  3. Wählen Sie Fertig aus, um die Komponenteneigenschaften zu speichern.

    note note
    NOTE
    Wenn Sie eine reCAPTCHA v2-Konfiguration mit der Größe als Unsichtbar oder den reCAPTCHA Enterprise punktebasierten Schlüsseln auswählen, dann ist „Valid Captcha“ auf eine Benutzeraktion nicht anwendbar.

Experience Manager Forms stellt die ValidateCAPTCHA-API zur Validierung von CAPTCHA unter Verwendung vordefinierter Bedingungen bereit. Sie können die API mit einer benutzerdefinierten Übermittlungsaktion oder durch Definieren von Regeln für Komponenten in einem adaptiven Formular aufrufen.

Im Folgenden finden Sie ein Beispiel für eine ValidateCAPTCHA-API zur Validierung von CAPTCHA unter Verwendung vordefinierter Bedingungen:

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
        GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

Das Beispiel zeigt an, dass die ValidateCAPTCHA-API CAPTCHA im Formular nur dann validiert, wenn die Anzahl der Stellen im numerischen Feld, die der Benutzer beim Ausfüllen des Formulars angegeben hat, größer als 5 ist.

Option 1: Verwenden Sie die Experience Manager Forms ValidateCAPTCHA-API, um CAPTCHA mithilfe einer benutzerdefinierten Übermittlungsaktion zu validieren.

Führen Sie folgende Schritte aus, um die ValidateCAPTCHA-API zur Validierung von CAPTCHA mit einer benutzerdefinierten Übermittlungsaktion zu verwenden:

  1. Fügen Sie das Skript, das die ValidateCAPTCHA-API enthält, zur benutzerdefinierten Übermittlungsaktion hinzu. Weitere Informationen zu benutzerdefinierten Übermittlungsaktionen finden Sie unter Erstellen einer benutzerdefinierten Übermittlungsaktion für adaptive Formulare.
  2. Wählen Sie den Namen der benutzerdefinierten Übermittlungsaktion aus der Dropdown-Liste Übermittlungsaktion in den Eigenschaften für die Übermittlung eines adaptiven Formulars.
  3. Wählen Sie Absenden aus. CAPTCHA wird auf Grundlage der Bedingungen validiert, die in der ValidateCAPTCHA-API der benutzerdefinierten Übermittlungsaktion definiert sind.

Option 2: Verwenden Sie die Experience Manager Forms ValidateCAPTCHA-API, um CAPTCHA vor dem Übermitteln des Formulars bei einer Benutzeraktion zu validieren.

Sie können die ValidateCAPTCHA-API auch aufrufen, indem Sie Regeln auf eine Komponente in einem adaptiven Formular anwenden.

Sie fügen beispielsweise die Schaltfläche CAPTCHA validieren in einem adaptiven Formular hinzu und erstellen eine Regel, um beim Klick auf eine Schaltfläche einen Service aufzurufen.

Folgende Abbildung zeigt, wie Sie beim Klick auf die Schaltfläche CAPTCHA validieren einen Service aufrufen können:

CAPTCHA validieren

Sie können das benutzerdefinierte Servlet, das die ValidateCAPTCHA-API enthält, mit dem Regeleditor aufrufen und die Schaltfläche zum Übermitteln des adaptiven Formulars basierend auf dem Validierungsergebnis aktivieren oder deaktivieren.

Ebenso können Sie mithilfe des Regeleditors eine benutzerdefinierte Methode zur Validierung von CAPTCHA in ein adaptives Formular aufnehmen.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2