Integrazione del caricamento e della selezione della destinazione di AEM Content Advisor in un’applicazione Angular

Questo articolo spiega come integrare le funzioni di caricamento e selezione delle destinazioni di AEM Content Advisor in un’applicazione Angular utilizzando i moduli UMD. Spiega anche come riutilizzare l’autenticazione IMS e fornire la selezione della cartella di destinazione. Per risolvere questo problema, utilizza l’esportazione UMD del bundle assets-upload, passa il token di accesso IMS all’MFE di caricamento e fornisci il percorso della cartella selezionata tramite targetUploadPath.

Descrizione description

Ambiente

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets con Contenuto verificato
  • Applicazione Angular personalizzata tramite moduli UMD

Sintomi

  • Il pacchetto @assets/upload non è disponibile nel registro npm pubblico.
  • L’integrazione richiede il riutilizzo di una sessione di autenticazione IMS.
  • L’integrazione richiede una logica personalizzata per selezionare la cartella di destinazione.

Risoluzione resolution

Per integrare il caricamento e la selezione della destinazione di Content Advisor nell’applicazione Angular, effettuare le seguenti operazioni:

  1. Utilizzare l’esportazione UMD del bundle assets-upload nell’applicazione Angular perché il pacchetto @assets/upload non è disponibile nel registro npm pubblico.

  2. Riutilizzare la sessione di autenticazione IMS dall’integrazione UMD PureJSSelectors Content Advisor:

    • Utilizza PureJSSelectors.registerContentAdvisorAuthService con il callback onAccessTokenReceived per ottenere il token di accesso.
    • Passa il token ottenuto alla proprietà apiToken dell’MFE di caricamento.
  3. Implementare la selezione della cartella di destinazione:

    • Specificare targetUploadPath perché il componente AllInOneUpload non fornisce un’interfaccia utente per la selezione della cartella di destinazione.
    • Utilizza l’MFE DestinationSelector per consentire agli utenti di selezionare la cartella di destinazione.
    • Utilizzare l’esportazione PureJSSelectors.renderDestinationSelectorWithAuthFlow per eseguire il rendering di DestinationSelector con il relativo flusso di autenticazione.
    • Dopo che l’utente ha selezionato una cartella, passare il percorso selezionato all’MFE di caricamento come targetUploadPath.
  4. Dopo aver implementato l’integrazione, verifica quanto segue:

    • Viene eseguito il rendering dell’interfaccia utente di caricamento nell’applicazione Angular.
    • Viene riutilizzata la sessione di autenticazione IMS.
    • I caricamenti vengono caricati correttamente nella cartella di destinazione selezionata.

Nota: per un esempio completo di Angular che dimostri l’integrazione del modulo UMD, consulta l’archivio di esempio ufficiale di Adobe.

Lettura correlata

recommendation-more-help
experience-cloud-kcs-help-kbarticles