与非Adobe应用程序集成 integrate-asset-selector-non-adobe-app
Asset Selector允许您使用各种非Adobe或第三方应用程序进行集成，以使它们能够无缝地协同工作。
先决条件 prereqs-non-adobe-app
如果您要将资源选择器与非Adobe应用程序集成，请使用以下先决条件：
- 通信方法
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
将资产选择器与非Adobe应用程序集成时，该资产选择器支持使用Identity Management System (IMS)属性（如Experience Manager Assets或imsScope）对imsClientID存储库进行身份验证。
为非Adobe应用程序配置资源选择器 configure-non-adobe-app
要为非Adobe应用程序配置Asset Selector，您必须先记录用于预配的支持票证，然后执行集成步骤。
记录支持票证 log-a-support-ticket
通过 Admin Console 记录支持工单的步骤：
-
在票证标题中添加带有AEM Assets 的 资源选择器。
-
请在描述中提供以下详细信息：
- Experience Manager Assets作为Cloud Service URL（项目ID和环境ID）。
- 托管非Adobe Web应用程序的域名。
集成步骤 non-adobe-app-integration-steps
在将Asset Selector与非Adobe应用程序集成时，使用此示例index.html文件进行身份验证。
使用Script标记访问资产选择器包，如示例 文件的 第9 行到 第11index.html行所示。
示例的 行14 到 行38 描述了IMS流属性，如imsClientId、imsScope和redirectURL。 函数要求您至少定义imsClientId和imsScope属性之一。 如果您没有为redirectURL定义值，则使用客户端ID的注册重定向URL。
由于您没有生成imsToken，请使用registerAssetsSelectorsAuthService和renderAssetSelectorWithAuthFlow函数，如示例index.html文件的第40行至第50行所示。 使用registerAssetsSelectorsAuthService之前的renderAssetSelectorWithAuthFlow函数通过资产选择器注册imsToken。 Adobe建议在实例化组件时调用registerAssetsSelectorsAuthService。
在const props部分中定义身份验证和其他Assets as a Cloud Service访问相关的属性，如示例 文件的 行54 到 行60index.html所示。
PureJSSelectors行65 中提到的 全局变量用于呈现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
function renderAssetSelectorWithAuthFlowFlow() {
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
invalid_credentials All session cookies are empty错误。