Pubblicare moduli adattivi con Edge Delivery Services

1. Accedi al modulo: apri il modulo adattivo nell’editor universale

2. Inizia la pubblicazione: fai clic sull’icona Pubblica nella barra degli strumenti

   

1. Rivedi le risorse della pubblicazione: il sistema mostra tutte le risorse in fase di pubblicazione, compreso il modulo

   

2. Conferma la pubblicazione: fai clic su Pubblica per continuare

3. Verifica esito positivo: cerca il messaggio di conferma

   

Verifica lo stato: fai di nuovo clic sull’icona Pubblica per visualizzare lo stato corrente

Punto di controllo della convalida:

• Il modulo mostra lo stato “Pubblicato” nell’editor
• Nessun messaggio di errore durante il processo di pubblicazione
• Il modulo viene visualizzato nell’elenco delle risorse pubblicate

Per annullare la pubblicazione di un modulo:

1. Apri il modulo nell’editor
2. Fai clic sul menu a tre punti (⋯) nell’angolo in alto a destra
3. Seleziona Annulla pubblicazione

Per abilitare l’invio sicuro dei moduli, è necessario configurare le impostazioni di sicurezza che:

• Consentono a Edge Delivery Services di inviare dati ad AEM
• Impedire l’accesso non autorizzato all’istanza di AEM
• Abilitare CORS (Cross-Origin Resource Sharing) per l’invio dei moduli
• Filtrare le richieste per consentire solo i domini Edge Delivery legittimi

Scopo: invii diretti di moduli all’istanza AEM

Posizione del file: blocks/form/constant.js nel progetto Edge Delivery Services

Esempi di configurazione:

// 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';

Punto di controllo della convalida:

• File constant.js aggiornato con l’URL di pubblicazione AEM corretto
• L’URL corrisponde all’ambiente (produzione, stagin o locale)
• Nessuna barra finale nell’URL

Scopo: consentire richieste di invio dei moduli da domini Edge Delivery Services

Implementazione: aggiungi la configurazione CORS alla configurazione di AEM Dispatcher o Apache

# 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

Punto di controllo della convalida:

• Regole CORS applicate alla configurazione del dispatcher
• Sono inclusi tutti i domini richiesti (localhost, hlx.page, hlx.live)
• Configurazione distribuita nell’ambiente di destinazione

Documentazione di riferimento:

• Guida alla configurazione CORS
• Documentazione sul filtro referrer

Scopo: limitare le operazioni di scrittura ai domini Edge Delivery Services autorizzati

Metodo di implementazione: configurare tramite Cloud Manager in AEM as a Cloud Service

File di configurazione: aggiungi alla configurazione OSGi del progetto

{
  "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": [
    ""
  ]
}

Raggruppamento della configurazione:

• allow.empty: rifiuta le richieste senza intestazioni referrer
• allow.hosts.regexp: consente richieste da domini Edge Delivery Services
• filter.methods: applica il filtro a questi metodi HTTP
• exclude.agents.regexp: agenti utente esclusi dal filtro

Punto di controllo della convalida:

• Configurazione del filtro referrer distribuita tramite Cloud Manager
• Configurazione attiva nell’istanza di pubblicazione di AEM
• L’invio del modulo di test funziona dal dominio Edge Delivery Services
• L’invio di moduli da parte di domini non autorizzati è bloccato

Documentazione di riferimento:

• Configurare il filtro referrer tramite Cloud Manager

Formato URL standard:

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

Componenti URL:

• <branch>: nome ramo Git (in genere main)
• <repo>: nome archivio
• <owner>: nome utente o organizzazione GitHub
• <form_name>: nome del modulo (lettere minuscole, trattini)

URL specifici dell’ambiente:

# 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

Verificare l’accessibilità del modulo:

1. Testa il caricamento modulo: visita l’URL del modulo e conferma che viene caricato correttamente
2. Testa l’invio del modulo: compila e invia il modulo per verificare l’elaborazione dei dati
3. Testa progettazione reattiva: testa il modulo su dispositivi e dimensioni dello schermo diversi
4. Convalida la sicurezza: verifica che il CORS e il filtro referrer funzionino correttamente

Risultati previsti:

• Il modulo viene caricato senza errori
• Il rendering di tutti i campi viene eseguito correttamente
• I processi di invio modulo sono completati correttamente
• I dati vengono visualizzati nella destinazione configurata (foglio di calcolo, e-mail, ecc.)
• Nessun errore della console correlato al CORS o ai criteri di sicurezza