Autenticação de Incorporaçã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       │
       │────────────────────────────────────────>│

curl -X POST https://api.whatabot.app/api/auth/iframe-token \
  -H "Authorization: Basic $(echo -n 'clientId:clientSecret' | base64)" \
  -H "Content-Type: application/json"

{
  "ott": "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
}

// 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 });
});

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