Verwenden von reCAPTCHA mit Edge Delivery Services für AEM Forms as a Cloud Service
reCAPTCHA ist ein beliebtes Tool zum Schutz von Websites vor betrügerischen Aktivitäten, Spam und Missbrauch. In Edge Delivery Services bietet der adaptive Formularbaustein die Möglichkeit, Google reCAPTCHA hinzuzufügen, um zwischen Menschen und Bots zu unterscheiden. Mit dieser Funktion können Benutzende ihre Website vor Spam und Missbrauch schützen.
Denken Sie beispielsweise an ein Anfrageformular, das Daten wie Start- und Endreisedaten, Zimmerbudget, geschätzte Reisekosten und Reiseinformationen erfasst. In solchen Fällen besteht die Gefahr, dass böswillige Personen das Formular für Zwecke wie den Versand von Phishing-E-Mails oder die Überflutung mit irrelevanten oder schädlichen Inhalten durch Spambots nutzen. Die Integration von reCAPTCHA bietet zusätzliche Sicherheit, indem überprüft wird, ob die Sendungen von echten Personen stammen, wodurch Spam-Einträge effektiv minimiert werden.
Edge Delivery Services unterstützt nur punktebasiertes reCAPTCHA (v3) für den adaptiven Formularbaustein.
Am Ende dieses Artikels werden Sie Folgendes gelernt haben:
Voraussetzungen
- Beginnen Sie mit der Entwicklung von Edge Delivery Services-Formularen, indem Sie die unter Erstellen eines Formulars mithilfe des adaptiven Formularbausteins erläuterten Schritte befolgen.
- Registrieren Sie Ihre Domain bei Google reCAPTCHA und beziehen Sie die Anmeldeinformationen.
Aktivieren von Google reCAPTCHA für ein einzelnes Formular enable-google-recaptchas-for-a-single-form
Die Aktivierung von Google reCAPTCHA für ein einzelnes Formular beinhaltet die Integration des reCAPTCHA-Diensts von Google in ein bestimmtes Web-Formular, um automatisierten Missbrauch oder Spam-Übermittlungen zu verhindern.
So aktivieren Sie Google reCAPTCHA für ein einzelnes Formular:
Um mit dem Konfigurieren von reCaptcha in Edge Delivery Services-Formularen zu beginnen, sehen Sie sich die folgende Tabelle an, die die Formulardefinition für ein Formular enthält.
Konfigurieren Sie den geheimen reCAPTCHA-Schlüssel in der Projektkonfigurationsdatei configure-secret-key
Das Site-Geheimnis für die bei Google reCAPTCHA registrierte Domain wird hinzugefügt, um die Konfigurationsdatei (.helix/config) in Ihrem AEM-Projektordner in Microsoft SharePoint oder Google Drive zu projizieren. So fügen Sie das Site-Geheimnis zur Konfigurationsdatei hinzu:
-
Navigieren Sie zu Ihrem AEM-Projektordner auf Microsoft® SharePoint oder zum Google Drive-Ordner.
-
Erstellen Sie die Datei
.helix/config.xlsxin Ihrem AEM-Projektordner auf der Microsoft SharePoint-Site oder die Datei.helix/configim AEM-Projektordner auf Ihrem Google Drive.note note NOTE Die Projektkonfigurationsdatei ist eine Tabelle, die sich unter /.helix/configbefindet. Wenn die Datei nicht vorhanden ist, erstellen Sie sie. -
Öffnen Sie die
config-Datei und fügen Sie ihr den folgenden Schlüssel und die folgenden Wertpaare hinzu:- captcha.secret: Wert des geheimen Google-reCAPTCHA-Schlüssels
- captcha.type: reCAPTCHA v2
note note NOTE - Sie können die reCAPTCHA-Schlüssel aus der Google reCAPTCHA-Admin-Konsole abrufen.
- Sie müssen den Wert von captcha.type in der
config-Datei als reCAPTCHA v2 angeben.
- Sie müssen den Wert von captcha.type in der
Sehen Sie sich den Screenshot einer Projektkonfigurationsdatei unten an:
-
Speichern Sie die
config-Datei. -
Erstellen Sie eine Vorschau und veröffentlichen Sie die
config-Datei unter Verwendung von AEM Sidekick.
Hinzufügen des reCAPTCHA-Site-Schlüssels zum Formular add-site-key
Der Site-Schlüssel für eine bei Google reCAPTCHA registrierte Domain wird der Tabelle des Formulars hinzugefügt, das geschützt werden soll. So fügen Sie den Site-Schlüssel zu einem Formular hinzu:
-
Wechseln Sie in Microsoft® SharePoint oder Google Drive zu Ihrem AEM-Projektordner und öffnen Sie die Kalkulationstabelle. Sie können auch eine neue Kalkulationstabelle für ein Formular erstellen.
-
Fügen Sie eine Zeile in die Tabelle ein, um ein neues Feld als CAPTCHA hinzuzufügen, wobei Sie die folgenden Details einschließen:
- type: captcha
- value: Wert des Google-reCAPTCHA-Site-Schlüssels
Im folgenden Screenshot sehen Sie die Tabelle mit dem neuen Zeilentyp CAPTCHA:
note note NOTE Sie können die reCAPTCHA-Schlüssel aus der Google reCAPTCHA-Admin-Konsole abrufen. -
Speichern Sie die Tabelle.
-
Verwenden Sie AEM Sidekick, um das Blatt in der Vorschau anzuzeigen und zu veröffentlichen.
Nach dem Hinzufügen einer neuen Zeile zur Formulardefinition wird in der unteren rechten Ecke des Formulars ein reCAPTCHA-Zeichen angezeigt. Dadurch wird sichergestellt, dass das Formular jetzt vor betrügerischen Aktivitäten, Spam und Missbrauch geschützt ist.
Aktivieren von reCAPTCHA für alle Formulare auf Ihrer Site enable-recaptcha-for-all-the-forms
Um Google reCAPTCHA auf alle Formulare auf Ihrer Site anzuwenden, die den adaptiven Formularbaustein verwenden, überspringen Sie die vorherigen Schritte und betten Sie den sitekey-Wert direkt in die Datei recaptcha.js ein. So fügen Sie den Wert des Site-Schlüssels in die Datei recaptcha.js ein:
Aktualisieren des Google reCAPTCHA-Site-Schlüssels in der Datei „recaptcha.js“
-
Öffnen Sie das entsprechende GitHub-Repository auf Ihrem lokalen Computer.
-
Navigieren Sie zum Ordner
[../Form Block/integrations]und öffnen Sie die Dateirecaptcha.js. -
Ersetzen Sie den
siteKeydurch den Wert des Google reCAPTCHA Site-Schlüssels.
note note NOTE Sie können die reCAPTCHA-Schlüssel aus der Google reCAPTCHA-Admin-Konsole abrufen. -
Speichern Sie die Datei
recaptcha.js.
Stellen Sie die Datei bereit und erstellen Sie das Projekt
Stellen Sie die aktualisierte Datei recaptcha.js in Ihrem GitHub-Projekt bereit und überprüfen Sie, ob der Build erfolgreich war.
Zeigen Sie mit dem AEM-Sidekick eine Vorschau der Site an
Verwenden Sie AEM Sidekick, um die Site in der Vorschau anzuzeigen und zu veröffentlichen.
Das reCAPTCHA-Zeichen wird für alle Formulare auf Ihrer Site angezeigt.