Integrare Asset Selector con l’applicazione Adobe integrate-asset-selector-with-adobe-app
Asset Selector consente di eseguire l’integrazione utilizzando diverse applicazioni di Adobe per consentire loro di lavorare insieme senza problemi.
Prerequisiti prereqs-adobe-app
Utilizzare i seguenti prerequisiti se si integra Asset Selector con un'applicazione Adobe:
- Metodi di comunicazione
- imsOrg
- imsToken
- apikey
Integrare Asset Selector con un'applicazione Adobe adobe-app-integration-vanilla
Nell'esempio seguente viene illustrato l'utilizzo di Asset Selector durante l'esecuzione di un'applicazione Adobe in Unified Shell o quando è già stato generato imsToken per l'autenticazione.
Includi il pacchetto Asset Selector nel codice utilizzando il tag script, come mostrato nelle righe 6-15 dell'esempio seguente. Una volta caricato lo script, la variabile globale PureJSSelectors è disponibile per l’uso. Definisci il selettore risorse proprietà come mostrato nelle righe 16-23. Le proprietà imsOrg e imsToken sono entrambe necessarie per l'autenticazione nell'applicazione Adobe. La proprietà handleSelection è utilizzata per gestire le risorse selezionate. Per eseguire il rendering del Selettore risorse, chiama la funzione renderAssetSelector come indicato nella riga 17. Il Selettore risorse viene visualizzato nell’<div>elemento contenitore, come illustrato nelle righe 21 e 22.
Seguendo questi passaggi è possibile utilizzare Asset Selector con l'applicazione 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
Le proprietà ImsAuthProps definiscono le informazioni di autenticazione e il flusso utilizzati da Asset Selector per ottenere un imsToken. Impostando queste proprietà è possibile controllare il comportamento del flusso di autenticazione e registrare i listener per vari eventi di autenticazione.
imsClientIdimsScoperedirectUrlredirectUrl, ImsAuthService utilizza il redirectUrl utilizzato per registrare imsClientIdmodalModetrue, il flusso di autenticazione viene visualizzato in un popup. Se è impostato su false, il flusso di autenticazione viene visualizzato in un ricaricamento dell'intera pagina. Nota: per una migliore interfaccia utente, è possibile controllare dinamicamente questo valore se la finestra popup del browser dell'utente è disabilitata.onImsServiceInitializedservice, che è un oggetto che rappresenta il servizio Adobe IMS. Per ulteriori dettagli, vedere ImsAuthService.onAccessTokenReceivedimsToken dal servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, imsToken, che è una stringa che rappresenta il token di accesso.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
La classe ImsAuthService gestisce il flusso di autenticazione per Asset Selector. È responsabile dell'ottenimento di un imsToken dal servizio di autenticazione Adobe IMS. imsToken viene utilizzato per autenticare l'utente e autorizzare l'accesso a Adobe Experience Manager come archivio Assets Cloud Service. ImsAuthService utilizza le proprietà ImsAuthProps per controllare il flusso di autenticazione e registrare i listener per vari eventi di autenticazione. È possibile utilizzare la comoda funzione registerAssetsSelectorsAuthService per registrare l'istanza ImsAuthService con Asset Selector. Le seguenti funzioni sono disponibili nella classe ImsAuthService. Tuttavia, se si utilizza la funzione registerAssetsSelectorsAuthService, non è necessario chiamare queste funzioni direttamente.
isSignedInUsergetImsTokenimsToken per l'utente attualmente connesso, che può essere utilizzata per autenticare le richieste ad altri servizi, ad esempio per generare la _rappresentazione della risorsa.signInImsAuthProps per mostrare l'autenticazione in un popup o in un ricaricamento dell'intera paginasignOutrefreshTokenConvalida con il token IMS fornito 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>
Registrare i callback al servizio 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);
},
}