Embedding TakiFlo

  your backend  ──POST /api/embed/session (API key + externalId)──►  TakiFlo
                ◄────────── single-use token, 60 second TTL ───────────

  your page     ──►  <iframe src="https://app.takiflo.com/embed/jobs?t=…&tenant=…">

  the frame     ──POST /api/embed/exchange──►  session JWT, held in memory only

  the frame     ──postMessage: takiflo:session-expiring──►  your page
  your page     ──postMessage: takiflo:session ────────────►  the frame

curl -X POST https://app.takiflo.com/api/embed/origins \
  -H "Authorization: Bearer <your TakiFlo admin token>" \
  -H "Content-Type: application/json" \
  -d '{"origin": "https://app.example.com"}'

app.get("/api/takiflo-session", async (req, res) => {
  const user = req.user; // however you identify people

  const r = await fetch("https://app.takiflo.com/api/embed/session", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-TakiFlo-Api-Key": process.env.TAKIFLO_API_KEY,
    },
    body: JSON.stringify({
      externalId: user.id, // YOUR id for this person, stable forever
      email: user.email,
      displayName: user.name, // optional
      role: "User", // 'User' or 'Admin'
    }),
  });

  const body = await r.json();
  if (!r.ok) return res.status(r.status).json(body);

  // Only these two reach the browser.
  res.json({ token: body.token, tenantId: body.tenantId });
});

@app.get("/api/takiflo-session")
def takiflo_session():
    user = current_user()

    r = requests.post(
        "https://app.takiflo.com/api/embed/session",
        headers={"X-TakiFlo-Api-Key": os.environ["TAKIFLO_API_KEY"]},
        json={
            "externalId": user.id,          # YOUR id for this person, stable forever
            "email": user.email,
            "displayName": user.name,       # optional
            "role": "User",                 # 'User' or 'Admin'
        },
        timeout=10,
    )
    body = r.json()
    if not r.ok:
        return body, r.status_code

    return {"token": body["token"], "tenantId": body["tenantId"]}

[HttpGet("/api/takiflo-session")]
public async Task<IActionResult> TakiFloSession()
{
    var user = CurrentUser();

    using var request = new HttpRequestMessage(
        HttpMethod.Post, "https://app.takiflo.com/api/embed/session");
    request.Headers.Add("X-TakiFlo-Api-Key", _config["TakiFlo:ApiKey"]);
    request.Content = JsonContent.Create(new
    {
        externalId = user.Id,       // YOUR id for this person, stable forever
        email = user.Email,
        displayName = user.Name,    // optional
        role = "User"               // "User" or "Admin"
    });

    var response = await _http.SendAsync(request);
    var body = await response.Content.ReadFromJsonAsync<JsonElement>();
    if (!response.IsSuccessStatusCode) return StatusCode((int)response.StatusCode, body);

    return Ok(new
    {
        token = body.GetProperty("token").GetString(),
        tenantId = body.GetProperty("tenantId").GetString()
    });
}

<iframe id="takiflo" title="TakiFlo" style="width:100%;border:0;height:400px"></iframe>

<script>
  const TAKIFLO = "https://app.takiflo.com";

  async function loadTakiFlo(screen = "jobs", recordId) {
    const r = await fetch("/api/takiflo-session");
    const { token, tenantId } = await r.json();

    document.getElementById("takiflo").src =
      `${TAKIFLO}/embed/${screen}?t=${encodeURIComponent(token)}` +
      `&tenant=${encodeURIComponent(tenantId)}` +
      (recordId ? `&id=${encodeURIComponent(recordId)}` : "");
  }

  loadTakiFlo();
</script>

const TAKIFLO_ORIGIN = new URL(TAKIFLO).origin;
const frame = document.getElementById("takiflo");

window.addEventListener("message", async (event) => {
  // Check the origin FIRST, before looking at the message at all.
  if (event.origin !== TAKIFLO_ORIGIN) return;

  const message = event.data;
  if (!message || typeof message.type !== "string") return;

  switch (message.type) {
    case "takiflo:ready":
      // Mounted and rendered.
      break;

    case "takiflo:height":
      frame.style.height = message.px + "px";
      break;

    case "takiflo:session-expiring": {
      // Fetch another token from YOUR backend and hand it in.
      const r = await fetch("/api/takiflo-session");
      const { token } = await r.json();
      frame.contentWindow.postMessage(
        { type: "takiflo:session", token },
        TAKIFLO_ORIGIN, // never "*"
      );
      break;
    }

    case "takiflo:error":
      console.error("TakiFlo:", message.code, message.message);
      break;
  }
});