[AEM Assets]{class="badge positive" title="AEM Assets에 적용됩니다)."}
Content Advisor 설치 및 속성 content-advisor-installation-properties
또한 Content Advisor를 타사 애플리케이션과 통합하여 Adobe 애플리케이션 이상의 지능형 에셋 검색을 확장할 수도 있습니다. AI 기반 검색, 컨텍스트 인식 권장 사항, Campaign Brief 기반 검색, Dynamic Media 렌디션에 대한 액세스, 콘텐츠 조각 검색, 필터 및 에셋 메타데이터를 비롯한 동일한 다양한 기능 세트가 서드파티 통합에서 지원됩니다.
사전 요구 사항 prereqs
다음 커뮤니케이션 방법을 보장해야 합니다.
- 호스트 애플리케이션이 HTTPS에서 실행 중입니다.
- 해당 애플리케이션을
localhost에서 실행할 수 없습니다. 로컬 컴퓨터에서 콘텐츠 관리자를 통합하려면[https://<your_campany>.localhost.com:<port_number>]과(와) 같은 사용자 지정 도메인을 만들고redirectUrl list에 이 사용자 지정 도메인을 추가해야 합니다. - clientID를 구성하여 각각의
imsClientId로 AEM Cloud Service 환경 변수에 추가할 수 있습니다. - IMS 범위 목록은 환경 구성에서 정의되어야 합니다.
- 애플리케이션의 URL이 IMS 클라이언트가 허용하는 리디렉션 URL 목록에 있습니다.
- IMS 로그인 흐름은 웹 브라우저의 팝업을 사용하여 구성 및 렌더링됩니다. 따라서 타깃 브라우저에서 팝업을 활성화하거나 허용해야 합니다.
Content Advisor의 IMS 인증 워크플로가 필요한 경우 위의 사전 요구 사항을 사용하십시오. 또는 이미 IMS 워크플로로 인증된 경우 대신 IMS 정보를 추가할 수 있습니다.
- 통합 애플리케이션이 호스팅되는 도메인 이름.
- 프로비저닝 후 조직에는 콘텐츠 관리자 구성에 필요한 요청된 환경에 해당하는
imsClientId,imsScope및redirectUrl이(가) 제공됩니다. 이러한 유효한 속성이 없으면 설치 단계를 실행할 수 없습니다.
설치 content-advisor-installation
Content Advisor는 ESM CDN(예: esm.sh/skypack)과 UMD 버전 모두를 통해 사용할 수 있습니다.
UMD 버전을 사용하는 브라우저의 경우(권장됨):
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
<script>
const { renderAssetSelector } = PureJSSelectors;
</script>
ESM CDN 버전을 사용하며 import maps가 지원되는 브라우저의 경우:
<script type="module">
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>
ESM CDN 버전을 사용하는 Deno/Webpack Module Federation의 경우:
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
콘텐츠 관리자 속성 content-advisor-propertiess
콘텐츠 관리자 속성을 사용하여 콘텐츠 관리자가 렌더링되는 방식을 사용자 지정할 수 있습니다. 다음 표는 콘텐츠 관리자를 사용자 정의하고 사용하는 데 사용할 수 있는 속성을 보여 줍니다.
true(으)로 표시된 경우 콘텐츠 관리자가 왼쪽 레일 보기에서 렌더링됩니다. false(으)로 표시되어 있으면 콘텐츠 관리자가 모달 보기에서 렌더링됩니다.imsOrg 키가 필요합니다.imsToken이(가) 필요합니다.apiKey이(가) 필요합니다.<Object>[{id: 'urn:234}, {id: 'urn:555'}] 등이 있습니다. 또한 현재 디렉터리에서 자산을 사용할 수 있어야 합니다. 다른 디렉터리를 사용해야 하는 경우 path 속성 값도 제공하십시오.rail 속성과 함께 사용되어 자산 뷰어의 레일 보기를 사용할 수 있습니다.Object<{ id?: string, defaultMessage?: string, description?: string}>i18nSymbols prop을 통해 사용자 지정 지역화된 값을 전달할 수 있는 인터페이스를 표시할 수 있습니다. 이 인터페이스를 통해 값을 전달하면 제공된 기본 번역이 재정의되며 사용자 고유의 번역이 대신 사용됩니다. 재정의를 수행하려면 유효한 재정의하려는 i18nSymbols의 키에 메시지 설명자 오브젝트를 전달해야 합니다.intl.locale 속성을 통해 유효한 로케일 문자열을 제공하여 번역 언어를 선택할 수 있습니다. 예: intl={{ locale: "es-es" }}지원되는 로케일 문자열은 언어 표준 이름 표현에 대한 ISO 639 - 코드를 따릅니다.
지원되는 로케일 목록: 영어 - 'en-us'(기본값) 스페인어 - 'es-es' 독일어 - 'de-de' 프랑스어 - 'fr-fr' 이탈리아어 - 'it-it' 일본어 - 'ja-jp' 한국어 - 'ko-kr' 포르투갈어 - 'pt-br' 중국어(번체) - 'zh-cn' 중국어(대만) - 'zh-tw'
Array<string>{allowList?: Object}default에서 express 사이의 콘텐츠 관리자 응용 프로그램에 테마를 적용합니다. @react-spectrum/theme-express도 지원합니다.자산을 선택하고 모달의 Select 버튼을 클릭하면 자산 항목 배열과 함께 호출됩니다. 이 함수는 모달 보기에서만 호출됩니다. 레일 보기의 경우 handleAssetSelection 또는 onDrop 함수를 사용하십시오. 예:
handleSelection=(자산: 자산[])=> {…}
자세한 내용은 자산 선택을 참조하세요.
자산을 선택하거나 선택 취소할 때 항목 배열과 함께 호출됩니다. 이 속성은 사용자가 자산을 선택할 때 자산을 수신하려는 경우에 유용합니다. 예:
handleAssetSelection=(자산: 자산[])=> {…}
자세한 내용은 자산 선택을 참조하세요.
Close 버튼을 누르면 호출됩니다. 이 속성은 modal 보기에서만 호출되며 rail 보기에서는 무시됩니다.single 자산을 선택할지 또는 multiple 자산을 선택할지에 대한 구성입니다.구문:
aemTierType: "author" "delivery"예를 들어 두
["author","delivery"]을(를) 모두 사용하는 경우 저장소 전환기에 작성자와 게재 모두에 대한 옵션이 표시됩니다.EXPIRED, EXPIRING_SOON 또는 NOT_EXPIRED을(를) 반환합니다. 만료된 에셋 사용자 지정을 참조하십시오. 또한 함수 값이 true 또는 false일 수 있는 allowSelectionAndDrag을(를) 사용할 수 있습니다. 값을 false(으)로 설정하면 만료된 에셋을 캔버스에서 선택하거나 드래그할 수 없습니다.uploadConfig 속성에 중첩되어 있습니다. 사용자로부터 메타데이터를 수집하기 위해 제공하는 필드 배열을 추가합니다. 이 속성을 사용하면 자산에 자동으로 할당되지만 사용자에게 표시되지 않는 숨겨진 메타데이터를 사용할 수도 있습니다.uploadConfig 속성에 중첩되어 있습니다. property과(와) value(으)로 구성됩니다. Property은(는) 값이 업데이트되는 metadataSchema에서 전달된 필드의 mapToProperty과(와) 같습니다. 반면, value은(는) 새 값이 입력으로 제공됩니다."/content/dam"uploadConfig 속성에 중첩되어 있습니다. 에셋 저장소의 루트로 기본 설정되는 파일의 대상 업로드 경로입니다.uploadConfig 속성에 중첩되어 있습니다.(uploadInfo: UploadInfo) => void입니다. 이 속성은 uploadConfig 속성에 중첩되어 있습니다.sourceTypes은(는) 사용할 가져오기 소스의 배열을 사용합니다. 지원되는 소스는 Onedrive 및 Dropbox입니다. 구문은 { sourceTypes?: ImportSourceType[]; apiKey?: string; }입니다. 또한 이 속성은 uploadConfig 속성에 중첩되어 있습니다.(uploadStats: UploadStats) => void입니다. 또한 이 속성은 uploadConfig 속성에 중첩되어 있습니다.uploadConfig 속성에 중첩되어 있습니다. 파일이 변경될 때 업로드의 동작을 표시하는 데 사용되는 콜백 함수입니다. 업로드를 위해 보류 중인 새 파일 배열과 업로드의 소스 유형을 전달합니다. 오류가 발생한 경우 Source 유형은 null일 수 있습니다. 구문은 (newFiles: File[], uploadType: UploadType) => void입니다.{ href: string; alt: string; }입니다. 또한 이 속성은 uploadConfig 속성 아래에 중첩됩니다.featureSet:[ ] 속성은 콘텐츠 관리자 응용 프로그램에서 특정 기능을 활성화하거나 비활성화하는 데 사용됩니다. 구성 요소 또는 기능을 활성화하려면 배열에 문자열 값을 전달하거나 추가된 기능을 비활성화하도록 배열을 비워 두고 기본 기능만 사용할 수 있습니다. 예를 들어 콘텐츠 관리자에서 업로드 기능을 활성화하려면 featureSet:["upload"] 구문을 사용합니다. 마찬가지로 featureSet:["content-fragments"]을(를) 사용하여 콘텐츠 관리자에서 콘텐츠 조각을 사용할 수 있습니다. 여러 기능을 함께 사용하려면 featureSet:["upload", "content-fragments"] 구문을 사용합니다.ImsAuthProps ims-auth-props
ImsAuthProps 속성은 콘텐츠 관리자가 imsToken을(를) 가져오는 데 사용하는 인증 정보 및 흐름을 정의합니다. 이러한 속성을 설정하여 인증 플로우의 동작 방법을 제어하고 다양한 인증 이벤트에 대한 리스너를 등록할 수 있습니다.
imsClientIdimsScoperedirectUrlredirectUrl이(가) 제공되지 않으면 ImsAuthService에서 imsClientId을(를) 등록하는 데 사용되는 redirectUrl을 사용합니다.modalModetrue(으)로 설정하면 인증 흐름이 팝업에 표시됩니다. false(으)로 설정하면 전체 페이지를 다시 로드할 때 인증 흐름이 표시됩니다. 향상된 UX를 위해 브라우저 팝업이 비활성화된 경우 이 값을 동적으로 제어할 수 있습니다(Note :).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을(를) 사용하여 팝업 또는 전체 페이지 다시 로드 시 인증을 표시합니다.signOutrefreshTokencontentFragmentSelectorProps content-fragment-selector-properties
contentFragmentSelectorProps을(를) 사용하면 콘텐츠 조각이 콘텐츠 관리자 내에서 액세스 및 표시되는 방법을 구성할 수 있습니다. featureSet에서 콘텐츠 조각 기능을 활성화하고 필요한 구성을 제공하면 에셋과 함께 콘텐츠 조각 선택을 원활하게 통합할 수 있습니다. 이를 통해 사용자는 동일한 통합 인터페이스 내에서 콘텐츠 조각을 검색 및 선택할 수 있으므로 에셋 및 구조화된 콘텐츠 전반에서 일관된 콘텐츠 선택 환경을 보장할 수 있습니다.
const assetSelectorProps = {
featureSet: [
'upload', /* Include upload or other featureSet values to ensure no missing functionality */
'content-fragments', /* Content Fragments pill will be shown */
],
contentFragmentSelectorProps: {
/* Configures the Content Fragments Pill experience */
/* ...props @aem-sites/content-fragment-selector MFE supports */
}
}
<AssetSelector {...assetSelectorProps} />
contentFragmentSelectorProps에서 콘텐츠 조각 선택기 속성에서 사용할 수 있는 모든 속성을 언급할 수 있습니다.
Content Advisor를 Angular, React 및 JavaScript 애플리케이션과 통합하는 방법에 대한 자세한 내용은 Content Advisor 통합 예를 참조하십시오.