Compartilhar via

Inserir um aplicativo de código em um iframe

Este artigo explica como inserir um aplicativo de código em um iframe dentro de um host externo, como um recurso Web de aplicativo controlado por modelo, um site personalizado ou outro serviço que dá suporte a iframes. Como os aplicativos de código impõem a CSP (Política de Segurança de Conteúdo) por padrão, você deve atualizar a frame-ancestors diretiva para permitir que o host carregue o aplicativo.

Observação

  • Somente os usuários do Power Apps dentro do mesmo tenant podem acessar um aplicativo de código incorporado. Você não pode compartilhar a URL iframe com usuários fora do seu inquilino.
  • Você não pode inserir aplicativos de código em nenhum aplicativo de área de trabalho nativo, o que inclui Android e iOS. Essa limitação exclui integrações de primeira parte, como Power Apps no Teams.

Pré-requisitos

  • Você deve ser um administrador do ambiente do Power Platform para atualizar as configurações do CSP.
  • O aplicativo de código deve ser implantado em um ambiente.

Obter a URL do aplicativo de código

Para inserir um aplicativo de código, você precisa da URL de reprodução. A URL usa o seguinte formulário:

https://apps.powerapps.com/play/e/{environmentId}/app/{appId}?tenantid={tenantId}

Você pode encontrar a URL completa abrindo o aplicativo no Power Apps e copiando o endereço do navegador. tenantId é um parâmetro de consulta opcional para suportar acesso de convidado e determina de qual tenant abrir o aplicativo.

Adicionar o iframe ao host

Depois de obter a URL do aplicativo de código, adicione o elemento <iframe> ao HTML do host. Substitua a URL do aplicativo pelo valor src e defina a largura e a altura conforme apropriado ao seu layout.

<iframe
  width="1200"
  height="800"
  src="https://apps.powerapps.com/play/e/{environmentId}/{appId}"
  title="My code app">
</iframe>

Observação

Se o aplicativo usar as APIs de geolocalização do dispositivo, microfone, câmera, modo de tela cheia ou área de transferência, inclua as permissões correspondentes no atributo allow.

<iframe ... allow="geolocation; microphone; camera; fullscreen; clipboard-write"></iframe>

Configurar o CSP para permitir o enquadramento

Por padrão, os aplicativos de código usam a seguinte frame-ancestors diretiva, que restringe quais origens podem carregar o aplicativo em um quadro:

frame-ancestors 'self' https://*.powerapps.com

Se você inserir um aplicativo de código em qualquer host fora de https://*.powerapps.com, como um aplicativo controlado por modelos, uma instância de Dynamics 365 ou um site personalizado, o navegador bloqueará o quadro e registrará uma violação CSP semelhante à seguinte:

Refused to frame 'https://<environment>.powerplatformusercontent.com/' because it violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.powerapps.com"

Para resolver esse problema, adicione a origem do frame-ancestors host à diretiva do ambiente. Por exemplo:

  • Para um aplicativo Dynamics 365 ou um aplicativo baseado em modelo: https://<your-org>.crm.dynamics.com
  • Para um domínio personalizado: https://contoso.com

Importante

Valores personalizados se combinam com o valor padrão frame-ancestors. Depois de salvar, a diretiva efetiva é:

frame-ancestors 'self' https://*.powerapps.com https://<your-org>.crm.dynamics.com

Para obter instruções sobre como atualizar a frame-ancestors diretiva usando o Centro de administração do Power Platform ou a API REST, consulte Configurar a Política de Segurança de Conteúdo.

Configurar a Política de Segurança de Conteúdo
Arquitetura

  • Last updated on