整合Asset Selector與Adobe應用程式

最後更新： 2025年3月21日

建立對象：

  • 管理員
  • 使用者
新 Dynamic Media Prime和Ultimate新 AEM Assets Ultimate新 AEM Assets與Edge Delivery Services整合新 UI擴充性新 啟用Dynamic Media Prime和Ultimate
搜尋最佳實務中繼資料最佳實務Content Hub具有 OpenAPI 功能的 Dynamic MediaAEM Assets 開發人員文件

Asset Selector可讓您整合使用各種Adobe應用程式，讓這些應用程式緊密合作。

先決條件

如果您整合Asset Selector與Adobe應用程式，請使用下列先決條件：

將資產選擇器與Adobe應用程式整合

下列範例示範在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

ImsAuthProps屬性定義Asset Selector用來取得imsToken的驗證資訊和流程。 藉由設定這些屬性，您可以控制驗證流程應該如何行為並註冊各種驗證事件的接聽程式。

屬性名稱描述
imsClientId代表用於驗證目的之IMS使用者端ID的字串值。 此值由Adobe提供，且為您的Adobe AEM CS組織專用。
imsScope說明用於驗證的範圍。 範圍會決定應用程式對貴組織資源的存取層級。 多個範圍可以用逗號分隔。
redirectUrl代表驗證後重新導向使用者的URL。 此值通常設定為應用程式目前的URL。 如果未提供redirectUrl，ImsAuthService會使用用來登入imsClientId的redirectUrl
modalMode表示驗證流程是否應該顯示在強制回應視窗（快顯視窗）中的布林值。 如果設為true，驗證流程會以快顯視窗顯示。 如果設為false，則驗證流程會以全頁重新載入顯示。 注意： ​若要獲得較好的UX，您可以在使用者停用瀏覽器快顯視窗時動態控制此值。
onImsServiceInitializedAdobe IMS驗證服務初始化時呼叫的回呼函式。 此函式接受一個引數service，此引數是代表Adobe IMS服務的物件。 如需詳細資訊，請參閱ImsAuthService。
onAccessTokenReceived從Adobe IMS驗證服務收到imsToken時所呼叫的回呼函式。 此函式接受一個引數imsToken，該引數是代表存取權杖的字串。
onAccessTokenExpired當存取權杖過期時所呼叫的回呼函式。 此函式通常用於觸發新的驗證流程，以取得新的存取權杖。
onErrorReceived驗證期間發生錯誤時所呼叫的回呼函式。 此函式採用兩個引數：錯誤型別和錯誤訊息。 錯誤型別是代表錯誤型別的字串，而錯誤訊息是代表錯誤訊息的字串。

ImsAuthService

ImsAuthService類別會處理Asset Selector的驗證流程。 其負責從Adobe IMS驗證服務取得imsToken。 imsToken可用來驗證使用者，並授權以Cloud Service Assets存放庫身分存取Adobe Experience Manager。 ImsAuthService使用ImsAuthProps屬性來控制驗證流程並註冊各種驗證事件的接聽程式。 您可以使用方便的registerAssetsSelectorsAuthService函式，以資產選擇器註冊​ ImsAuthService ​執行個體。 ImsAuthService類別上有以下可用函式。 不過，如果您使用​ registerAssetsSelectorsAuthService ​函式，則不需要直接呼叫這些函式。

函式名稱描述
isSignedInUser判斷使用者目前是否已登入服務並據此傳回布林值。
getImsToken擷取目前登入使用者的驗證imsToken，此驗證可用於驗證其他服務的要求，例如產生資產_rendition。
signIn起始使用者的登入程式。 此函式使用ImsAuthProps在快顯視窗或整頁重新載入中顯示驗證
signOut將使用者登出服務，讓其驗證Token失效，並要求他們再次登入以存取受保護的資源。 叫用此函式將會重新載入目前頁面。
refreshToken重新整理目前登入使用者的驗證Token，避免其到期並確保受保護資源的存取不中斷。 傳回可用於後續請求的新驗證Token。