Integración del Selector de recursos con la aplicación de Adobe integrate-asset-selector-with-adobe-app
El Selector de recursos le permite integrarse utilizando varias aplicaciones de Adobe para permitirles trabajar juntos sin problemas.
Requisitos previos prereqs-adobe-app
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 adobe-app-integration-vanilla
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 de 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 ims-auth-props
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.
imsClientIdimsScoperedirectUrlredirectUrl, ImsAuthService usa la redirectUrl utilizada para registrar imsClientIdmodalModetrue, 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.onImsServiceInitializedservice, que es un objeto que representa el servicio IMS de Adobe. Consulte ImsAuthService para obtener más detalles.onAccessTokenReceivedimsToken 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.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
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.
isSignedInUsergetImsTokenimsToken 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.signInImsAuthProps para mostrar la autenticación en una ventana emergente o en una recarga de página completasignOutrefreshTokenValidación con el token de IMS proporcionado 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>
Registro de llamadas de retorno al servicio 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);
},
}