Documentación AEM as a Cloud Service Guía del usuario

Integración del Selector de recursos con la aplicación de Adobe

Última actualización: 21 de marzo de 2025

Creado para:

Administrador
Usuario

^Nuevo Dynamic Media Prime y Ultimate	^Nuevo AEM Assets Ultimate	^Nueva integración de AEM Assets con Edge Delivery Services	^Nueva extensibilidad de la interfaz de usuario	^Nuevo Habilitar Dynamic Media Prime y Ultimate
Prácticas recomendadas de búsqueda	Prácticas recomendadas de metadatos	Centro de contenido	Dynamic Media con funciones de OpenAPI	Documentación de desarrollador de AEM Assets

El Selector de recursos le permite integrarse utilizando varias aplicaciones de Adobe para permitir que funcionen juntas sin problemas.

Requisitos previos

Utilice los siguientes requisitos previos si integra el Selector de recursos con una aplicación de Adobe:

Métodos de comunicación
imsOrg
imsToken
apikey

Integrar el Selector de recursos con una aplicación Adobe

En el siguiente ejemplo se muestra el uso del Selector de recursos al ejecutar una aplicación Adobe en Unified Shell o cuando ya se ha generado imsToken para la autenticación.

Incluya el paquete Selector de recursos en su código mediante la etiqueta script, tal como se muestra en las líneas 6-15 del ejemplo siguiente. Una vez cargado el script, la variable global PureJSSelectors está disponible para su uso. Defina el Selector de recursos properties como se muestra en líneas 16-23. Las propiedades imsOrg y imsToken son necesarias para la autenticación en la aplicación Adobe. La propiedad de handleSelection se utiliza para gestionar los recursos seleccionados. Para procesar el Selector de recursos, llame a la función de renderAssetSelector como se menciona en línea 17. El Selector de recursos se muestra en el elemento contenedor de <div>, como se muestra en las líneas 21 y 22.

Si sigue estos pasos, puede usar el Selector de recursos con la aplicación 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

Las propiedades de ImsAuthProps definen la información de autenticación y el flujo que usa el Selector de recursos para obtener un imsToken. Al establecer estas propiedades, puede controlar cómo debe comportarse el flujo de autenticación y registrar los agentes de escucha para varios eventos de autenticación.

Nombre de la propiedad	Descripción
`imsClientId`	Valor de cadena que representa el ID de cliente de IMS utilizado con fines de autenticación. Este valor lo proporciona Adobe y es específico de su organización de Adobe AEM CS.
`imsScope`	Describe los ámbitos utilizados en la autenticación. Los ámbitos determinan el nivel de acceso que la aplicación tiene a los recursos de su organización. Los ámbitos múltiples se pueden separar con comas.
`redirectUrl`	Representa la dirección URL a la que se redirige al usuario después de la autenticación. Este valor se suele establecer en la dirección URL actual de la aplicación. Si no se proporciona `redirectUrl`, `ImsAuthService` usa la redirectUrl utilizada para registrar `imsClientId`
`modalMode`	Un booleano que indica si el flujo de autenticación debe mostrarse en un modal (emergente) o no. Si se establece en `true`, el flujo de autenticación se mostrará en una ventana emergente. Si se establece en `false`, el flujo de autenticación se mostrará en una recarga de página completa. Nota: para una mejor experiencia de usuario, puede controlar dinámicamente este valor si el usuario tiene deshabilitada la ventana emergente del explorador.
`onImsServiceInitialized`	Una función de llamada de retorno que se llama cuando se inicializa el servicio de autenticación IMS de Adobe. Esta función toma un parámetro, `service`, que es un objeto que representa el servicio IMS de Adobe. Consulte `ImsAuthService` para obtener más detalles.
`onAccessTokenReceived`	Una función de llamada de retorno que se llama cuando se recibe un `imsToken` del servicio de autenticación IMS de Adobe. Esta función toma un parámetro, `imsToken`, que es una cadena que representa el token de acceso.
`onAccessTokenExpired`	Función de llamada de retorno a la que se llama cuando ha caducado un token de acceso. Esta función se utiliza generalmente para almacenar en déclencheur un nuevo flujo de autenticación para obtener un nuevo token de acceso.
`onErrorReceived`	Función de llamada de retorno a la que se llama cuando se produce un error durante la autenticación. Esta función toma dos parámetros: el tipo de error y el mensaje de error. El tipo de error es una cadena que representa el tipo de error y el mensaje de error es una cadena que representa el mensaje de error.

ImsAuthService

La clase ImsAuthService administra el flujo de autenticación para el Selector de recursos. Es responsable de obtener un imsToken del servicio de autenticación IMS de Adobe. imsToken se usa para autenticar al usuario y autorizar el acceso a Adobe Experience Manager como un repositorio de Assets de Cloud Service. ImsAuthService usa las propiedades ImsAuthProps para controlar el flujo de autenticación y registrar agentes de escucha para varios eventos de autenticación. Puede usar la práctica función registerAssetsSelectorsAuthService para registrar la instancia de ImsAuthService con el Selector de recursos. Las funciones siguientes están disponibles en la clase ImsAuthService. Sin embargo, si está utilizando la función registerAssetsSelectorsAuthService, no necesita llamar a estas funciones directamente.

Nombre de función	Descripción
`isSignedInUser`	Determina si el usuario ha iniciado sesión en el servicio y devuelve un valor booleano en consecuencia.
`getImsToken`	Recupera la autenticación `imsToken` del usuario que ha iniciado sesión actualmente, que se puede utilizar para autenticar solicitudes en otros servicios como la generación de _representación de recursos.
`signIn`	Inicia el proceso de inicio de sesión del usuario. Esta función utiliza `ImsAuthProps` para mostrar la autenticación en una ventana emergente o en una recarga de página completa
`signOut`	Cierra la sesión del usuario del servicio, invalidando su token de autenticación y obligándole a iniciar sesión de nuevo para acceder a los recursos protegidos. Al invocar esta función, se volverá a cargar la página actual.
`refreshToken`	Actualiza el token de autenticación del usuario que ha iniciado sesión, lo que evita que caduque y garantiza un acceso ininterrumpido a los recursos protegidos. Devuelve un nuevo token de autenticación que puede utilizarse para solicitudes posteriores.

Validación con el token de IMS proporcionado

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

Registro de llamadas de retorno al servicio 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