📱 Meta SDK Bridge

Ponte centralizada para integração com Meta SDK (Facebook, Instagram, WhatsApp). Resolve o problema de multi-tenant com subdomínios dinâmicos.

🎯 Problema que resolve

O Meta SDK exige que todos os domínios estejam cadastrados no Meta App Dashboard. Em aplicações multi-tenant com subdomínios dinâmicos (tenant1.app.com, tenant2.app.com), seria inviável cadastrar cada tenant.

Solução: Concentrar toda interação com o Meta SDK em um único domínio fixo (ex: sdk.beecrm.io). Cadastre apenas este domínio no Meta App.

🚀 Endpoints disponíveis

GET /oauth-callback.html

Callback do OAuth server-side para Instagram/Facebook Messenger.

Query params:

code - Authorization code da Meta
state - Token CSRF (opcional, validado no backend)
error - Erro retornado pela Meta (se houver)

Envia postMessage de volta ao opener com o code.

GET /embedded-signup.html

Bridge page para WhatsApp Business Embedded Signup.

Query params:

app_id - Meta App ID
config_id - Meta Config ID (Embedded Signup)
solution_id - Meta Solution ID (opcional)
origin - URL do tenant que abriu o popup

Carrega o Meta SDK, executa FB.login() e retorna os dados via postMessage.

📋 Configuração no Meta App Dashboard

Acesse Meta for Developers
Selecione seu App → Settings → Basic
Em App Domains, adicione: sdk.beecrm.io (ou seu domínio)
Em produtos específicos (WhatsApp, Instagram, Messenger):
- Valid OAuth Redirect URIs: https://sdk.beecrm.io/oauth-callback.html
- Website URL: https://sdk.beecrm.io
Salve as alterações

🔧 Uso no frontend (tenant)

OAuth - Instagram/Messenger

// Usuário clica em "Conectar Instagram"
const params = new URLSearchParams({
  app_id: '209689888852594',
  redirect_uri: 'https://sdk.beecrm.io/oauth-callback.html',
  state: yourCsrfToken,
  scope: 'instagram_basic,instagram_manage_messages,...',
  response_type: 'code'
});

const oauthUrl = `https://www.facebook.com/v21.0/dialog/oauth?${params}`;
const popup = window.open(oauthUrl, 'meta_oauth', 'width=600,height=700');

// Listener para receber o code
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://sdk.beecrm.io') return;

  const data = event.data;
  if (data.type === 'META_OAUTH_CALLBACK') {
    if (data.success) {
      // Usar data.code no backend para trocar por token
      fetch('/api/channels/meta/pages', {
        method: 'POST',
        body: JSON.stringify({ code: data.code })
      });
    }
  }
});

WhatsApp Embedded Signup

// Usuário clica em "Conectar WhatsApp"
const params = new URLSearchParams({
  app_id: '1575450246598258',
  config_id: '1231396158942382',
  solution_id: '1456953348817413', // opcional
  origin: window.location.origin
});

const url = `https://sdk.beecrm.io/embedded-signup.html?${params}`;
const popup = window.open(url, 'meta_embedded', 'width=700,height=750');

// Listener para receber os dados
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://sdk.beecrm.io') return;

  const data = event.data;
  if (data.type === 'META_EMBEDDED_SIGNUP_RESULT') {
    if (data.success) {
      // Enviar para backend finalizar
      fetch('/api/channels/embedded-signup/complete', {
        method: 'POST',
        body: JSON.stringify({
          code: data.code,
          phone_number_id: data.phoneNumberId,
          waba_id: data.wabaId,
          business_id: data.businessId
        })
      });
    }
  }
});

🌐 Hospedagem

Este projeto é 100% estático e pode ser hospedado em:

Vercel: vercel --prod
Netlify: Drag & drop ou GitHub deploy
GitHub Pages: Branch gh-pages
AWS S3 + CloudFront: Bucket estático
Nginx/Apache: Servidor tradicional

⚠️ Importante: Configure HTTPS obrigatoriamente. O Meta SDK não funciona em HTTP.

📝 Estrutura do projeto

meta-sdk-bridge/
├── index.html               # Esta página (documentação)
├── oauth-callback.html      # OAuth callback
├── embedded-signup.html     # WhatsApp Embedded Signup
├── assets/
│   ├── css/
│   │   └── style.css       # Estilos compartilhados
│   └── js/
│       ├── oauth.js        # Lógica OAuth
│       └── embedded-signup.js # Lógica Embedded Signup
└── README.md

🔒 Segurança

Valide a origem dos postMessage no tenant (event.origin)
Use tokens CSRF/state no OAuth flow quando possível
Nunca exponha secrets no frontend (use backend para trocar code por token)
Configure CSP headers adequados

Made with ❤️ for multi-tenant apps