整合Asset Selector與Adobe應用程式 integrate-asset-selector-with-adobe-app
Asset Selector可讓您使用各種Adobe應用程式進行整合，好讓他們順暢地共同作業。
先決條件 prereqs-adobe-app
如果您整合Asset Selector與Adobe應用程式，請使用下列先決條件：
- 通訊方法
- imsOrg
- imsToken
- apikey
將資產選擇器與Adobe應用程式整合 adobe-app-integration-vanilla
下列範例示範在Unified Shell下執行Adobe應用程式或您已針對驗證產生imsToken時，資產選擇器的使用方式。
使用script標籤在您的程式碼中加入Asset Selector套件，如下列範例的 行6-15 所示。 在載入指令碼後，即可使用 PureJSSelectors 全域變數。定義資產選擇器屬性，如 行16-23 所示。 在Adobe應用程式中驗證時需要imsOrg和imsToken屬性。 handleSelection 屬性用於處理選取的資產。要轉譯資產選擇器，請呼叫 renderAssetSelector 函數，如 第 17 行 所述。資產選擇器顯示於 <div> 容器元素，如 第 21 和 22 行 所示。
按照這些步驟操作，您就可以將Asset Selector與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屬性定義Asset Selector用來取得imsToken的驗證資訊和流程。 藉由設定這些屬性，您可以控制驗證流程應該如何行為並註冊各種驗證事件的接聽程式。
imsClientIdimsScoperedirectUrlredirectUrl，ImsAuthService會使用用來登入imsClientId的redirectUrlmodalModetrue，驗證流程會以快顯視窗顯示。 如果設為false，則驗證流程會以全頁重新載入顯示。 注意： 若要獲得較好的UX，您可以在使用者停用瀏覽器快顯視窗時動態控制此值。onImsServiceInitializedservice，此引數是代表Adobe IMS服務的物件。 如需詳細資訊，請參閱ImsAuthService。onAccessTokenReceivedimsToken時所呼叫的回呼函式。 此函式接受一個引數imsToken，該引數是代表存取權杖的字串。onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
ImsAuthService類別會處理Asset Selector的驗證流程。 其負責從Adobe IMS驗證服務取得imsToken。 imsToken可用來驗證使用者，並授權以Cloud Service Assets存放庫身分存取Adobe Experience Manager。 ImsAuthService使用ImsAuthProps屬性來控制驗證流程並註冊各種驗證事件的接聽程式。 您可以使用方便的registerAssetsSelectorsAuthService函式，以資產選擇器註冊 ImsAuthService 執行個體。 ImsAuthService類別上有以下可用函式。 不過，如果您使用 registerAssetsSelectorsAuthService 函式，則不需要直接呼叫這些函式。
isSignedInUsergetImsTokenimsToken，此驗證可用於驗證其他服務的要求，例如產生資產_rendition。signInImsAuthProps在快顯視窗或整頁重新載入中顯示驗證signOutrefreshToken使用提供的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);
},
}