与非Adobe应用程序集成 integrate-asset-selector-non-adobe-app

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

先决条件 prereqs-non-adobe-app

如果要将Asset Selector与非Adobe应用程序集成,请使用以下先决条件:

  • 通信方法
  • imsClientId
  • imsScope
  • redirectUrl
  • imsOrg
  • apikey

当您将Experience Manager Assets存储库与非Adobe应用程序集成时,Asset Selector支持使用Identity Management System (IMS)属性(如imsScopeimsClientID)对其进行身份验证。

为非Adobe应用程序配置资源选择器 configure-non-adobe-app

要为非Adobe应用程序配置资产选择器,必须首先记录用于预配的支持票证,然后执行集成步骤。

记录支持票证 log-a-support-ticket

通过 Admin Console 记录支持工单的步骤:

  1. 在票证标题中添加带有AEM Assets ​资源选择器。

  2. 请在描述中提供以下详细信息:

    • Experience Manager Assets作为Cloud Service URL(项目ID和环境ID)。
    • 托管非AdobeWeb应用程序的域名。

集成步骤 non-adobe-app-integration-steps

在将Asset Selector与非Adobe应用程序集成时,使用此示例index.html文件进行身份验证。

使用Script标记访问资产选择器包,如示例index.html文件的​ 第9 ​行到​ 第11 ​行所示。

示例的​ 行14 ​到​ 行38 ​描述了IMS流属性,如imsClientIdimsScoperedirectURL。 函数要求您至少定义imsClientIdimsScope属性之一。 如果您没有为redirectURL定义值,则使用客户端ID的注册重定向URL。

由于您没有生成imsToken,请使用registerAssetsSelectorsAuthServicerenderAssetSelectorWithAuthFlow函数,如示例index.html文件的第40行至第50行所示。 使用renderAssetSelectorWithAuthFlow之前的registerAssetsSelectorsAuthService函数通过资产选择器注册imsToken。 Adobe建议在实例化组件时调用registerAssetsSelectorsAuthService

const props部分中定义身份验证和其他Assetsas a Cloud Service访问相关的属性,如示例index.html文件的​ 行54 ​到​ 行60 ​所示。

行65 ​中提到的PureJSSelectors全局变量用于呈现Web浏览器中的资产选择器。

资产选择器在<div>容器元素中呈现,如​ 行74 ​到​ 行81 ​中所述。 此示例使用对话框来显示资源选择器。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Asset Selectors</title>
    <link rel="stylesheet" href="index.css">
    <script id="asset-selector"
        src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
    <script>

        const imsProps = {
            imsClientId: "<obtained from IMS team>",
            imsScope: "openid, <other scopes>",
            redirectUrl: window.location.href,
            modalMode: true, // false to open in a full page reload flow
            onImsServiceInitialized: (service) => {
                // invoked when the ims service is initialized and is ready
                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);
            },
        }

        function load() {
            const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
            imsInstance = registeredTokenService;
        };

        // initialize the IMS flow before attempting to render the asset selector
        load();


        //function that will render the asset selector
            const otherProps = {
            // any other props supported by asset selector
            }
            const assetSelectorProps = {
                "imsOrg": "imsorg",
                ...otherProps
            }
             // container element on which you want to render the AssetSelector/DestinationSelector component
            const container = document.getElementById('asset-selector');

            /// Use the PureJSSelectors in globals to render the AssetSelector/DestinationSelector component
            PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
                const assetSelectorDialog = document.getElementById('asset-selector-dialog');
                assetSelectorDialog.showModal();
            });
        }
    </script>

</head>
<body class="asset-selectors">
    <div>
        <button onclick="renderAssetSelectorWithAuthFlowFlow()">Asset Selector - Select Assets with Ims Flow</button>
    </div>
        <dialog id="asset-selector-dialog">
            <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
            </div>
        </dialog>
    </div>
</body>

</html>

无法访问投放存储库 unable-to-access-delivery-repository

TIP
如果您已使用注册登录工作流集成资产选择器,但仍无法访问投放存储库,请确保清理了浏览器Cookie。 否则,您最终会在控制台中收到invalid_credentials All session cookies are empty错误。
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab