Integration with a non-ÃÛ¶¹ÊÓƵ application integrate-asset-selector-non-adobe-app
Asset Selector allows you to integrate using various non-ÃÛ¶¹ÊÓƵ or third party applications to enable them to work together seamlessly.
Prerequisites prereqs-non-adobe-app
Use the following prerequisites if you are integrating Asset Selector with a non-ÃÛ¶¹ÊÓƵ application:
- Communication methods
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
Asset Selector supports authentication to the Experience Manager Assets repository using Identity Management System (IMS) properties such as imsScope or imsClientID when you are integrating it with a non-ÃÛ¶¹ÊÓƵ application.
Configure Asset Selector for a non-ÃÛ¶¹ÊÓƵ application configure-non-adobe-app
To configure Asset Selector for a non-ÃÛ¶¹ÊÓƵ application, you must first log a support ticket for provisioning followed by the integration steps.
Logging a support ticket log-a-support-ticket
Steps to log a support ticket via the Admin Console:
-
Add Asset Selector with AEM Assets in the title of the ticket.
-
In the description, provide the following details:
- Experience Manager Assets as a Cloud Service URL (Program ID and Environment ID).
- Domain names where the non-ÃÛ¶¹ÊÓƵ web application is hosted.
Integration steps non-adobe-app-integration-steps
Use this example index.html file for authentication while integrating Asset Selector with a non-ÃÛ¶¹ÊÓƵ application.
Access the Asset Selector package using the Script Tag, as shown in line 9 to line 11 of the example index.html file.
Line 14 to line 38 of the example describes the IMS flow properties, such as imsClientId, imsScope, and redirectURL. The function requires that you define at least one of the imsClientId and imsScope properties. If you do not define a value for redirectURL, the registered redirect URL for the client ID is used.
As you do not have an imsToken generated, use the registerAssetsSelectorsAuthService and renderAssetSelectorWithAuthFlow functions, as shown in line 40 to line 50 of the example index.html file. Use the registerAssetsSelectorsAuthService function before renderAssetSelectorWithAuthFlow to register the imsToken with the Asset Selector. ÃÛ¶¹ÊÓƵ recommends calling registerAssetsSelectorsAuthService when you instantiate the component.
Define the authentication and other Assets as a Cloud Service access-related properties in the const props section, as shown in line 54 to line 60 of the example index.html file.
The PureJSSelectors global variable, mentioned in line 65, is used to render the Asset Selector in the web browser.
Asset Selector is rendered on the <div> container element, as mentioned in line 74 to line 81. The example uses a dialog to display the Asset Selector.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Asset Selectors</title>
<link rel="stylesheet" href="index.css">
<script id="asset-selector"
src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
<script>
const imsProps = {
imsClientId: "<obtained from IMS team>",
imsScope: "openid, <other scopes>",
redirectUrl: window.location.href,
modalMode: true, // false to open in a full page reload flow
onImsServiceInitialized: (service) => {
// invoked when the ims service is initialized and is ready
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);
},
}
function load() {
const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
imsInstance = registeredTokenService;
};
// initialize the IMS flow before attempting to render the asset selector
load();
//function that will render the asset selector
const otherProps = {
// any other props supported by asset selector
}
const assetSelectorProps = {
"imsOrg": "imsorg",
...otherProps
}
// container element on which you want to render the AssetSelector/DestinationSelector component
const container = document.getElementById('asset-selector');
/// Use the PureJSSelectors in globals to render the AssetSelector/DestinationSelector component
PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
const assetSelectorDialog = document.getElementById('asset-selector-dialog');
assetSelectorDialog.showModal();
});
}
</script>
</head>
<body class="asset-selectors">
<div>
<button onclick="renderAssetSelectorWithAuthFlowFlow()">Asset Selector - Select Assets with Ims Flow</button>
</div>
<dialog id="asset-selector-dialog">
<div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
</div>
</dialog>
</div>
</body>
</html>
Unable to access delivery repository unable-to-access-delivery-repository
invalid_credentials All session cookies are empty error in the console.