Intégration du sélecteur de ressources à l’application Adobe integrate-asset-selector-with-adobe-app
Le sélecteur de ressources vous permet d’intégrer à l’aide de diverses applications Adobe afin de leur permettre de travailler ensemble de manière transparente.
Conditions préalables prereqs-adobe-app
Utilisez les conditions préalables suivantes si vous intégrez le sélecteur de ressources à une application Adobe :
- Méthodes de communication
- imsOrg
- imsToken
- apikey
Intégrer le sélecteur de ressources à une application Adobe adobe-app-integration-vanilla
L’exemple suivant illustre l’utilisation du sélecteur de ressources lors de l’exécution d’une application Adobe sous Shell unifié ou lorsque imsToken est déjà généré 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 ims-auth-props
Les propriétés ImsAuthProps définissent les informations d’authentification et le flux que le sélecteur de ressources utilise pour obtenir un imsToken. En définissant ces propriétés, vous pouvez contrôler le comportement du flux d’authentification et enregistrer les écouteurs pour divers événements d’authentification.
imsClientIdimsScoperedirectUrlredirectUrl n'est pas fourni, ImsAuthService utilise redirectUrl utilisé pour enregistrer le imsClientIdmodalModetrue, le flux d’authentification s’affiche dans une fenêtre contextuelle. S’il est défini sur false, le flux d’authentification s’affiche dans un rechargement de page complet. Remarque : pour un meilleur UX, vous pouvez contrôler dynamiquement cette valeur si la fenêtre contextuelle de l’utilisateur est désactivée.onImsServiceInitializedservice, qui est un objet représentant le service Adobe IMS. Voir ImsAuthService pour plus de détails.onAccessTokenReceivedimsToken est reçu du service d’authentification Adobe IMS. Cette fonction utilise un paramètre, imsToken, qui est une chaîne représentant le jeton d’accès.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
La classe ImsAuthService gère le flux d’authentification pour le sélecteur de ressources. Il est responsable de l'obtention d'un imsToken auprès du service d'authentification Adobe IMS. imsToken est utilisé pour authentifier l’utilisateur et autoriser l’accès à Adobe Experience Manager en tant que référentiel Assets Cloud Service. ImsAuthService utilise les propriétés ImsAuthProps pour contrôler le flux d’authentification et enregistrer les é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 sur la classe ImsAuthService. Cependant, si vous utilisez la fonction registerAssetsSelectorsAuthService, vous n’avez pas besoin d’appeler directement ces fonctions.
isSignedInUsergetImsTokenimsToken pour l’utilisateur actuellement connecté, qui peut être utilisée pour authentifier les requêtes sur d’autres services, comme la génération de la ressource _rendition.signInImsAuthProps pour afficher l’authentification dans une fenêtre contextuelle ou un rechargement de page complet.signOutrefreshTokenValidation avec le jeton IMS fourni validation-ims-token
<script>
const apiToken="<valid IMS token>";
function handleSelection(selection) {
console.log("Selected asset: ", selection);
};
function renderAssetSelectorInline() {
console.log("initializing Asset Selector");
const props = {
"repositoryId": "delivery-p64502-e544757.adobeaemcloud.com",
"apiKey": "ngdm_test_client",
"imsOrg": "<IMS org>",
"imsToken": apiToken,
handleSelection,
hideTreeNav: true
}
const container = document.getElementById('asset-selector-container');
PureJSSelectors.renderAssetSelector(container, props);
}
$(document).ready(function() {
renderAssetSelectorInline();
});
</script>
Enregistrement des rappels au service IMS register-callback-ims-service
// object `imsProps` to be defined as below
let imsProps = {
imsClientId: <IMS Client Id>,
imsScope: "openid",
redirectUrl: window.location.href,
modalMode: true,
adobeImsOptions: {
modalSettings: {
allowOrigin: window.location.origin,
},
useLocalStorage: true,
},
onImsServiceInitialized: (service) => {
console.log("onImsServiceInitialized", service);
},
onAccessTokenReceived: (token) => {
console.log("onAccessTokenReceived", token);
},
onAccessTokenExpired: () => {
console.log("onAccessTokenError");
// re-trigger sign-in flow
},
onErrorReceived: (type, msg) => {
console.log("onErrorReceived", type, msg);
},
}