Documentazione AEM as a Cloud Service Guida utente

Integrare Asset Selector con l’applicazione Adobe

Ultimo aggiornamento: 21 marzo 2025

Creato per:

Amministratore
Utente

^Nuovo Dynamic Media Prime e Ultimate	^Nuovo AEM Assets Ultimate	^Nuova Integrazione di AEM Assets con Edge Delivery Services	^Nuovo Estensibilità interfaccia utente	^Nuovo Abilita Dynamic Media Prime e Ultimate
Best practice per la ricerca	Best practice per i metadati	Content Hub	Dynamic Media con funzionalità OpenAPI	Documentazione di AEM Assets per sviluppatori

Asset Selector (Selettore risorse) consente di integrare utilizzando diverse applicazioni Adobe per consentire loro di lavorare insieme senza problemi.

Prerequisiti

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

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

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.

Nome proprietà	Descrizione
`imsClientId`	Valore stringa che rappresenta l’ID client IMS utilizzato a scopo di autenticazione. Questo valore è fornito da Adobe ed è specifico per la tua organizzazione Adobe AEM CS.
`imsScope`	Descrive gli ambiti utilizzati nell'autenticazione. Gli ambiti determinano il livello di accesso dell'applicazione alle risorse dell'organizzazione. Più ambiti possono essere separati da virgole.
`redirectUrl`	Rappresenta l'URL a cui l'utente viene reindirizzato dopo l'autenticazione. Questo valore viene in genere impostato sull’URL corrente dell’applicazione. Se non viene fornito `redirectUrl`, `ImsAuthService` utilizza il redirectUrl utilizzato per registrare `imsClientId`
`modalMode`	Valore booleano che indica se il flusso di autenticazione deve essere visualizzato o meno in un modale (pop-up). Se è impostato su `true`, 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.
`onImsServiceInitialized`	Funzione di callback chiamata quando viene inizializzato il servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, `service`, che è un oggetto che rappresenta il servizio Adobe IMS. Per ulteriori dettagli, vedere `ImsAuthService`.
`onAccessTokenReceived`	Funzione di callback chiamata quando viene ricevuto un `imsToken` dal servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, `imsToken`, che è una stringa che rappresenta il token di accesso.
`onAccessTokenExpired`	Funzione di callback chiamata quando un token di accesso è scaduto. Questa funzione viene in genere utilizzata per attivare un nuovo flusso di autenticazione per ottenere un nuovo token di accesso.
`onErrorReceived`	Funzione di callback chiamata quando si verifica un errore durante l'autenticazione. Questa funzione accetta due parametri: il tipo di errore e il messaggio di errore. Il tipo di errore è una stringa che rappresenta il tipo di errore e il messaggio di errore è una stringa che rappresenta il messaggio di errore.

ImsAuthService

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.

Nome funzione	Descrizione
`isSignedInUser`	Determina se l'utente è attualmente connesso al servizio e restituisce di conseguenza un valore booleano.
`getImsToken`	Recupera l'autenticazione `imsToken` per l'utente attualmente connesso, che può essere utilizzata per autenticare le richieste ad altri servizi, ad esempio per generare la _rappresentazione della risorsa.
`signIn`	Avvia il processo di accesso per l'utente. Questa funzione utilizza `ImsAuthProps` per mostrare l'autenticazione in un popup o in un ricaricamento dell'intera pagina
`signOut`	Firma l’utente fuori dal servizio, invalidando il token di autenticazione e richiedendo di nuovo l’accesso per accedere alle risorse protette. Richiamando questa funzione verrà ricaricata la pagina corrente.
`refreshToken`	Aggiorna il token di autenticazione per l'utente attualmente connesso, evitando la scadenza e garantendo l'accesso ininterrotto alle risorse protette. Restituisce un nuovo token di autenticazione che può essere utilizzato per le richieste successive.

Convalida con il token IMS fornito

<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

// 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);
},
}

recommendation-more-help