將AEM內容建議程式上傳和目的地選擇整合至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
請依照下列步驟,將「內容建議程式」上傳與目的地選擇整合至您的Angular應用程式:
-
在您的Angular應用程式中使用
assets-upload套件組合的UMD匯出,因為公用npm登入中無法使用@assets/upload套件。 -
重複使用UMD PureJSSelectors Content Advisor整合中的IMS驗證工作階段:
- 使用
PureJSSelectors.registerContentAdvisorAuthService搭配onAccessTokenReceived回呼取得存取權杖。 - 將取得的權杖傳遞至上傳MFE的
apiTokenprop。
- 使用
-
實作目的地資料夾選擇:
- 提供
targetUploadPath,因為AllInOneUpload元件未提供使用者介面來選取目的地資料夾。 - 使用DestinationSelector MFE可允許使用者選取目的地資料夾。
- 使用
PureJSSelectors.renderDestinationSelectorWithAuthFlow匯出來轉譯DestinationSelector及其驗證流程。 - 使用者選取資料夾後,將選取的路徑以
targetUploadPath的形式傳遞至上傳MFE。
- 提供
-
實作整合後,請確認下列事項:
- 上傳UI會在Angular應用程式中呈現。
- IMS驗證工作階段會重複使用。
- 上傳成功到所選的目的地資料夾。
注意:如需示範UMD模組整合的完整Adobe範例,請參閱官方Angular範例存放庫。
相關閱讀
- 自訂內容顧問
- 內容警告器屬性
- AEM as a Cloud Service的目的地選擇器
- 將檔案和資料夾上傳至Asset Selector
- 使用內容警告器存取Adobe和非AEM應用程式中的Adobe內容
recommendation-more-help
experience-cloud-kcs-help-kbarticles