Pular para o conteúdo principal

​
Visão geral

O editor de fluxos incorporado usa um fluxo de autenticação em 3 etapas que mantém seu client secret seguro no seu backend enquanto fornece ao iframe tokens de acesso de curta duração.

​
Pré-requisito: Criar um Client OAuth

Antes de iniciar a integração, você precisa criar um Client OAuth vinculado ao espaço de trabalho que será incorporado.
  1. Acesse o Dashboard do WhataBot
  2. Vá até a tela de Workspaces
  3. Clique em Editar no espaço de trabalho desejado
  4. Navegue até a aba Embed
  5. Clique em Criar Client e copie o clientId e clientSecret
Guarde o clientSecret em local seguro. Ele só é exibido uma vez e deve ser armazenado apenas no seu backend.

​
Fluxo de autenticação

┌─────────────┐     ┌──────────────┐     ┌──────────────┐
│  Seu App     │     │  Seu Backend │     │  WhataBot API│
│  (Frontend)  │     │              │     │              │
└──────┬───────┘     └──────┬───────┘     └──────┬───────┘
       │                    │                    │
       │  1. Solicitar OTT  │                    │
       │───────────────────>│                    │
       │                    │  2. POST /auth/    │
       │                    │     iframe-token   │
       │                    │  (Basic Auth)      │
       │                    │───────────────────>│
       │                    │                    │
       │                    │  3. Retorna OTT    │
       │                    │<───────────────────│
       │                    │                    │
       │  4. Retorna OTT    │                    │
       │<───────────────────│                    │
       │                    │                    │
       │  5. POST /auth/exchange (ott)           │
       │────────────────────────────────────────>│
       │                    │                    │
       │  6. access_token + refresh_token        │
       │<────────────────────────────────────────│
       │                    │                    │
       │  7. Chamadas API com access_token       │
       │────────────────────────────────────────>│

​
Etapa 1: Obter um token de uso único (OTT)

Seu backend chama a API do WhataBot com Basic Auth usando as credenciais de cliente. Isso retorna um token de uso único válido por 60 segundos. 
curl -X POST https://api.whatabot.app/api/auth/iframe-token \
  -H "Authorization: Basic $(echo -n 'clientId:clientSecret' | base64)" \
  -H "Content-Type: application/json"
Resposta: 
{
  "ott": "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
}
O OTT expira após 60 segundos. Seu frontend deve trocá-lo antes que expire. Cada OTT só pode ser usado uma vez.

​
Por que usar um token de uso único?

O padrão OTT garante que o clientSecret nunca seja exposto em código frontend. Seu backend armazena o secret e gera tokens de curta duração e uso único que o frontend pode passar com segurança para o iframe.

​
Exemplo de integração

Aqui está um exemplo completo mostrando como integrar o editor incorporado em uma aplicação web:

​
Backend (Node.js)

// Endpoint do seu backend que o frontend chama para obter um OTT
app.post('/api/whatabot/ott', async (req, res) => {
  const clientId = process.env.WHATABOT_CLIENT_ID;
  const clientSecret = process.env.WHATABOT_CLIENT_SECRET;

  const credentials = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');

  const response = await fetch('https://api.whatabot.app/api/auth/iframe-token', {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${credentials}`,
      'Content-Type': 'application/json',
    },
  });

  const { ott } = await response.json();
  res.json({ ott });
});

​
Frontend (HTML/JavaScript)

<iframe id="whatabot-editor" src="https://flow.whatabot.app" style="width: 100%; height: 600px; border: none;"></iframe>

<script>
async function initEditor() {
  // 1. Obter OTT do seu backend
  const response = await fetch('/api/whatabot/ott', { method: 'POST' });
  const { ott } = await response.json();

  // 2. Passar OTT para o iframe via postMessage
  const iframe = document.getElementById('whatabot-editor');
  iframe.addEventListener('load', () => {
    iframe.contentWindow.postMessage({ type: 'auth', ott }, 'https://flow.whatabot.app');
  });
}

initEditor();
</script>