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 애플리케이션에 통합합니다.
-
공용 npm 레지스트리에서
@assets/upload패키지를 사용할 수 없으므로 Angular 응용 프로그램에서assets-upload번들의 UMD 내보내기를 사용합니다. -
UMD PureJSSelectors Content Advisor 통합에서 IMS 인증 세션을 다시 사용합니다.
onAccessTokenReceived콜백과 함께PureJSSelectors.registerContentAdvisorAuthService을(를) 사용하여 액세스 토큰을 가져옵니다.- 가져온 토큰을 업로드 MFE의
apiTokenprop에 전달합니다.
-
대상 폴더 선택 구현:
AllInOneUpload구성 요소가 대상 폴더를 선택할 수 있는 사용자 인터페이스를 제공하지 않으므로targetUploadPath을(를) 제공하십시오.- 사용자가 대상 폴더를 선택할 수 있도록 하려면 DestinationSelector MFE를 사용하십시오.
PureJSSelectors.renderDestinationSelectorWithAuthFlow내보내기를 사용하여 DestinationSelector를 해당 인증 흐름과 함께 렌더링합니다.- 사용자가 폴더를 선택한 후 선택한 경로를 업로드 MFE에
targetUploadPath(으)로 전달합니다.
-
통합을 구현한 후 다음을 확인하십시오.
- 업로드 UI는 Angular 애플리케이션에서 렌더링됩니다.
- IMS 인증 세션이 재사용됩니다.
- 선택한 대상 폴더로 업로드가 완료되었습니다.
참고: UMD 모듈 통합을 보여 주는 전체 Adobe 예제를 보려면 공식 Angular 예제 리포지토리를 참조하십시오.
관련 읽기
recommendation-more-help
experience-cloud-kcs-help-kbarticles