Integrate Asset Selector with Adobe application integrate-asset-selector-with-adobe-app
Asset Selector allows you to integrate using various Adobe applications to enable them to work together seamlessly.
Prerequisites prereqs-adobe-app
Use the following prerequisites if you are integrating Asset Selector with an Adobe application:
- Communication methods
- imsOrg
- imsToken
- apikey
Integrate Asset Selector with an Adobe application adobe-app-integration-vanilla
The following example demonstrates the usage of Asset Selector when running an Adobe application under Unified Shell or when you already have imsToken generated for authentication.
Include the Asset Selector package in your code using the script tag, as shown in lines 6–15 of the example below. Once the script is loaded, the PureJSSelectors global variable is available for use. Define the Asset Selector properties as shown in lines 16–23. The imsOrg and imsToken properties are both required for authentication in Adobe application. The handleSelection property is used to handle the selected assets. To render the Asset Selector, call the renderAssetSelector function as mentioned in line 17. The Asset Selector is displayed in the <div> container element, as shown in lines 21 and 22.
By following these steps, you can use Asset Selector with your Adobe application.
<!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
The ImsAuthProps properties define the authentication information and flow that the Asset Selector uses to obtain an imsToken. By setting these properties, you can control how the authentication flow should behave and register listeners for various authentication events.
imsClientIdimsScoperedirectUrlredirectUrl is not supplied, ImsAuthService uses the redirectUrl used to register the imsClientIdmodalModetrue, the authentication flow is displayed in a pop-up. If set to false, the authentication flow is displayed in a full page reload. Note: for better UX, you can dynamically control this value if the user has browser pop-up disabled.onImsServiceInitializedservice, which is an object representing the Adobe IMS service. See ImsAuthService for more details.onAccessTokenReceivedimsToken is received from the Adobe IMS authentication service. This function takes one parameter, imsToken, which is a string representing the access token.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
ImsAuthService class handles the authentication flow for the Asset Selector. It is responsible for obtaining an imsToken from the Adobe IMS authentication service. The imsToken is used to authenticate the user and authorize access to the Adobe Experience Manager as a Cloud Service Assets repository. ImsAuthService uses the ImsAuthProps properties to control the authentication flow and register listeners for various authentication events. You can use the convenient registerAssetsSelectorsAuthService function to register the ImsAuthService instance with the Asset Selector. The following functions are available on the ImsAuthService class. However, if you are using the registerAssetsSelectorsAuthService function, you do not need to call these functions directly.
isSignedInUsergetImsTokenimsToken for the currently signed-in user, which can be used to authenticate requests to other services such as generating asset _rendition.signInImsAuthProps to show authentication in either a pop-up or a full page reloadsignOutrefreshTokenValidation with provided IMS token 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>
Register callbacks to IMS service 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);
},
}