Integración de la selección de destino y carga del Asesor de contenido de AEM en una aplicación de Angular

En este artículo se explica cómo integrar las funciones de carga y selección de destino del Asesor de contenido de AEM en una aplicación de Angular mediante módulos UMD. También explica cómo reutilizar la autenticación IMS y proporcionar una selección de carpetas de destino. Para solucionarlo, utilice la exportación UMD del paquete assets-upload, pase el token de acceso IMS al MFE de carga y proporcione la ruta de carpeta seleccionada a través de targetUploadPath.

Descripción description

Entorno

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets con Asesor de contenido
  • Aplicación de Angular personalizada con módulos UMD

Síntomas

  • El paquete @assets/upload no está disponible en el registro npm público.
  • La integración requiere la reutilización de una sesión de autenticación IMS.
  • La integración requiere lógica personalizada para seleccionar la carpeta de destino.

Resolución resolution

Siga estos pasos para integrar la selección de carga y destino del Asesor de contenido en la aplicación de Angular:

  1. Utilice la exportación UMD del paquete assets-upload en la aplicación Angular porque el paquete @assets/upload no está disponible en el registro npm público.

  2. Reutilice la sesión de autenticación IMS desde la integración del Asesor de contenido de UMD PureJSSelectors:

    • Use PureJSSelectors.registerContentAdvisorAuthService con la llamada de retorno onAccessTokenReceived para obtener el token de acceso.
    • Pase el token obtenido a la propiedad apiToken del MFE de carga.
  3. Implementar la selección de carpetas de destino:

    • Proporcione targetUploadPath porque el componente AllInOneUpload no proporciona una interfaz de usuario para seleccionar la carpeta de destino.
    • Utilice el MFE Selector de destino para permitir que los usuarios seleccionen la carpeta de destino.
    • Utilice la exportación PureJSSelectors.renderDestinationSelectorWithAuthFlow para procesar DestinationSelector con su flujo de autenticación.
    • Una vez que el usuario haya seleccionado una carpeta, pase la ruta seleccionada al MFE de carga como targetUploadPath.
  4. Después de implementar la integración, compruebe lo siguiente:

    • La interfaz de usuario de carga se procesa en la aplicación de Angular.
    • Se reutiliza la sesión de autenticación IMS.
    • Las cargas se han realizado correctamente en la carpeta de destino seleccionada.

Nota: Consulte el repositorio de ejemplo oficial de Adobe para ver un ejemplo completo de Angular que muestre la integración del módulo UMD.

Lectura relacionada

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