Integrieren des AEM Content Advisor-Uploads und der Zielauswahl in ein Angular-Programm

In diesem Artikel wird erläutert, wie Sie mithilfe von UMD-Modulen Funktionen zum Hochladen von AEM Content Advisor und zur Zielauswahl in eine Angular-Anwendung integrieren können. Außerdem wird erläutert, wie die IMS-Authentifizierung wiederverwendet und die Auswahl des Zielordners bereitgestellt wird. Um dies zu beheben, verwenden Sie den UMD-Export des Assets-Upload-Bundles, übergeben Sie das IMS-Zugriffstoken an den Upload-MFE und geben Sie den ausgewählten Ordnerpfad über targetUploadPath an.

Beschreibung description

Umgebung

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets mit Content Advisor
  • Benutzerdefinierte Angular-Anwendung mit UMD-Modulen

Symptome

  • Das @assets/upload-Paket ist nicht in der öffentlichen npm-Registrierung verfügbar.
  • Die Integration erfordert die Wiederverwendung einer IMS-Authentifizierungssitzung.
  • Die Integration erfordert benutzerdefinierte Logik zur Auswahl des Zielordners.

Lösung resolution

Führen Sie die folgenden Schritte aus, um den Content Advisor-Upload und die Zielauswahl in Ihr Angular-Programm zu integrieren:

  1. Verwenden Sie den UMD-Export des assets-upload-Bundles in Ihrer Angular-Anwendung, da das @assets/upload-Paket nicht in der öffentlichen npm-Registrierung verfügbar ist.

  2. Wiederverwenden der IMS-Authentifizierungssitzung aus der UMD PureJSelectors Content Advisor -Integration:

    • Verwenden Sie PureJSSelectors.registerContentAdvisorAuthService mit dem onAccessTokenReceived Callback, um das Zugriffstoken abzurufen.
    • Übergeben Sie das erhaltene Token an die apiToken-Prop des Upload-MFE.
  3. Auswahl des Zielordners implementieren:

    • Stellen Sie die targetUploadPath bereit, da die AllInOneUpload keine Benutzeroberfläche zur Auswahl des Zielordners bereitstellt.
    • Verwenden Sie den DestinationSelector-MFE, damit Benutzerinnen und Benutzer den Zielordner auswählen können.
    • Verwenden Sie den PureJSSelectors.renderDestinationSelectorWithAuthFlow-Export, um den DestinationSelector mit seinem Authentifizierungsfluss zu rendern.
    • Nachdem der Benutzer einen Ordner ausgewählt hat, übergeben Sie den ausgewählten Pfad wie targetUploadPath an den Upload-MFE.
  4. Überprüfen Sie nach der Implementierung der Integration Folgendes:

    • Die Upload-Benutzeroberfläche wird in der Angular-Anwendung gerendert.
    • Die IMS-Authentifizierungssitzung wird wiederverwendet.
    • Uploads in den ausgewählten Zielordner erfolgreich abgeschlossen.

Hinweis: Ein vollständiges Angular-Beispiel, das die UMD-Modulintegration zeigt, finden Sie im offiziellen Adobe-Beispiel-Repository .

Verwandtes Lesen

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