Asset Selector integreren met Adobe-toepassing integrate-asset-selector-with-adobe-app
Met Asset Selector kunt u de verschillende toepassingen voor Adobe integreren, zodat deze naadloos kunnen samenwerken.
Vereisten prereqs-adobe-app
Gebruik de volgende voorwaarden als u Asset Selector integreert met een Adobe -toepassing:
- Communicatiemethoden
- imsOrg
- imsToken
- apikey
Asset Selector integreren met een Adobe -toepassing adobe-app-integration-vanilla
In het volgende voorbeeld wordt het gebruik van Asset Selector getoond wanneer u een Adobe -toepassing uitvoert onder Unified Shell of wanneer u imsToken al hebt gegenereerd voor verificatie.
Omvat het pakket van de Selecteur van Activa in uw code gebruikend de script markering, zoals aangetoond in lijnen 6-15 van het hieronder voorbeeld. Wanneer het script is geladen, is de algemene variabele PureJSSelectors beschikbaar voor gebruik. Bepaal de Eigenschappen van de Selecteur van Activa 🔗 zoals aangetoond in lijnen 16-23. De eigenschappen imsOrg en imsToken zijn beide vereist voor verificatie in een Adobe toepassing. De eigenschap handleSelection wordt gebruikt om de geselecteerde elementen af te handelen. Om de Kiezer van Activa terug te geven, roep de renderAssetSelector functie zoals vermeld in lijn 17. De selecteur van Activa wordt getoond in het <div> containerelement, zoals aangetoond in lijnen 21 en 22.
Als u deze stappen uitvoert, kunt u Asset Selector gebruiken met uw Adobe -toepassing.
<!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
De ImsAuthProps -eigenschappen definiëren de verificatiegegevens en de stroom die de Asset Selector gebruikt om een imsToken -element te verkrijgen. Door deze eigenschappen te plaatsen, kunt u controleren hoe de authentificatiestroom zich zou moeten gedragen en luisteraars voor diverse authentificatiegebeurtenissen registreren.
imsClientIdimsScoperedirectUrlredirectUrl niet wordt opgegeven, gebruikt ImsAuthService de redirectUrl die wordt gebruikt om de imsClientId te registrerenmodalModetrue , wordt de verificatiestroom weergegeven in een pop-up. Indien ingesteld op false , wordt de verificatiestroom weergegeven in een volledige pagina die opnieuw wordt geladen. Nota: voor betere UX, kunt u deze waarde dynamisch controleren als de gebruiker browser pop-up gehandicapten heeft.onImsServiceInitializedservice , die een object is dat de Adobe IMS-service vertegenwoordigt. Zie ImsAuthService voor meer informatie.onAccessTokenReceivedimsToken wordt ontvangen van de Adobe IMS-verificatieservice. Deze functie heeft één parameter, imsToken, die een tekenreeks is die het toegangstoken vertegenwoordigt.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
De ImsAuthService -klasse handelt de verificatiestroom voor de Asset Selector af. Het is verantwoordelijk voor het verkrijgen van een imsToken van de Adobe IMS-verificatieservice. De imsToken wordt gebruikt om de gebruiker te verifiëren en toegang tot de Adobe Experience Manager toe te staan als een Cloud Service Assets-opslagplaats. ImsAuthService gebruikt de ImsAuthProps eigenschappen om de authentificatiestroom te controleren en luisteraars voor diverse authentificatiegebeurtenissen te registreren. U kunt de geschikte registerAssetsSelectorsAuthService functie gebruiken om de ImsAuthService instantie met de Selecteur van Activa te registreren. De volgende functies zijn beschikbaar voor de ImsAuthService -klasse. Nochtans, als u de registerAssetsSelectorsAuthService functie gebruikt, te hoeven u deze functies niet direct te roepen.
isSignedInUsergetImsTokenimsToken op voor de momenteel aangemelde gebruiker, die kan worden gebruikt om aanvragen voor andere services, zoals het genereren van asset_rendition, te verifiëren.signInImsAuthProps om verificatie weer te geven in een pop-up of een volledige pagina die opnieuw wordt geladensignOutrefreshTokenValidatie met opgegeven IMS-token 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>
Callbacks van de dienst van IMS registreren 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);
},
}