将Asset Selector与Adobe应用程序集成 integrate-asset-selector-with-adobe-app

Last update: Mon Jun 30 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager as a Cloud Service

创建对象：

管理员
用户

Asset Selector允许您使用各种Adobe应用程序进行集成，以使它们能够无缝地协同工作。

先决条件 prereqs-adobe-app

如果要将资产选择器与Adobe应用程序集成，请使用以下先决条件：

通信方法
imsOrg
imsToken
apikey

将资产选择器与Adobe应用程序集成 adobe-app-integration-vanilla

以下示例演示了在Unified Shell下运行Adobe应用程序或已经为身份验证生成imsToken时，资产选择器的用法。

使用script标记将资产选择器包包含在您的代码中，如以下示例的 行6-15 所示。加载该脚本后，PureJSSelectors 全局变量将可供使用。定义资产选择器属性，如 行16-23 中所示。在Adobe应用程序中身份验证需要imsOrg和imsToken属性。 handleSelection 属性用于处理选定资源。要呈现资源选择器，请调用 renderAssetSelector 函数，如 第 17 行 中所述。资源选择器将显示在 <div> 容器元素中，如 第 21 行和第 22 行 中所示。

按照这些步骤，您可以将资产选择器与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

ImsAuthProps属性定义资产选择器用于获取imsToken的身份验证信息和流程。通过设置这些属性，您可以控制身份验证流程的行为方式，并为各种身份验证事件注册侦听器。

属性名称

描述

imsClientId

表示用于身份验证的IMS客户端ID的字符串值。此值由Adobe提供，特定于您的Adobe AEM CS组织。

imsScope

描述身份验证中使用的范围。范围决定了应用程序对组织资源的访问级别。多个范围可以用逗号分隔。

redirectUrl

表示验证后用户被重定向到的URL。此值通常设置为应用程序的当前URL。如果未提供redirectUrl，ImsAuthService将使用用于注册imsClientId的redirectUrl

modalMode

布尔值，指示是否应在模态（弹出窗口）中显示身份验证流程。如果设置为true，则身份验证流程将在弹出窗口中显示。如果设置为false，则身份验证流程将以整页重新加载方式显示。 注意： 为获得更好的UX，如果用户禁用了浏览器弹出窗口，则可以动态控制此值。

onImsServiceInitialized

Adobe IMS身份验证服务初始化时调用的回调函数。此函数接受一个参数service，该参数是表示Adobe IMS服务的对象。有关更多详细信息，请参阅ImsAuthService。

onAccessTokenReceived

在从Adobe IMS身份验证服务收到imsToken时调用的回调函数。此函数接受一个参数imsToken，该参数是一个表示访问令牌的字符串。

onAccessTokenExpired

访问令牌过期时调用的回调函数。此函数通常用于触发新的身份验证流程以获取新的访问令牌。

onErrorReceived

身份验证期间发生错误时调用的回调函数。此函数采用两个参数：错误类型和错误消息。错误类型是表示错误类型的字符串，错误消息是表示错误消息的字符串。

ImsAuthService ims-auth-service

ImsAuthService类用于处理资产选择器的身份验证流程。它负责从Adobe IMS身份验证服务获取imsToken。 imsToken用于对用户进行身份验证并授权作为Cloud Service Assets存储库访问Adobe Experience Manager。 ImsAuthService使用ImsAuthProps属性来控制身份验证流并注册各种身份验证事件的侦听器。您可以使用方便的registerAssetsSelectorsAuthService函数向资产选择器注册 ImsAuthService 实例。 ImsAuthService类中有以下函数可用。但是，如果您使用 registerAssetsSelectorsAuthService 函数，则无需直接调用这些函数。

函数名称

描述

isSignedInUser

确定用户当前是否已登录到服务并相应地返回布尔值。

getImsToken

检索当前登录用户的身份验证imsToken，该身份验证可用于验证其他服务（如生成资产_rendition）的请求。

signIn

启动用户的登录流程。此函数使用ImsAuthProps在弹出窗口或全页重新加载中显示身份验证

signOut

将用户签出服务，使其身份验证令牌失效，并要求他们再次登录以访问受保护的资源。调用此函数将重新加载当前页面。

refreshToken

刷新当前登录用户的身份验证令牌，防止该令牌过期，并确保对受保护资源的访问不会中断。返回可用于后续请求的新身份验证令牌。

使用提供的IMS令牌进行验证 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>

将回调注册到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);
},
}

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab