Integrera resursväljaren med Adobe integrate-asset-selector-with-adobe-app
Med resursväljaren kan du integrera med olika Adobe-program så att de kan fungera tillsammans sömlöst.
Förutsättningar prereqs-adobe-app
Använd följande krav om du integrerar resursväljare med ett Adobe-program:
- Kommunikationsmetoder
- imsOrg
- imsToken
- apikey
Integrera resursväljare med ett Adobe-program adobe-app-integration-vanilla
I följande exempel visas hur resursväljaren används när ett Adobe-program körs under Enhetligt gränssnitt eller när imsToken redan har genererats för autentisering.
Inkludera paketet Resursväljare i koden med taggen script, vilket visas i raderna 6-15 i exemplet nedan. När skriptet har lästs in är den globala variabeln PureJSSelectors tillgänglig för användning. Definiera resursväljaren egenskaper så som visas på raderna 16-23. Egenskaperna imsOrg och imsToken krävs båda för autentisering i Adobe. Egenskapen handleSelection används för att hantera de valda resurserna. Om du vill återge resursväljaren anropar du funktionen renderAssetSelector så som anges på rad 17. Resursväljaren visas i behållarelementet <div>, vilket visas på rader 21 och 22.
Följ de här stegen för att använda resursväljaren med ditt Adobe-program.
<!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
Egenskaperna ImsAuthProps definierar autentiseringsinformationen och det flöde som resursväljaren använder för att hämta en imsToken. Genom att ange dessa egenskaper kan du styra hur autentiseringsflödet ska fungera och registrera avlyssnare för olika autentiseringshändelser.
imsClientIdimsScoperedirectUrlredirectUrl inte anges använder ImsAuthService den redirectUrl som används för att registrera imsClientIdmodalModetrue visas autentiseringsflödet i ett popup-fönster. Om värdet är false visas autentiseringsflödet i en helsidesinläsning. Obs! För bättre användargränssnitt kan du dynamiskt styra det här värdet om användaren har inaktiverat popup-fönster för webbläsare.onImsServiceInitializedservice, som är ett objekt som representerar Adobe IMS-tjänsten. Mer information finns i ImsAuthService.onAccessTokenReceivedimsToken tas emot från Adobe IMS-autentiseringstjänsten. Den här funktionen tar en parameter, imsToken, som är en sträng som representerar åtkomsttoken.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
Klassen ImsAuthService hanterar autentiseringsflödet för resursväljaren. Det ansvarar för att erhålla en imsToken från Adobe IMS-autentiseringstjänsten. imsToken används för att autentisera användaren och auktorisera åtkomst till Adobe Experience Manager som en Cloud Service Assets-databas. ImsAuthService använder egenskaperna ImsAuthProps för att styra autentiseringsflödet och registrera avlyssnare för olika autentiseringshändelser. Du kan använda den praktiska funktionen registerAssetsSelectorsAuthService för att registrera instansen ImsAuthService med resursväljaren. Följande funktioner är tillgängliga för klassen ImsAuthService. Om du använder funktionen registerAssetsSelectorsAuthService behöver du inte anropa dessa funktioner direkt.
isSignedInUsergetImsTokenimsToken för den inloggade användaren, som kan användas för att autentisera begäranden till andra tjänster, som att generera resursåtergivning.signInImsAuthProps för att visa autentisering i antingen ett popup-fönster eller en helsidesinläsningsignOutrefreshTokenValidering med tillhandahållen 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>
Registrera återanrop till IMS-tjänsten 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);
},
}