與非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)屬性（例如imsScope或imsClientID）驗證該儲存庫。
設定非Adobe應用程式的資產選擇器 configure-non-adobe-app
若要為非Adobe應用程式設定「資產選擇器」，您必須先記錄布建的支援票證，然後進行整合步驟。
記錄支援票證 log-a-support-ticket
透過 Admin Console 記錄支援服務單的步驟：
-
在票證標題中新增具有AEM Assets 的 資產選擇器。
-
在說明中提供以下詳細資訊：
- Experience Manager Assets作為Cloud Service URL （方案ID和環境ID）。
- 託管非Adobe網頁應用程式的網域名稱。
整合步驟 non-adobe-app-integration-steps
整合Asset Selector與非Adobe應用程式時，請使用這個範例index.html檔案進行驗證。
使用Script標籤存取Asset Selector套件，如範例index.html檔案的 第9 行到 第11 行所示。
範例的 第14 行到 第38 行說明IMS流程屬性，例如imsClientId、imsScope和redirectURL。 函式要求您至少定義imsClientId和imsScope屬性之一。 如果您未定義redirectURL的值，則會使用使用者端ID的註冊重新導向URL。
由於您尚未產生imsToken，請使用registerAssetsSelectorsAuthService和renderAssetSelectorWithAuthFlow函式，如範例index.html檔案的第40行至第50行所示。 使用renderAssetSelectorWithAuthFlow之前的registerAssetsSelectorsAuthService函式，以透過資產選擇器註冊imsToken。 Adobe建議您在具現化元件時呼叫registerAssetsSelectorsAuthService。
在const props區段中定義驗證和其他Assetsas a Cloud Service存取相關屬性，如範例index.html檔案的 行54 到 行60 所示。
在 第65 行中提到的PureJSSelectors全域變數是用來在網頁瀏覽器中轉譯Asset Selector。
資產選擇器已在<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
invalid_credentials All session cookies are empty錯誤。