임베디드 페이지 - 관리자 페이지에 자체 도구를 추가하세요.

확인하세요

요청이 아닌 토큰을 신뢰하세요.

서버에서 서명, 발급자(flash), 대상(nav.page) 및 만료일을 확인합니다. 그런 다음 해당 워크스페이스 ID와 역할에 따라 권한을 부여합니다. 쿠키에는 절대 권한을 부여하지 마세요(iframe에는 사용 가능한 출처가 없습니다. 아래 참조).

// Node (jose). The secret is your page's signing secret, shown ONCE at registration.
import { jwtVerify } from "jose";

const SECRET = new TextEncoder().encode(process.env.FLASH_EMBED_SECRET); // slotsec_…

export async function verifyFlashContext(token) {
  const { payload } = await jwtVerify(token, SECRET, {
    algorithms: ["HS256"],
    issuer: "flash",
    audience: "nav.page",
    requiredClaims: ["exp", "jti"],
    maxTokenAge: "120s",
  });
  // payload.ctx = { teamId, userId, role, pageType, locale }
  return payload.ctx; // → authorize the operator with this
}

// In your page: read ?flash_context=… , verify it server-side, then authorize.
const token = new URLSearchParams(location.search).get("flash_context");
// POST it to YOUR backend, verify with the snippet above, and gate the UI on
// ctx.teamId + ctx.role. Never trust it unverified, and never rely on cookies —
// the iframe is a null origin (see "Framing" below).

관리자 화면과 일치

어울리게 통합되어 어색하지 않도록 설계되었습니다.

귀하의 페이지는 SocialHub 관리자 내부로 렌더링되므로 해당 페이지가 속한 것처럼 보일 것입니다. 관리자는 몇 개의 토큰을 기반으로 구축된 단순하고 가벼운 단일 테마입니다. 이를 미러링합니다. Flash은 이미 "제3자" 배지를 사용하여 제목 창에 페이지를 래핑했으므로 상단 표시줄, 사이드바 또는 전체 페이지 크롬을 추가하지 마세요. 그냥 콘텐츠를 렌더링하세요.

/* Starter tokens that match the SocialHub admin (flat, light, single-accent).
   Drop into your embedded page so it feels native, not bolted on. */
:root {
  /* type — the admin's three families */
  --font-sans:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* surfaces — light theme only (the admin has no dark mode) */
  --bg:      #fafbfc;  /* page background */
  --surface: #ffffff;  /* cards / panels  */
  --subtle:  #f7fafc;  /* muted fills     */
  --border:  #e2e8f0;  /* hairlines       */

  /* text */
  --text:   #121c3d;   /* primary (brand navy) */
  --text-2: #4a5568;   /* secondary            */
  --muted:  #64748b;   /* muted                */

  /* accent — the admin's primary action colour */
  --accent:      #2ecc87;
  --accent-dark: #25b678;

  /* radius + 4px spacing scale + elevation */
  --radius: 8px; --radius-lg: 12px;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

body { margin: 0; background: var(--bg); color: var(--text);
       font: 14px/1.5 var(--font-sans); }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
        padding: var(--space-4); }
.btn  { background: var(--accent); color: #fff; border: 0; font-weight: 600;
        border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.btn:hover { background: var(--accent-dark); }
code  { font-family: var(--font-mono); color: var(--text-2); }

이 값은 현재 관리 테마를 추적합니다. 이를 출발점으로 삼고 중요한 곳에 자신의 브랜드를 유지하십시오. 목표는 다른 제품을 보여주는 창이 아닌 SocialHub를 통해 하나의 표면으로 읽히는 페이지를 만드는 것입니다.

완전한 예시

약 30줄의 코드로 구현 가능한 임베디드 페이지

바로 실행하고 등록할 수 있는 최소한의 Express 서버입니다. Flash에서 프레임을 구성하고, ID 토큰을 확인하고, 운영자 역할에 따라 권한을 부여하고, 작업 공간에 맞는 도구를 렌더링합니다. 관리자에서 서명 비밀 키를 FLASH_EMBED_SECRET에 복사하고 실행하세요.

// server.js — a complete, minimal SocialHub Embedded Page (Express + jose).
// Register https://<host>/embed in Flash → Settings → Embedded Pages, allow the
// origin https://<host>, pick roles/tier, then copy the signing secret into env.
import express from "express";
import { jwtVerify } from "jose";

const app = express();
const SECRET = new TextEncoder().encode(process.env.FLASH_EMBED_SECRET); // slotsec_…
const FLASH = "https://flash.socialhub.ai";

app.get("/embed", async (req, res) => {
  // 1. Let ONLY Flash frame this page.
  res.setHeader("Content-Security-Policy", "frame-ancestors " + FLASH);

  // 2. Read + verify the identity token Flash appended (?flash_context=…).
  let ctx;
  try {
    const { payload } = await jwtVerify(String(req.query.flash_context || ""), SECRET, {
      algorithms: ["HS256"], issuer: "flash", audience: "nav.page",
      requiredClaims: ["exp", "jti"], maxTokenAge: "120s",
    });
    ctx = payload.ctx; // { teamId, userId, role, pageType, locale }
  } catch {
    return res.status(401).send("<p>Unauthorized — open this from inside SocialHub.</p>");
  }

  // 3. Authorize on the VERIFIED role (never on the raw request).
  const canEdit = ctx.role === "org_owner" || ctx.role === "org_admin";

  // 4. Render your tool, scoped to ctx.teamId. (Values are verified + opaque;
  //    still escape anything user-supplied you add.)
  res.send(
    '<!doctype html><meta charset="utf-8"><body style="font:14px system-ui;padding:24px">' +
    '<h1>Returns portal</h1>' +
    '<p>Workspace <code>' + ctx.teamId + '</code> · operator <code>' + ctx.userId +
    '</code> · role <b>' + ctx.role + '</b></p>' +
    (canEdit ? '<button>Process a return</button>' : '<p>Read-only for your role.</p>') +
    '</body>'
  );
});

app.listen(3000, () => console.log("Embedded page on :3000/embed"));

그런 다음 Flash → 설정 → 삽입된 페이지에서 URL(예: https://tools.yourapp.com/embed)을 추가하고, 동일한 출처를 나열하고, 이를 열 수 있는 역할 + 계층을 선택하고, 일회성 서명 비밀을 서버 환경에 붙여넣습니다. 이제 허용한 운영자에 대한 앱 아래에 표시됩니다.