Integrar o upload e a seleção de destino do AEM Content Advisor em um aplicativo Angular

Este artigo explica como integrar os recursos de upload e seleção de destino do Supervisor de conteúdo do AEM em um aplicativo do Angular usando módulos UMD. Também explica como reutilizar a autenticação IMS e fornecer a seleção da pasta de destino. Para corrigir isso, use a exportação UMD do pacote de upload de ativos, passe o token de acesso IMS para o MFE de Carregamento e forneça o caminho de pasta selecionado por meio de targetUploadPath.

Descrição description

Ambiente

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets com Supervisor de Conteúdo
  • Aplicativo Angular personalizado usando módulos UMD

Sintomas

  • O pacote @assets/upload não está disponível no registro npm público.
  • A integração exige a reutilização de uma sessão de autenticação IMS.
  • A integração exige lógica personalizada para selecionar a pasta de destino.

Resolução resolution

Siga estas etapas para integrar o upload do Supervisor de Conteúdo e a seleção de destino ao seu aplicativo do Angular:

  1. Use a exportação UMD do pacote assets-upload no aplicativo Angular porque o pacote @assets/upload não está disponível no registro npm público.

  2. Reutilize a sessão de autenticação IMS da integração do Supervisor de Conteúdo UMD PureJSSelectors:

    • Use PureJSSelectors.registerContentAdvisorAuthService com o retorno de chamada onAccessTokenReceived para obter o token de acesso.
    • Passe o token obtido para a prop apiToken do MFE de Carregamento.
  3. Implementar a seleção da pasta de destino:

    • Forneça o targetUploadPath porque o componente AllInOneUpload não fornece uma interface de usuário para selecionar a pasta de destino.
    • Use o DestinationSelector MFE para permitir que os usuários selecionem a pasta de destino.
    • Use a exportação PureJSSelectors.renderDestinationSelectorWithAuthFlow para renderizar o DestinationSelector com seu fluxo de autenticação.
    • Depois que o usuário selecionar uma pasta, passe o caminho selecionado para o MFE de carregamento como targetUploadPath.
  4. Depois de implementar a integração, verifique o seguinte:

    • A interface de upload é renderizada no aplicativo do Angular.
    • A sessão de autenticação IMS é reutilizada.
    • Os uploads foram concluídos com êxito na pasta de destino selecionada.

Observação: consulte o repositório de exemplo oficial do Adobe para obter um exemplo completo de Angular que demonstra a integração do módulo UMD.

Leitura relacionada

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