Verwenden von CAPTCHA in adaptiven Formularen

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 Herausforderung dar 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.

Konfigurieren des reCAPTCHA-Service von Google

Formularautoren können den reCAPTCHA-Service von Google verwenden, um ein CAPTCHA in adaptiven Formularen zu implementieren. Es bietet erweiterte CAPTCHA-Funktionen zum Schutz Ihrer Site. Weitere Informationen zur Funktionsweise von reCAPTCHA finden Sie unter Google reCAPTCHA.

Implementieren des reCAPTCHA-Service in AEM Forms:

1. Erhalten reCAPTCHA API-Schlüsselpaar aus Google. Er enthält einen Site- und einen Geheimschlüssel.

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

   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 Cloudkonfigurationen 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 den Ordner global und tippen Sie auf Eigenschaften.

      2. Aktivieren Sie im Dialogfeld „Konfigurationseigenschaften“ die Option Cloudkonfigurationen.

      3. Tippen Sie auf Speichern und schließen, um die Konfiguration zu speichern und das Dialogfeld zu schließen.

   3. Tippen Sie im Konfigurationsbrowser auf Erstellen.

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

   5. Tippen Sie auf Erstellen, um den für Cloud Service-Konfigurationen aktivierten Ordner zu erstellen.

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

   1. Gehen Sie in der Experience Manager-Autoreninstanz zu > Cloud Services.
   2. Tippen reCAPTCHA. Die Seite Konfigurationen wird geöffnet. Wählen Sie den im vorherigen Schritt erstellten Konfigurations-Container und tippen Sie auf Erstellen.
   3. Geben Sie Namen, Site- und Geheimschlüssel für den reCAPTCHA-Service an und tippen Sie auf 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. Tippen Sie auf Einstellungen speichern und anschließend auf 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.

Verwenden von CAPTCHA in adaptiven Formularen

So verwenden Sie CAPTCHA in adaptiven Formularen:

1. Öffnen Sie ein adaptives Formular im Bearbeitungsmodus.

   HINWEIS

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

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

   HINWEIS

   Die Verwendung von mehr als einer CAPTCHA-Komponente in einem adaptiven Formular wird nicht unterstützt. Es wird außerdem nicht empfohlen, CAPTCHA in einem Bereich zu verwenden, der für verzögertes Laden markiert ist, oder in einem Fragment.

   HINWEIS

   Captcha ist zeitkritisch und läuft in etwa einer Minute ab. Daher wird empfohlen, die CAPTCHA-Komponente unmittelbar vor der Schaltfläche zum Übermitteln im adaptiven Formular zu platzieren.

3. Wählen Sie die CAPTCHA-Komponente aus, die Sie hinzugefügt haben, und tippen Sie auf , 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 des CAPTCHA-Service die Option reCAPTCHA aus, um den reCAPTCHA-Service zu aktivieren, wenn Sie ihn wie in reCAPTCHA-Service von Google beschrieben konfiguriert haben. Wählen Sie eine Konfiguration aus der Dropdown-Liste „Einstellungen“.

6. Wählen Sie außerdem den Typ Normal oder Kompakt für das reCAPTCHA-Widget aus. Sie können auch die Option Unsichtbar auswählen, um die CAPTCHA-Abfrage nur im Falle einer verdächtigen Aktivität anzuzeigen. Auf den geschützten Formularen wird der unten dargestellte, durch reCAPTCHA geschützte Badge angezeigt.

   

   HINWEIS

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

7. Speichern Sie die Eigenschaften.

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

Ein- oder Ausblenden der CAPTCHA-Komponente auf Grundlage von Regeln

Sie können die CAPTCHA-Komponente auf Grundlage von Regeln, die Sie auf eine Komponente in einem adaptiven Formular anwenden, ein- oder ausblenden. Tippen Sie auf die Komponente, wählen Sie aus und tippen Sie auf 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.

Tippen Sie im Formular auf das Feld Währungswert und erstellen Sie folgende Regeln:

CAPTCHA validieren

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

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

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

Validieren von CAPTCHA mit Benutzeraktionen und -bedingungen

Validieren von CAPTCHA basierend auf Bedingungen und Benutzeraktionen:

1. Tippen Sie auf die CAPTCHA-Komponente und wählen Sie aus, um die Komponenteneigenschaften anzuzeigen.
2. Wählen Sie im Abschnitt Validieren von CAPTCHA CAPTCHA mit Benutzeraktion validieren.
3. Tippen Sie auf , um die Komponenteneigenschaften zu speichern.

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. Tippen Sie auf Übermitteln. 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:

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.

Hinzufügen benutzerdefinierter CAPTCHA-Services

Experience Manager Forms stellt reCAPTCHA als CAPTCHA-Service bereit. Sie können jedoch einen benutzerdefinierten Service hinzufügen, der in der Dropdown-Liste CAPTCHA-Service angezeigt wird.

Im Folgenden finden Sie eine Beispielimplementierung der Oberfläche zum Hinzufügen eines zusätzlichen CAPTCHA-Service zu Ihrem adaptiven Formular:

package com.adobe.aemds.guide.service;

import org.osgi.annotation.versioning.ConsumerType;

/**
 * An interface to provide captcha validation at server side in Adaptive Form
 * This interface can be used to provide custom implementation for different captcha services.
 */
@ConsumerType
public interface GuideCaptchaValidator {
    /**
     * This method should define the actual validation logic of the captcha
     * @param captchaPropertyNodePath path to the node with CAPTCHA configurations inside form container
     * @param userResponseToken  The user response token provided by the CAPTCHA from client-side
     *
     * @return  {@link GuideCaptchaValidationResult} validation result of the captcha
     */
     GuideCaptchaValidationResult validateCaptcha(String captchaPropertyNodePath, String userResponseToken);

    /**
     * Returns the name of the captcha validator. This should be unique among the different implementations
     * @return  name of the captcha validator
     */
     String getCaptchaValidatorName();
}

captchaPropertyNodePath verweist auf den Ressourcenpfad der CAPTCHA-Komponente im Sling-Repository. Verwenden Sie diese Eigenschaft, um spezifische Details zur CAPTCHA-Komponente aufzunehmen. Beispielsweise enthält captchaPropertyNodePath Informationen zur reCAPTCHA-Cloudkonfiguration, die für die CAPTCHA-Komponente eingestellt ist. Die Informationen zur Cloudkonfiguration enthalten die Einstellungen Siteschlüssel und Geheimschlüssel für die Implementierung des reCAPTCHA-Service.

userResponseToken bezieht sich auf g_recaptcha_response, die nach dem Lösen eines CAPTCHA in einem Formular generiert wird.

Bearbeiten der reCAPTCHA-Servicedomain

Der reCAPTCHA-Service verwendet https://www.recaptcha.net/ als Standard-Domain. Sie können die Einstellungen ändern, um https://www.google.com/ oder einen beliebigen benutzerdefinierten Domain-Namen zum Laden, Rendern und Validieren des reCAPTCHA-Service festzulegen.

Legen Sie die Eigenschaft af.cloudservices.recaptcha.domain der Konfiguration Adaptives Formular und Webkanal für interaktive Kommunikation fest, um https://www.google.com/ oder einen anderen benutzerdefinierten Domain-Namen anzugeben. Folgende JSON-Datei zeigt ein Beispiel:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

Um Konfigurationswerte festzulegen, generieren Sie OSGi-Konfigurationen mit dem AEM-SDK und stellen Sie die Konfiguration in Ihrer Cloud Service-Instanz bereit.

Ressourcen für Business.Adobe.com