Intégration du sélecteur de ressources à l’application Adobe integrate-asset-selector-with-adobe-app
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 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égration du 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 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 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 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.
imsClientIdimsScoperedirectUrlredirectUrl n’est fourni, ImsAuthService utilise redirectUrl pour enregistrer les imsClientIdmodalModetrue, 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é.onImsServiceInitializedservice, qui est un objet représentant le service Adobe IMS. Voir ImsAuthService pour plus d’informations.onAccessTokenReceivedimsToken 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.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
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.
isSignedInUsergetImsTokenimsToken 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.signInImsAuthProps pour afficher l’authentification dans un pop-up ou un rechargement complet de la pagesignOutrefreshTokenValidation avec 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 vers le 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);
},
}