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:
-
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. -
Wiederverwenden der IMS-Authentifizierungssitzung aus der UMD PureJSelectors Content Advisor -Integration:
- Verwenden Sie
PureJSSelectors.registerContentAdvisorAuthServicemit demonAccessTokenReceivedCallback, um das Zugriffstoken abzurufen. - Übergeben Sie das erhaltene Token an die
apiToken-Prop des Upload-MFE.
- Verwenden Sie
-
Auswahl des Zielordners implementieren:
- Stellen Sie die
targetUploadPathbereit, da dieAllInOneUploadkeine 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
targetUploadPathan den Upload-MFE.
- Stellen Sie die
-
Ü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 .