Pular para o conteúdo principal

Documentation Index

Fetch the complete documentation index at: https://docs.whatabot.app/llms.txt

Use this file to discover all available pages before exploring further.

​
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)

<script>
  const FLOW_ID = "019cfebf-b789-794b-9a86-3098d6e82772"; // UUID do seu fluxo
  const LANG = "pt"; // "en" ou "pt"
  const THEME = "light"; // "light" ou "dark"
  const BASE_URL = "https://flow.whatabot.app";

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

    // 2. Definir src do iframe com a URL do fluxo
    const iframe = document.getElementById("whatabot-editor");
    iframe.src = `${BASE_URL}/${LANG}/flows/builder/${FLOW_ID}?theme=${THEME}`;

    // 3. Passar OTT para o iframe via postMessage
    iframe.addEventListener("load", () => {
      iframe.contentWindow.postMessage({ type: "auth", ott }, BASE_URL);
    });
  }

  initEditor();
</script>

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