Intégrer la sélection de destinations et de chargements du gestionnaire d’accès AEM dans une application Angular

Cet article explique comment intégrer des fonctions de chargement et de sélection de destination du gestionnaire d’accès AEM dans une application Angular à l’aide de modules UMD. Il explique également comment réutiliser l’authentification IMS et fournir une sélection de dossiers de destination. Pour résoudre ce problème, utilisez l’exportation UMD du lot de chargement de ressources, transmettez le jeton d’accès IMS au MFE de chargement et indiquez le chemin d’accès au dossier sélectionné via targetUploadPath.

Description description

Environnement

  • Adobe Experience Manager as a Cloud Service
  • Adobe Experience Manager Assets avec gestionnaire de contenu
  • Application Angular personnalisée utilisant des modules UMD

Symptômes

  • Le package @assets/upload n’est pas disponible dans le registre npm public.
  • L’intégration nécessite la réutilisation d’une session d’authentification IMS.
  • L’intégration nécessite une logique personnalisée pour sélectionner le dossier de destination.

Résolution resolution

Pour intégrer le chargement du gestionnaire d’accès et la sélection de destination dans votre application Angular, procédez comme suit :

  1. Utilisez l’exportation UMD du lot assets-upload dans votre application Angular, car le package @assets/upload n’est pas disponible dans le registre npm public.

  2. Réutilisez la session d’authentification IMS à partir de l’intégration du gestionnaire d’accès UMD PureJSSelectors :

    • Utilisez PureJSSelectors.registerContentAdvisorAuthService avec le rappel onAccessTokenReceived pour obtenir le jeton d’accès.
    • Transmettez le jeton obtenu à la prop apiToken du MFE de téléchargement.
  3. Implémentez la sélection du dossier de destination :

    • Fournissez la targetUploadPath car le composant AllInOneUpload ne fournit pas d’interface utilisateur pour sélectionner le dossier de destination.
    • Utilisez le MFE DestinationSelector pour permettre aux utilisateurs de sélectionner le dossier de destination.
    • Utilisez l’exportation PureJSSelectors.renderDestinationSelectorWithAuthFlow pour effectuer le rendu de DestinationSelector avec son flux d’authentification.
    • Une fois que l’utilisateur a sélectionné un dossier, transmettez le chemin d’accès sélectionné au MFE de téléchargement en tant que targetUploadPath.
  4. Après avoir implémenté l’intégration, vérifiez les points suivants :

    • L’interface utilisateur de chargement s’affiche dans l’application Angular.
    • La session d’authentification IMS est réutilisée.
    • Les chargements réussissent dans le dossier de destination sélectionné.

Remarque : reportez-vous au référentiel d’exemples Adobe officiel pour un exemple Angular complet illustrant l’intégration du module UMD.

Lecture connexe

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