Intégration du sélecteur de ressources à l’application Adobe

Dernière mise à jour : 22 mars 2025

Créé pour :

  • Administration
  • Utilisateur ou utilisatrice
Nouveau Dynamic Media Prime et UltimateNouveau AEM Assets UltimateNouvelle Intégration d’AEM Assets à Edge Delivery ServicesNouveau Extensibilité de l’interface utilisateurNouveau Activation de Dynamic Media Prime et Ultimate
Bonnes pratiques de rechercheBonnes pratiques relatives aux métadonnéesHub de contenusFonctionnalités Dynamic Media avec OpenAPIDocumentation de développement pour AEM Assets

Le sélecteur de ressources vous permet de les intégrer à l’aide de diverses applications Adobe afin de leur permettre de travailler ensemble en toute transparence.

Prérequis

Utilisez les conditions préalables suivantes si vous intégrez le sélecteur de ressources à une application Adobe :

Intégration du sélecteur de ressources à une application Adobe

L’exemple suivant illustre l’utilisation du sélecteur de ressources lors de l’exécution d’une application Adobe sous Unified Shell ou lorsque vous avez déjà généré des imsToken pour l’authentification.

Insérez le package Sélecteur de ressources dans votre code à l’aide de la balise script, comme illustré dans les lignes 6 à 15 de l’exemple ci-dessous. Une fois le script chargé, vous pouvez utiliser la variable globale PureJSSelectors. Définissez les propriétés du sélecteur de ressources comme illustré dans les lignes 16 à 23. Les propriétés imsOrg et imsToken sont toutes deux requises pour l’authentification dans l’application Adobe. La propriété handleSelection sert à gérer les ressources sélectionnées. Pour effectuer le rendu du sélecteur de ressources, appelez la fonction renderAssetSelector comme indiqué dans la ligne 17. Le sélecteur de ressources s’affiche dans l’élément de conteneur <div>, comme indiqué dans les lignes 21 et 22.

En suivant ces étapes, vous pouvez utiliser le sélecteur de ressources avec votre application Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Asset Selector</title>
    <script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
    <script>
        // get the container element in which we want to render the AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in Adobe application
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

ImsAuthProps

Les propriétés ImsAuthProps définissent les informations d’authentification et le flux que le sélecteur de ressources utilise pour obtenir une imsToken. En définissant ces propriétés, vous pouvez contrôler le comportement du flux d’authentification et enregistrer des écouteurs pour divers événements d’authentification.

Nom de la propriétéDescription
imsClientIdValeur de chaîne représentant l’identifiant client IMS utilisé à des fins d’authentification. Cette valeur est fournie par Adobe et est spécifique à votre organisation Adobe AEM CS.
imsScopeDécrit les portées utilisées dans l’authentification. Les portées déterminent le niveau d’accès de l’application aux ressources de votre organisation. Plusieurs portées peuvent être séparées par des virgules.
redirectUrlReprésente l’URL de redirection de l’utilisateur après l’authentification. Cette valeur est généralement définie sur l’URL actuelle de l’application. Si aucun redirectUrl n’est fourni, ImsAuthService utilise redirectUrl pour enregistrer les imsClientId
modalModeValeur booléenne indiquant si le flux d’authentification doit être affiché dans une fenêtre modale (pop-up) ou non. S’il est défini sur true, le flux d’authentification s’affiche dans un pop-up. S’il est défini sur false, le flux d’authentification s’affiche lors d’un rechargement complet de la page. Remarque : pour une meilleure expérience utilisateur, vous pouvez contrôler dynamiquement cette valeur si le pop-up du navigateur est désactivé.
onImsServiceInitializedUne fonction de rappel appelée lors de l’initialisation du service d’authentification Adobe IMS. Cette fonction accepte un paramètre, service, qui est un objet représentant le service Adobe IMS. Voir ImsAuthService pour plus d’informations.
onAccessTokenReceivedUne fonction de rappel appelée lorsqu’un imsToken est reçu du service d’authentification Adobe IMS. Cette fonction accepte un paramètre, imsToken, qui est une chaîne représentant le jeton d’accès.
onAccessTokenExpiredFonction de rappel appelée lorsqu’un jeton d’accès a expiré. Cette fonction est généralement utilisée pour déclencher un nouveau flux d’authentification afin d’obtenir un nouveau jeton d’accès.
onErrorReceivedUne fonction de rappel appelée lorsqu’une erreur se produit lors de l’authentification. Cette fonction utilise deux paramètres : le type d’erreur et le message d’erreur. Le type d’erreur est une chaîne représentant le type d’erreur et le message d’erreur est une chaîne représentant le message d’erreur.

ImsAuthService

ImsAuthService classe gère le flux d’authentification pour le sélecteur de ressources. Il est chargé d’obtenir un imsToken du service d’authentification Adobe IMS. Le imsToken permet d’authentifier l’utilisateur et d’autoriser l’accès au référentiel Adobe Experience Manager as a Cloud Service Assets. ImsAuthService utilise les propriétés ImsAuthProps pour contrôler le flux d’authentification et enregistrer des écouteurs pour divers événements d’authentification. Vous pouvez utiliser la fonction registerAssetsSelectorsAuthService pratique pour enregistrer l’instance ImsAuthService avec le sélecteur de ressources. Les fonctions suivantes sont disponibles dans la classe ImsAuthService. Cependant, si vous utilisez la fonction registerAssetsSelectorsAuthService, vous n’avez pas besoin d’appeler directement ces fonctions.

Nom de la fonctionDescription
isSignedInUserDétermine si l’utilisateur est actuellement connecté au service et renvoie une valeur booléenne en conséquence.
getImsTokenRécupère le imsToken d’authentification de l’utilisateur actuellement connecté, qui peut être utilisé pour authentifier des requêtes à d’autres services, tels que la génération du _rendu de ressource.
signInLance le processus de connexion de l’utilisateur. Cette fonction utilise le ImsAuthProps pour afficher l’authentification dans un pop-up ou un rechargement complet de la page
signOutDéconnecte l’utilisateur du service, invalide son jeton d’authentification et exige qu’il se reconnecte pour accéder aux ressources protégées. Appeler cette fonction recharge la page active.
refreshTokenActualise le jeton d’authentification de l’utilisateur actuellement connecté, ce qui empêche son expiration et garantit un accès ininterrompu aux ressources protégées. Renvoie un nouveau jeton d’authentification pouvant être utilisé pour les requêtes suivantes.