Veröffentlichen adaptiver Formulare mit Edge Delivery Services

1. Zugriff auf Ihr Formular: Öffnen Sie Ihr adaptives Formular im universellen Editor.

2. Veröffentlichung starten: Klicken Sie in der Symbolleiste auf das Symbol Veröffentlichen.

   

1. Zu veröffentlichende Assets prüfen: Das System zeigt alle Assets an, die veröffentlicht werden sollen, einschließlich Ihres Formulars.

   

2. Veröffentlichung bestätigen: Klicken Sie auf Veröffentlichen, um fortzufahren.

3. Erfolg überprüfen: Suchen Sie nach der Bestätigungsmeldung.

   

Status überprüfen: Klicken Sie erneut auf das Symbol Veröffentlichen, um den aktuellen Status anzuzeigen.

Validierungs-Checkpoint:

• Das Formular weist im Editor den Status „Veröffentlicht“ auf
• Keine Fehlermeldungen während des Veröffentlichungsprozesses
• Formular erscheint in der Liste der veröffentlichten Assets

So heben Sie die Veröffentlichung eines Formulars auf:

1. Öffnen Sie das Formular im universellen Editor.
2. Klicken Sie auf das Dreipunkt-Menü (⋯) oben rechts.
3. Wählen Sie Veröffentlichung aufheben aus.

Für sichere Formularübermittlungen müssen Sie Sicherheitseinstellungen konfigurieren, die:

• Es Edge Delivery Services erlauben, Daten an AEM zu senden
• Nicht autorisierten Zugriff auf Ihre AEM-Instanz verhindern
• CORS (Cross-Origin Resource Sharing) für Formularübermittlungen aktivieren
• Anfragen so filtern, dass nur rechtmäßige Edge Delivery-Domains zugelassen werden

Zweck: Direkte Formularübermittlungen an Ihre AEM-Instanz

Dateispeicherort: blocks/form/constant.js in Ihrem Edge Delivery Services-Projekt

Konfigurationsbeispiele:

// Production Environment
export const submitBaseUrl = 'https://publish-p120-e12.adobeaemcloud.com';

// Local Development Environment
export const submitBaseUrl = 'http://localhost:4503';

// Staging Environment
export const submitBaseUrl = 'https://publish-staging-p120-e12.adobeaemcloud.com';

Validierungs-Checkpoint:

• constant.js Datei wurde mit der richtigen AEM-Veröffentlichungs-URL aktualisiert
• URL entspricht Ihrer Umgebung (Produktion, Staging oder lokal)
• Kein abschließender Schrägstrich in der URL

Zweck: Anfragen zur Formularübermittlung von Edge Delivery Services-Domains zulassen

Implementierung: Hinzufügen der CORS-Konfiguration zu Ihrer AEM Dispatcher- oder Apache-Konfiguration

# Local Development Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(http://localhost(:\d+)?$)#" CORSTrusted=true

# Edge Delivery Services - Preview/Stage Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.page$)#" CORSTrusted=true

# Edge Delivery Services - Production Environment
SetEnvIfExpr "env('CORSProcessing') == 'true' && req_novary('Origin') =~ m#(https://.*\.hlx\.live$)#" CORSTrusted=true

Validierungs-Checkpoint:

• CORS-Regeln auf die Dispatcher-Konfiguration angewendet
• Alle erforderlichen Domains (localhost, hlx.page, hlx.live) sind enthalten
• Konfiguration in der Zielumgebung bereitgestellt

Referenzdokumentation:

• CORS-Konfigurationshandbuch
• Dokumentation zum Referrer-Filter

Zweck: Schreibvorgänge auf autorisierte Edge Delivery Services-Domains beschränken

Implementierungsmethode: Konfigurieren über Cloud Manager in AEM as a Cloud Service

Konfigurationsdatei: Zur OSGi-Konfiguration Ihres Projekts hinzufügen

{
  "allow.empty": false,
  "allow.hosts": [],
  "allow.hosts.regexp": [
    "https://.*\\.hlx\\.page:443",
    "https://.*\\.hlx\\.live:443"
  ],
  "filter.methods": [
    "POST",
    "PUT",
    "DELETE",
    "COPY",
    "MOVE"
  ],
  "exclude.agents.regexp": [
    ""
  ]
}

Konfigurationsaufschlüsselung:

• allow.empty: Lehnt Anfragen ohne Referrer-Kopfzeilen ab
• allow.hosts.regexp: Lässt Anfragen von Edge Delivery Services-Domains zu
• filter.methods: Wendet Filterung auf diese HTTP-Methoden an
• exclude.agents.regexp: Benutzeragenten von der Filterung ausgeschlossen

Validierungs-Checkpoint:

• Konfiguration des Referrer-Filters, bereitgestellt über Cloud Manager
• Konfiguration in der AEM-Veröffentlichungsinstanz aktiv
• Übermittlung des Testformulars erfolgt über die Edge Delivery Services-Domain
• Nicht autorisierte Domains können keine Formulare senden

Referenzdokumentation:

• Konfigurieren des Referrer-Filters über Cloud Manager

Standard-URL-Format:

https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>

URL-Komponenten:

• <branch>: Name der Git-Verzweigung (normalerweise main)
• <repo>:Repository-Name
• <owner>: GitHub-Organisation oder -Benutzername
• <form_name>: Name Ihres Formulars (in Kleinbuchstaben, mit Bindestrich)

Umgebungsspezifische URLs:

# Production Environment (.aem.live)
https://main--universaleditor--wkndforms.aem.live/content/forms/af/wknd-form

# Preview Environment (.aem.page)
https://main--universaleditor--wkndforms.aem.page/content/forms/af/wknd-form

Ein-/Ausgabehilfe von Formularen überprüfen:

1. Laden von Formularen testen: Besuchen Sie Ihre Formular-URL und prüfen Sie, ob sie ordnungsgemäß geladen wird.
2. Formularübermittlung testen: Füllen Sie das Formular aus und senden Sie es, um die Datenverarbeitung zu überprüfen.
3. Responsives Design prüfen: Testen Sie das Formular mit verschiedenen Geräten und Bildschirmgrößen.
4. Sicherheit überprüfen: Stellen Sie sicher, dass CORS und Referrer-Filter ordnungsgemäß funktionieren.

Erwartete Ergebnisse:

• Formular wird fehlerfrei geladen
• Alle Formularfelder werden korrekt wiedergegeben
• Formularübermittlungsprozesse erfolgreich
• Daten werden im konfigurierten Ziel (Tabelle, E-Mail usw.) angezeigt
• Keine Konsolenfehler im Zusammenhang mit CORS oder Sicherheitsrichtlinien