將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應用程式:

  1. 在您的Angular應用程式中使用assets-upload套件組合的UMD匯出,因為公用npm登入中無法使用@assets/upload套件。

  2. 重複使用UMD PureJSSelectors Content Advisor整合中的IMS驗證工作階段:

    • 使用PureJSSelectors.registerContentAdvisorAuthService搭配onAccessTokenReceived回呼取得存取權杖。
    • 將取得的權杖傳遞至上傳MFE的apiToken prop。
  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