Documentatie AEM as a Cloud Service Handboek

Asset Selector integreren met Adobe-toepassing

Laatst bijgewerkt: 21 maart 2025

Gemaakt voor:

Beheerder
Gebruiker

^NieuweDynamische Media Prime en Ultimate	^NieuweAEM Assets Ultimate	^Nieuweintegratie van AEM Assets met Edge Delivery Services	^NieuweUitbreidbaarheid UI	^Nieuwlaat Dynamische Media Prime en Ultimate toe
Beste praktijken van het Onderzoek	Beste praktijken van Meta-gegevens	Content Hub	Dynamische Media met mogelijkheden OpenAPI	de ontwikkelaarsdocumentatie van AEM Assets

Met de functie Asset Selector kunt u verschillende Adobe-toepassingen integreren, zodat deze naadloos kunnen samenwerken.

Vereisten

Gebruik de volgende voorwaarden als u Asset Selector integreert met een Adobe -toepassing:

Communicatiemethoden
imsOrg
imsToken
apikey

Asset Selector integreren met een Adobe -toepassing

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

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.

Eigenschapnaam	Beschrijving
`imsClientId`	Een tekenreekswaarde die de IMS client-id vertegenwoordigt die voor verificatiedoeleinden wordt gebruikt. Deze waarde wordt geleverd door Adobe en is specifiek voor uw Adobe AEM CS-organisatie.
`imsScope`	Beschrijft het werkingsgebied dat in authentificatie wordt gebruikt. Het werkingsgebied bepaalt het niveau van toegang dat de toepassing aan uw organisatiemiddelen heeft. Meerdere bereiken kunnen worden gescheiden door komma's.
`redirectUrl`	Geeft de URL aan waar de gebruiker na verificatie opnieuw wordt omgeleid. Deze waarde wordt doorgaans ingesteld op de huidige URL van de toepassing. Als een `redirectUrl` niet wordt opgegeven, gebruikt `ImsAuthService` de redirectUrl die wordt gebruikt om de `imsClientId` te registreren
`modalMode`	Een Booleaanse waarde die aangeeft of de verificatiestroom al dan niet moet worden weergegeven in een modaal (pop-upmenu). Indien ingesteld op `true` , 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.
`onImsServiceInitialized`	Een callback-functie die wordt aangeroepen wanneer de Adobe IMS-verificatieservice wordt geïnitialiseerd. Deze functie heeft één parameter, `service` , die een object is dat de Adobe IMS-service vertegenwoordigt. Zie `ImsAuthService` voor meer informatie.
`onAccessTokenReceived`	Een callback-functie die wordt aangeroepen wanneer een `imsToken` wordt ontvangen van de Adobe IMS-verificatieservice. Deze functie heeft één parameter, `imsToken`, die een tekenreeks is die het toegangstoken vertegenwoordigt.
`onAccessTokenExpired`	Een callback functie die wordt geroepen wanneer een toegangstoken is verlopen. Deze functie wordt typisch gebruikt om een nieuwe authentificatiestroom teweeg te brengen om een nieuw toegangstoken te verkrijgen.
`onErrorReceived`	Een callback functie die wordt geroepen wanneer een fout tijdens authentificatie voorkomt. Deze functie heeft twee parameters: het fouttype en het foutbericht. Het fouttype is een tekenreeks die het type fout vertegenwoordigt en het foutbericht is een tekenreeks die het foutbericht vertegenwoordigt.

ImsAuthService

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.

Functienaam	Beschrijving
`isSignedInUser`	Bepaalt of de gebruiker momenteel binnen aan de dienst wordt ondertekend en een booleaanse waarde dienovereenkomstig terugkeert.
`getImsToken`	Haalt de verificatie `imsToken` op voor de momenteel aangemelde gebruiker, die kan worden gebruikt om aanvragen voor andere services, zoals het genereren van asset_rendition, te verifiëren.
`signIn`	Hiermee wordt het aanmeldingsproces voor de gebruiker gestart. Deze functie gebruikt `ImsAuthProps` om verificatie weer te geven in een pop-up of een volledige pagina die opnieuw wordt geladen
`signOut`	Signs the user out of the service, invalidating their authentication token and require them to sign in again to access protected resources. Als u deze functie aanroept, wordt de huidige pagina opnieuw geladen.
`refreshToken`	Verfrist het authentificatietoken voor de momenteel ondertekende gebruiker, verhinderend het en ononderbroken toegang tot beschermde middelen te verzekeren. Keert een nieuw authentificatietoken terug dat voor verdere verzoeken kan worden gebruikt.

Validatie met opgegeven 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

// 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