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 및 Content Advisor
  • UMD 모듈을 사용한 사용자 지정 Angular 애플리케이션

증상

  • 공용 npm 레지스트리에서 @assets/upload 패키지를 사용할 수 없습니다.
  • 통합하려면 IMS 인증 세션을 다시 사용해야 합니다.
  • 통합하려면 대상 폴더를 선택하려면 사용자 지정 논리가 필요합니다.

해결 방법 resolution

다음 단계에 따라 Content Advisor 업로드 및 대상 선택을 Angular 애플리케이션에 통합합니다.

  1. 공용 npm 레지스트리에서 @assets/upload 패키지를 사용할 수 없으므로 Angular 응용 프로그램에서 assets-upload 번들의 UMD 내보내기를 사용합니다.

  2. UMD PureJSSelectors Content Advisor 통합에서 IMS 인증 세션을 다시 사용합니다.

    • onAccessTokenReceived 콜백과 함께 PureJSSelectors.registerContentAdvisorAuthService을(를) 사용하여 액세스 토큰을 가져옵니다.
    • 가져온 토큰을 업로드 MFE의 apiToken prop에 전달합니다.
  3. 대상 폴더 선택 구현:

    • AllInOneUpload 구성 요소가 대상 폴더를 선택할 수 있는 사용자 인터페이스를 제공하지 않으므로 targetUploadPath을(를) 제공하십시오.
    • 사용자가 대상 폴더를 선택할 수 있도록 하려면 DestinationSelector MFE를 사용하십시오.
    • PureJSSelectors.renderDestinationSelectorWithAuthFlow 내보내기를 사용하여 DestinationSelector를 해당 인증 흐름과 함께 렌더링합니다.
    • 사용자가 폴더를 선택한 후 선택한 경로를 업로드 MFE에 targetUploadPath(으)로 전달합니다.
  4. 통합을 구현한 후 다음을 확인하십시오.

    • 업로드 UI는 Angular 애플리케이션에서 렌더링됩니다.
    • IMS 인증 세션이 재사용됩니다.
    • 선택한 대상 폴더로 업로드가 완료되었습니다.

참고: UMD 모듈 통합을 보여 주는 전체 Adobe 예제를 보려면 공식 Angular 예제 리포지토리를 참조하십시오.

관련 읽기

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