Integração com um aplicativo que não seja da Adobe integrate-asset-selector-non-adobe-app

O Seletor de ativos permite a integração usando vários aplicativos que não sejam da Adobe ou de terceiros para que eles trabalhem em conjunto de maneira contínua.

Pré-requisitos prereqs-non-adobe-app

Use os seguintes pré-requisitos se estiver integrando o Seletor de ativos a um aplicativo que não seja da Adobe:

O Seletor de ativos oferece suporte à autenticação para o repositório Experience Manager Assets usando propriedades do Identity Management System (IMS) como imsScope ou imsClientID quando você o integra a um aplicativo que não seja da Adobe.

Configurar o Seletor de ativos para um aplicativo que não seja da Adobe configure-non-adobe-app

Para configurar o Seletor de ativos para um aplicativo que não seja da Adobe, primeiro você deve registrar um tíquete de suporte para provisionamento, seguido das etapas de integração.

Registro de um tíquete de suporte log-a-support-ticket

Etapas para registrar um tíquete de suporte pela Admin Console:

  1. Adicionar Seletor de ativos com AEM Assets no título do tíquete.

  2. Na descrição, forneça os seguintes detalhes:

    • Experience Manager Assets como uma URL Cloud Service (ID do Programa e ID do Ambiente).
    • Nomes de domínio em que o aplicativo Web que não é da Adobe está hospedado.

Etapas de integração non-adobe-app-integration-steps

Use este exemplo de arquivo index.html para autenticação ao integrar o Seletor de ativos a um aplicativo que não seja da Adobe.

Acesse o pacote do Seletor de ativos usando a Marca Script, conforme mostrado na linha 9 para a linha 11 do arquivo de exemplo index.html.

A Linha 14 a linha 38 do exemplo descreve as propriedades do fluxo IMS, como imsClientId, imsScope e redirectURL. A função requer a definição de pelo menos uma das propriedades imsClientId e imsScope. Se você não definir um valor para redirectURL, a URL de redirecionamento registrada para a ID do cliente será usada.

Como você não tem um imsToken gerado, use as funções registerAssetsSelectorsAuthService e renderAssetSelectorWithAuthFlow, conforme mostrado na linha 40 para a linha 50 do arquivo de exemplo index.html. Use a função registerAssetsSelectorsAuthService antes de renderAssetSelectorWithAuthFlow para registrar imsToken com o Seletor de ativos. A Adobe recomenda chamar registerAssetsSelectorsAuthService ao instanciar o componente.

Defina a autenticação e outras propriedades relacionadas ao acesso do Assets as a Cloud Service na seção const props, conforme mostrado na linha 54 a linha 60 do arquivo de exemplo index.html.

A variável global PureJSSelectors, mencionada em linha 65, é usada para renderizar o Seletor de ativos no navegador da Web.

O Seletor de ativos é renderizado no elemento de contêiner <div>, como mencionado na linha 74 para linha 81. O exemplo usa uma caixa de diálogo para exibir o Seletor de ativos.

<!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>

Não foi possível acessar o repositório de entrega unable-to-access-delivery-repository

TIP
Se você tiver integrado o Seletor de ativos usando o fluxo de trabalho Inscrever-se, mas ainda não conseguir acessar o repositório de entrega, verifique se os cookies do navegador foram limpos. Caso contrário, você acaba recebendo o erro invalid_credentials All session cookies are empty no console.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab