Integrar o seletor de ativos ao aplicativo Adobe integrate-asset-selector-with-adobe-app
O Seletor de ativos permite a integração usando vários aplicativos Adobe para que eles trabalhem em conjunto de maneira contínua.
Pré-requisitos prereqs-adobe-app
Use os seguintes pré-requisitos se estiver integrando o Seletor de ativos a um aplicativo do Adobe:
- Métodos de comunicação
- imsOrg
- imsToken
- apikey
Integrar o Seletor de ativos a um aplicativo do Adobe adobe-app-integration-vanilla
O exemplo a seguir demonstra o uso do Seletor de Ativos ao executar um aplicativo Adobe no Unified Shell ou quando você já gerou imsToken para autenticação.
Inclua o pacote do Seletor de ativos no código usando a marca script, como mostrado nas linhas 6-15 do exemplo abaixo. Depois que o script for carregado, a variável global PureJSSelectors estará disponível para uso. Defina o Seletor de ativos propriedades conforme mostrado em linhas 16-23. As propriedades imsOrg e imsToken são necessárias para autenticação no aplicativo Adobe. A propriedade handleSelection é usada para manipular os ativos selecionados. Para renderizar o Seletor de ativos, chame a função renderAssetSelector como mencionado na linha 17. O Seletor de ativos é exibido no elemento de container <div>, conforme mostrado nas linhas 21 e 22.
Seguindo essas etapas, você pode usar o Seletor de ativos com seu aplicativo 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
As propriedades ImsAuthProps definem as informações de autenticação e o fluxo que o Seletor de ativos usa para obter um imsToken. Ao definir essas propriedades, é possível controlar como o fluxo de autenticação deve se comportar e registrar ouvintes para vários eventos de autenticação.
imsClientIdimsScoperedirectUrlredirectUrl não for fornecido, ImsAuthService usará o redirectUrl usado para registrar o imsClientIdmodalModetrue, o fluxo de autenticação será exibido em um pop-up. Se definido como false, o fluxo de autenticação será exibido em um recarregamento de página completo. Observação: para obter um UX melhor, você pode controlar este valor dinamicamente se o usuário tiver o pop-up do navegador desabilitado.onImsServiceInitializedservice, que é um objeto que representa o serviço Adobe IMS. Consulte ImsAuthService para obter mais detalhes.onAccessTokenReceivedimsToken é recebido do serviço de autenticação do Adobe IMS. Esta função recebe um parâmetro, imsToken, que é uma cadeia de caracteres que representa o token de acesso.onAccessTokenExpiredonErrorReceivedImsAuthService ims-auth-service
A classe ImsAuthService manipula o fluxo de autenticação para o Seletor de ativos. Ele é responsável por obter um imsToken do serviço de autenticação do Adobe IMS. O imsToken é usado para autenticar o usuário e autorizar o acesso ao Adobe Experience Manager como um repositório do Assets Cloud Service. O ImsAuthService usa as propriedades ImsAuthProps para controlar o fluxo de autenticação e registrar ouvintes de vários eventos de autenticação. Você pode usar a conveniente função registerAssetsSelectorsAuthService para registrar a instância ImsAuthService com o Seletor de ativos. As seguintes funções estão disponíveis na classe ImsAuthService. No entanto, se você estiver usando a função registerAssetsSelectorsAuthService, não será necessário chamar essas funções diretamente.
isSignedInUsergetImsTokenimsToken para o usuário conectado no momento, que pode ser usada para autenticar solicitações para outros serviços, como a geração de _representação de ativos.signInImsAuthProps para mostrar autenticação em um pop-up ou em um recarregamento de página completosignOutrefreshTokenValidação com o token IMS fornecido 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>
Registrar retornos de chamada para o serviço 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);
},
}