Integrieren des Asset-Wählers in eine Adobe-Anwendung integrate-asset-selector-with-adobe-app
Mit dem Asset-Wähler können Sie die Integration mit verschiedenen Adobe-Anwendungen durchführen, um eine nahtlose Zusammenarbeit zu ermöglichen.
Voraussetzungen prereqs-adobe-app
Wenden Sie die folgenden Voraussetzungen an, wenn Sie den Asset-Wähler mit einer Adobe-Anwendung integrieren:
- Kommunikationsmethoden
- imsOrg
- imsToken
- apikey
Integrieren des Asset-Wählers mit einer Adobe-Anwendung adobe-app-integration-vanilla
Das folgende Beispiel zeigt die Verwendung des Asset-Wählers bei Ausführung einer Adobe-Anwendung unter Unified Shell oder wenn Sie bereits imsToken für die Authentifizierung generiert haben.
Fügen Sie das Asset-Wähler-Paket mit dem script-Tag in Ihren Code ein, wie in Zeilen 6 bis 15 des folgenden Beispiels zu sehen. Sobald das Skript geladen ist, kann die globale Variable PureJSSelectors verwendet werden. Definieren Sie die Eigenschaften des Asset-Wählers wie in Zeilen 16 bis 23 zu sehen. Die Eigenschaften imsOrg und imsToken sind beide für die Authentifizierung in der Adobe-Anwendung erforderlich. Die handleSelection-Eigenschaft wird verwendet, um die ausgewählten Assets zu behandeln. Um den Asset-Wähler zu rendern, rufen Sie die renderAssetSelector-Funktion wie in Zeile 17 erwähnt auf. Der Asset-Wähler wird im Container-Element <div> angezeigt, wie in Zeilen 21 und 22 zu sehen.
Wenn Sie diese Schritte befolgen, können Sie den Asset-Wähler mit Ihrer Adobe-Anwendung verwenden.
<!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
Die ImsAuthProps-Eigenschaften definieren die Authentifizierungsinformationen und den Ablauf, mit dem der Asset-Wähler ein imsToken abruft. Durch Festlegen dieser Eigenschaften können Sie steuern, wie sich der Authentifizierungsfluss verhält, und Listener für verschiedene Authentifizierungsereignisse registrieren.
imsClientIdimsScoperedirectUrlredirectUrl bereitgestellt wird, verwendet ImsAuthService die zum Registrieren der imsClientId verwendete redirectUrlmodalModetrue festgelegt ist, wird der Authentifizierungsfluss in einem Popup-Fenster angezeigt. Wenn false festgelegt ist, wird der Authentifizierungsfluss bei vollständigem Neuladen der Seite angezeigt. Hinweis: Für ein besseres Anwendererlebnis können Sie diesen Wert dynamisch steuern, wenn Popup-Fenster des Browsers deaktiviert sind.onImsServiceInitializedservice, ein Objekt, das den Adobe IMS-Dienst darstellt. Siehe ImsAuthService für weitere Informationen.onAccessTokenReceivedimsToken vom Adobe IMS-Authentifizierungsdienst empfangen wird. Diese Funktion akzeptiert einen Parameter namens imsToken, eine Zeichenfolge, die das Zugriffstoken darstellt.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
Die ImsAuthService-Klasse regelt den Authentifizierungsfluss für den Asset-Wähler. Sie ist für den Erhalt eines imsToken über den Adobe IMS-Authentifizierungsdienst verantwortlich. Das imsToken wird verwendet, um die Benutzerin oder den Benutzer zu authentifizieren und den Zugriff auf das Adobe Experience Manager as a Cloud Service Assets-Repository zu autorisieren. ImsAuthService verwendet die ImsAuthProps-Eigenschaften, um den Authentifizierungsfluss zu steuern und Listener für verschiedene Authentifizierungsereignisse zu registrieren. Sie können die praktische Funktion registerAssetsSelectorsAuthService zum Registrieren der ImsAuthService-Instanz mit dem Asset-Wähler verwenden. Die folgenden Funktionen sind in der ImsAuthService-Klasse verfügbar. Wenn Sie jedoch die Funktion registerAssetsSelectorsAuthService verwenden, müssen Sie diese Funktionen nicht direkt aufrufen.
isSignedInUsergetImsTokenimsToken für die derzeit angemeldete Person ab, das zum Authentifizieren von Anforderungen für andere Dienste wie zum Beispiel zum Generieren von Asset-Ausgabedarstellungen verwendet werden kann.signInImsAuthProps, um die Authentifizierung in einem Popup-Fenster oder beim vollständigem Neuladen einer Seite anzuzeigensignOutrefreshTokenValidierung mit bereitgestelltem 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>
Registrieren von Rückrufen des IMS-Dienstes 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);
},
}