将AEM Content Advisor上传和目标选择集成到Angular应用程序中

本文介绍如何使用UMD模块将AEM Content Advisor上载和目标选择功能集成到Angular应用程序中。 它还介绍了如何重用IMS身份验证并提供目标文件夹选择。 要解决此问题,请使用资产上传包的UMD导出,将IMS访问令牌传递到上传MFE,并通过targetUploadPath提供选定的文件夹路径。

描述 description

环境

  • Adobe Experience Manager as a Cloud Service
  • 带有内容审查程序的Adobe Experience Manager Assets
  • 使用UMD模块的自定义Angular应用程序

症状

  • @assets/upload程序包在公共npm注册表中不可用。
  • 集成需要重用IMS身份验证会话。
  • 集成需要自定义逻辑才能选择目标文件夹。

解决方法 resolution

请按照以下步骤将Content Advisor上载和目标选择集成到Angular应用程序中:

  1. 在Angular应用程序中使用assets-upload包的UMD导出,因为@assets/upload包在公共npm注册表中不可用。

  2. 重复使用UMD PureJSSelectors Content Advisor集成中的IMS身份验证会话:

    • 使用带有onAccessTokenReceived回调的PureJSSelectors.registerContentAdvisorAuthService获取访问令牌。
    • 将获取的令牌传递到上传MFE的apiToken属性。
  3. 实施目标文件夹选择:

    • 提供targetUploadPath,因为AllInOneUpload组件不提供用于选择目标文件夹的用户界面。
    • 使用DestinationSelector MFE允许用户选择目标文件夹。
    • 使用PureJSSelectors.renderDestinationSelectorWithAuthFlow导出以呈现DestinationSelector及其身份验证流。
    • 用户选择文件夹后,将所选路径作为targetUploadPath传递到上传MFE。
  4. 实施集成后,请验证以下各项:

    • 上传UI在Angular应用程序中渲染。
    • IMS身份验证会话将被重用。
    • 上传成功到选定的目标文件夹。

注意:有关演示UMD模块集成的完整Adobe示例,请参阅官方的Angular示例存储库。

相关阅读

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