Pular para o conteúdo principal

Configuração do Embed

Este guia ensina como configurar o n8n embarcado em sua aplicação, cobrindo parâmetros essenciais, permissões, customização visual, integração com autenticação e exemplos práticos para diferentes cenários empresariais.

Parâmetros Básicos​

Exemplo de Iframe​

<iframe
  src="https://n8n.suaempresa.com/embed?workflowId=123&mode=edit&theme=corporate&lang=pt-BR&hideSidebar=true"
  width="100%"
  height="800"
  frameborder="0"
  allowfullscreen
></iframe>

Segurança e CORS​

Configure o header 

X-Frame-Options: SAMEORIGIN
ou 
ALLOW-FROM
para domínios confiáveis.

Use 

Content-Security-Policy
para restringir origens do iframe:

add_header Content-Security-Policy "frame-ancestors 'self' https://app.suaempresa.com" always;

Defina domínios permitidos para CORS:

N8N_CORS_ALLOW_ORIGIN=https://app.suaempresa.com

Autenticação e Permissões​

Configuração de Permissões​

{
  "workflowId": "abc123",
  "permissions": {
    "user1@empresa.com": ["read", "write"],
    "user2@empresa.com": ["read"],
    "group:marketing": ["read", "execute"]
  }
}

Integração com SSO​

SAML​

N8N_SAML_ENABLED=true
N8N_SAML_ISSUER=https://sso.suaempresa.com
N8N_SAML_ENTRY_POINT=https://sso.suaempresa.com/sso
N8N_SAML_CERT=/path/to/certificate.pem

OAuth2​

N8N_OAUTH2_AUTH_URL=https://sso.suaempresa.com/oauth/authorize
N8N_OAUTH2_TOKEN_URL=https://sso.suaempresa.com/oauth/token
N8N_OAUTH2_CLIENT_ID=seu_client_id
N8N_OAUTH2_CLIENT_SECRET=SEU_CLIENT_SECRET_AQUI

LDAP​

N8N_LDAP_ENABLED=true
N8N_LDAP_SERVER_URL=ldap://ldap.suaempresa.com:389
N8N_LDAP_BIND_DN=cn=admin,dc=suaempresa,dc=com
N8N_LDAP_BIND_PASSWORD=SUA_SENHA_LDAP_AQUI
N8N_LDAP_BASE_DN=dc=suaempresa,dc=com

Customização Visual​

Temas e Branding​

Parâmetros de tema: 

theme=light
, 
theme=dark
, 
theme=corporate

Personalize cores, logo e fontes via variáveis de ambiente:

N8N_THEME_PRIMARY_COLOR=#1e40af
N8N_THEME_SECONDARY_COLOR=#059669
N8N_THEME_LOGO_URL=https://suaempresa.com/logo.png

CSS customizado:

N8N_CUSTOM_CSS_URL=https://suaempresa.com/n8n_custom.css

Comunicação entre Host e Embed​

PostMessage API​

// No host
iframe.contentWindow.postMessage({ type: 'n8n_load_workflow', workflowId: 'abc123' }, '*');

// No embed
window.addEventListener('message', (event) => {
  if (event.data.type === 'n8n_load_workflow') {
    // Carregar workflow
  }
});

Webhooks para eventos do editor:

{
  "event": "workflow.saved",
  "workflowId": "abc123",
  "user": "user@empresa.com",
  "timestamp": "2024-06-01T12:00:00Z"
}

Exemplos Práticos​

Exemplo de Configuração Completa​

<iframe
  src="https://n8n.suaempresa.com/embed?workflowId=456&mode=view&theme=dark&lang=pt-BR&readonly=true&token=SEU_TOKEN_AQUI"
  width="100%"
  height="900"
  frameborder="0"
  allowfullscreen
  sandbox="allow-scripts allow-same-origin allow-forms"
></iframe>

Parâmetros Dinâmicos via URL​

const params = new URLSearchParams({
  workflowId: '789',
  mode: 'edit',
  theme: 'corporate',
  lang: 'pt-BR',
  hideSidebar: 'true',
  token: 'eyJ...'
});

iframe.src = `https://n8n.suaempresa.com/embed?${params.toString()}`;

Checklist de Configuração​

  • Definir domínios permitidos (CORS e CSP)
  • Configurar autenticação (API Key, SSO, OAuth, LDAP)
  • Personalizar tema, logo e idioma
  • Limitar funcionalidades conforme o caso de uso
  • Testar comunicação entre host e embed
  • Validar segurança do iframe
Dica Pro

Use tokens de curta duração e renove-os automaticamente para maior segurança no embed.

Importante

Sempre teste o embed em ambiente de homologação antes de liberar para produção. Restrinja domínios e permissões para evitar vazamentos de dados.