アセットセレクターとアドビアプリケーションの統合 integrate-asset-selector-with-adobe-app
アセットセレクターを使用すると、様々なアドビアプリケーションを統合して、シームレスに連携できます。
前提条件 prereqs-adobe-app
アセットセレクターを Adobe アプリケーションと統合する場合は、次の前提条件を使用しまず。
- 通信方法
- imsOrg
- imsToken
- apikey
アセットセレクターと Adobe アプリケーションの統合 adobe-app-integration-vanilla
次の例では、統合シェルの下で Adobe アプリケーションを実行している場合、または認証用に生成された imsToken が既にある場合に、アセットセレクターの使用方法を示します。
以下の例の 6～15 行目 に示されているように、script タグを使用してアセットセレクターパッケージをコードに含めます。スクリプトが読み込まれると、PureJSSelectors グローバル変数を使用できるようになります。16～23 行目 に示されているように、アセットセレクターのプロパティを定義します。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 という 1 つのパラメーターを受け取ります。詳しくは、ImsAuthService を参照してください。onAccessTokenReceivedimsToken を受信する際に呼び出されるコールバック関数。この関数は、アクセストークンを表す文字列である imsToken という 1 つのパラメーターを受け取ります。onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
ImsAuthService クラスは、アセットセレクターの認証フローを処理します。これは、Adobe IMS 認証サービスから imsToken を取得する役割を果たします。imsToken は、ユーザーを認証し、Adobe Experience Manager as a Cloud Service アセットリポジトリへのアクセスを認証するために使用されます。ImsAuthService は、ImsAuthProps プロパティを使用して認証フローを制御し、様々な認証イベントのリスナーを登録します。便利な registerAssetsSelectorsAuthService 関数を使用して、ImsAuthService インスタンスをアセットセレクターに登録できます。ImsAuthService クラスでは、次の関数を使用できます。ただし、registerAssetsSelectorsAuthService 関数を使用している場合は、これらの関数を直接呼び出す必要はありません。
isSignedInUsergetImsTokenimsToken を取得します。これは、asset _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);
},
}