에셋 선택기와 Adobe 애플리케이션 통합 integrate-asset-selector-with-adobe-app
에셋 선택기를 사용하면 다양한 Adobe 애플리케이션을 사용하여 를 통합하여 두 애플리케이션이 원활하게 함께 작동할 수 있습니다.
사전 요구 사항 prereqs-adobe-app
자산 선택기를 Adobe 응용 프로그램과 통합하는 경우 다음 사전 요구 사항을 사용하십시오.
- 커뮤니케이션 방법
- imsOrg
- imsToken
- apikey
자산 선택기를 Adobe 응용 프로그램과 통합 adobe-app-integration-vanilla
다음 예제에서는 Unified Shell에서 Adobe 응용 프로그램을 실행하거나 인증을 위해 이미 imsToken을(를) 생성한 경우 자산 선택기를 사용하는 방법을 보여 줍니다.
아래 예제의 줄 6-15 에 표시된 대로 script 태그를 사용하여 코드에 자산 선택기 패키지를 포함하십시오. 스크립트가 로드되면 PureJSSelectors 전역 변수를 사용할 수 있습니다. 행 16~23 에 표시된 대로 자산 선택기 속성을(를) 정의합니다. Adobe 응용 프로그램에서 인증하려면 imsOrg 및 imsToken 속성이 모두 필요합니다. handleSelection 속성은 선택한 자산을 처리하는 데 사용됩니다. 자산 선택기를 렌더링하려면 17행 에서 언급한 대로 renderAssetSelector 기능을 호출합니다. 21~22행 에 표시된 대로 <div> 컨테이너 요소에 자산 선택기가 표시됩니다.
다음 단계를 따라 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 속성은 자산 선택기에서 imsToken을(를) 가져오는 데 사용하는 인증 정보 및 흐름을 정의합니다. 이러한 속성을 설정하여 인증 플로우의 동작 방법을 제어하고 다양한 인증 이벤트에 대한 리스너를 등록할 수 있습니다.
imsClientIdimsScoperedirectUrlredirectUrl이(가) 제공되지 않으면 ImsAuthService에서 imsClientId을(를) 등록하는 데 사용되는 redirectUrl을 사용합니다.modalModetrue(으)로 설정하면 인증 흐름이 팝업에 표시됩니다. false(으)로 설정하면 전체 페이지를 다시 로드할 때 인증 흐름이 표시됩니다. 참고: 더 나은 UX를 위해 사용자에게 브라우저 팝업이 비활성화된 경우 이 값을 동적으로 제어할 수 있습니다.onImsServiceInitializedservice 매개 변수 하나를 사용합니다. 자세한 내용은 ImsAuthService을(를) 참조하십시오.onAccessTokenReceivedimsToken을(를) 받을 때 호출되는 콜백 함수입니다. 이 함수는 액세스 토큰을 나타내는 문자열인 imsToken 매개 변수 하나를 사용합니다.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
ImsAuthService 클래스는 자산 선택기의 인증 흐름을 처리합니다. Adobe IMS 인증 서비스에서 imsToken을(를) 가져옵니다. imsToken은(는) 사용자를 인증하고 Adobe Experience Manager에 대한 액세스를 Cloud Service Assets 저장소로 승인하는 데 사용됩니다. ImsAuthService는 ImsAuthProps 속성을 사용하여 인증 흐름을 제어하고 다양한 인증 이벤트에 대한 수신기를 등록합니다. 편리한 registerAssetsSelectorsAuthService 함수를 사용하여 자산 선택기에 ImsAuthService 인스턴스를 등록할 수 있습니다. 다음 함수는 ImsAuthService 클래스에서 사용할 수 있습니다. 그러나 registerAssetsSelectorsAuthService 함수를 사용하는 경우에는 이러한 함수를 직접 호출할 필요가 없습니다.
isSignedInUsergetImsTokenimsToken을(를) 검색합니다.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);
},
}