飞书扫码 OAuth 登录

用户浏览器                     Edge Function                   飞书开放平台
   │                              │                               │
   ├─ 1. 请求 goto_url ──────────▶│                               │
   │◀─ 2. 返回拼接好的授权 URL ──│                               │
   │                              │                               │
   ├─ 3. QR SDK 渲染二维码         │                               │
   ├─ 4. 用户扫码 ───────────────────────────────────────────────▶│
   │◀─ 5. postMessage(tmp_code)   │                               │
   ├─ 6. 跳转飞书授权页 ────────────────────────────────────────▶│
   │◀─ 7. 302 回调 /auth/callback/feishu?code=xxx&state=xxx      │
   │                              │                               │
   ├─ 8. 发送 code ──────────────▶│                               │
   │                              ├─ 9. code 换 token ──────────▶│
   │                              │◀─ 10. user_access_token ─────│
   │                              ├─ 11. 获取用户信息 ───────────▶│
   │                              │◀─ 12. 用户数据 ──────────────│
   │                              │                               │
   │                              ├─ 13. 创建/查找 Supabase 用户  │
   │                              ├─ 14. 生成 magiclink token     │
   │◀─ 15. 返回 token_hash ──────│                               │
   │                              │                               │
   ├─ 16. verifyOtp 建立会话      │                               │
   └─ 17. 登录完成，显示用户信息   │                               │

用户打开 /login
    │
    ▼
前端加载飞书 QR SDK（script 标签动态注入）
    │
    ▼
前端生成 CSRF state 并存入 sessionStorage
    │
    ▼
调用 Edge Function feishu-auth(action="qr_url")（传入 redirect_uri + state）
→ 后端用 FEISHU_APP_ID 构造 goto URL 返回前端
    │
    ▼
调用 window.QRLogin({ goto: gotoUrl }) 渲染二维码
    │
    ▼
用户用飞书 App 扫码确认
    │
    ▼
SDK 通过 postMessage 返回 tmp_code
    │
    ▼
前端跳转到 goto + &tmp_code=xxx
    │
    ▼
飞书服务端验证，302 重定向到 redirect_uri?code=xxx&state=xxx
    │
    ▼
/auth/callback/feishu 页面提取 code，校验 state
    │
    ▼
前端调用 Edge Function feishu-auth，传入 code 和 redirect_uri
    │
    ▼
Edge Function 内部：
  ① POST /authen/v2/oauth/token → 用 code 换 user_access_token
  ② GET  /authen/v1/user_info   → 用 token 获取用户信息（含 tenant_key）
  ③ （可选）校验 tenant_key 是否在白名单中
  ④ 查询/创建 Supabase 用户 + user_identities 记录
  ⑤ 生成 magiclink token_hash 返回前端
    │
    ▼
前端调用 supabase.auth.verifyOtp({ token_hash, type: 'magiclink' })
    │
    ▼
Supabase 会话建立，跳转到受保护页面

// hooks/useFeishuQRCode.ts
import { supabase } from "@/integrations/supabase/client";

const FEISHU_SDK_URL =
  "https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js";

interface UseFeishuQRCodeOptions {
  containerId: string;   // 二维码渲染容器的 DOM id
  redirectUri: string;    // OAuth 回调地址
  width?: string;
  height?: string;
}

export function useFeishuQRCode({
  containerId, redirectUri,
  width = "300", height = "300",
}: UseFeishuQRCodeOptions) {
  const [status, setStatus] = useState<"loading" | "ready" | "scanned" | "error">("loading");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const qrLoginRef = useRef(null);
  const gotoUrlRef = useRef("");

  const generateState = useCallback(() => {
    const randomState = crypto.randomUUID();
    sessionStorage.setItem("feishu_oauth_state", randomState);
    return randomState;
  }, []);

  useEffect(() => {
    let isCleanedUp = false;
    const loadSdkAndInit = async () => {
      // 1. 动态注入 SDK 脚本
      if (!window.QRLogin) {
        await new Promise<void>((resolve, reject) => {
          const script = document.createElement("script");
          script.src = FEISHU_SDK_URL;
          script.async = true;
          script.onload = () => resolve();
          script.onerror = () => reject(new Error("飞书 SDK 加载失败"));
          document.head.appendChild(script);
        });
      }
      if (isCleanedUp) return;

      // 2. 生成 CSRF state，调用 Edge Function 获取 goto URL
      const state = generateState();
      const { data, error } = await supabase.functions.invoke("feishu-auth", {
        body: { action: "qr_url", redirect_uri: redirectUri, state },
      });
      if (isCleanedUp) return;
      if (error || !data?.goto_url) {
        setStatus("error");
        setErrorMessage("获取登录链接失败");
        return;
      }

      const gotoUrl = data.goto_url;
      gotoUrlRef.current = gotoUrl;

      // 3. 渲染二维码
      const qrLoginInstance = window.QRLogin({
        id: containerId,
        goto: gotoUrl,
        width, height,
      });
      qrLoginRef.current = qrLoginInstance;
      setStatus("ready");

      // 4. 监听扫码事件
      const handleMessage = (event: MessageEvent) => {
        if (
          qrLoginInstance.matchOrigin(event.origin) &&
          qrLoginInstance.matchData(event.data)
        ) {
          setStatus("scanned");
          const tmpCode = event.data.tmp_code;
          // 跳转到飞书授权页，飞书验证后会 302 到 redirect_uri
          window.location.href = \`\${gotoUrl}&tmp_code=\${tmpCode}\`;
        }
      };
      window.addEventListener("message", handleMessage);
      return () => window.removeEventListener("message", handleMessage);
    };

    loadSdkAndInit().catch((err) => {
      if (!isCleanedUp) {
        setStatus("error");
        setErrorMessage(err.message);
      }
    });
    return () => { isCleanedUp = true; };
  }, [redirectUri, containerId, width, height, generateState]);

  return { status, errorMessage };
}

// pages/AuthCallback.tsx
export default function AuthCallback() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const hasProcessed = useRef(false); // 防止 StrictMode 双重执行

  useEffect(() => {
    if (hasProcessed.current) return;
    hasProcessed.current = true;

    const processCallback = async () => {
      const code = searchParams.get("code");
      const returnedState = searchParams.get("state");

      // 1. 校验 state（防 CSRF）
      const storedState = sessionStorage.getItem("feishu_oauth_state");
      if (!returnedState || returnedState !== storedState) {
        // 安全校验失败，终止流程
        return;
      }
      sessionStorage.removeItem("feishu_oauth_state");

      if (!code) return; // 授权码缺失

      // 2. 调用后端 Edge Function
      const redirectUri = \`\${window.location.origin}/auth/callback/feishu\`;
      const { data, error } = await supabase.functions.invoke("feishu-auth", {
        body: { code, redirect_uri: redirectUri },
      });

      // 3. 处理结果
      if (data?.error === "access_denied") {
        // 企业不在白名单中
        return;
      }
      if (data?.token_hash) {
        // 建立 Supabase 会话
        await supabase.auth.verifyOtp({
          token_hash: data.token_hash,
          type: "magiclink",
        });
        navigate("/", { replace: true });
      }
    };

    processCallback();
  }, [searchParams, navigate]);
}

// action === "qr_url" 分支
function handleQRUrl(body) {
  const appId = Deno.env.get("SUPERUN_FEISHU_APP_ID");
  const { redirect_uri, state } = body;

  const gotoUrl =
    \`https://passport.feishu.cn/suite/passport/oauth/authorize\` +
    \`?client_id=\${appId}\` +
    \`&redirect_uri=\${encodeURIComponent(redirect_uri)}\` +
    \`&response_type=code\` +
    \`&state=\${state}\`;

  return new Response(JSON.stringify({ goto_url: gotoUrl }));
}

// handleAuth 核心流程
async function handleAuth(body) {
  const appId = Deno.env.get("SUPERUN_FEISHU_APP_ID");
  const appSecret = Deno.env.get("SUPERUN_FEISHU_APP_SECRET");
  const allowedTenantKeys = Deno.env.get("SUPERUN_FEISHU_ALLOWED_TENANT_KEYS") || "";

  const { code, redirect_uri } = body;

  // ── Step 1: code 换 user_access_token (v2 API) ──
  // 注意: v2 API 返回的 access_token 在响应顶层，不在 data 中
  const tokenResponse = await fetch(
    "https://open.feishu.cn/open-apis/authen/v2/oauth/token",
    {
      method: "POST",
      headers: { "Content-Type": "application/json; charset=utf-8" },
      body: JSON.stringify({
        grant_type: "authorization_code",
        client_id: appId,
        client_secret: appSecret,
        code,
        redirect_uri,
      }),
    }
  );
  const tokenData = await tokenResponse.json();
  if (tokenData.code !== 0 || !tokenData.access_token) {
    // 错误: tokenData.error_description 包含详细信息
    return errorResponse(401, tokenData);
  }

  // ── Step 2: 获取用户信息 ──
  const userInfoResponse = await fetch(
    "https://open.feishu.cn/open-apis/authen/v1/user_info",
    {
      method: "GET",
      headers: {
        Authorization: \`Bearer \${tokenData.access_token}\`,
        "Content-Type": "application/json; charset=utf-8",
      },
    }
  );
  const userInfoData = await userInfoResponse.json();
  const feishuUser = userInfoData.data;

  // ── Step 3: 企业白名单校验（可选）──
  const allowedList = allowedTenantKeys.split(",").map(k => k.trim()).filter(Boolean);
  if (allowedList.length > 0 && !allowedList.includes(feishuUser.tenant_key)) {
    return new Response(
      JSON.stringify({ error: "access_denied", message: "您的企业未被授权访问此应用" }),
      { status: 403 }
    );
  }

  // ── Step 4: 查找或创建 Supabase 用户 ──
  const virtualEmail = \`feishu_\${feishuUser.open_id}@oauth.local\`;
  const userMetadata = {
    oauth_provider: "feishu",
    oauth_open_id: feishuUser.open_id,
    name: feishuUser.name,
    ...feishuUser,
  };

  // 查 user_identities 表（service_role 绕过 RLS）
  const { data: existingIdentity } = await supabaseAdmin
    .from("user_identities")
    .select("id")
    .eq("oauth_provider", "feishu")
    .eq("oauth_open_id", feishuUser.open_id)
    .maybeSingle();

  if (existingIdentity) {
    // 更新已有用户的 metadata
    await supabaseAdmin.auth.admin.updateUserById(existingIdentity.id, { user_metadata: userMetadata });
  } else {
    // 创建新用户（触发器自动创建 user_identities 行）
    await supabaseAdmin.auth.admin.createUser({
      email: virtualEmail,
      email_confirm: true,
      user_metadata: userMetadata,
    });
  }

  // ── Step 5: 生成 magic link token ──
  const { data: linkData } = await supabaseAdmin.auth.admin.generateLink({
    type: "magiclink",
    email: virtualEmail,
  });

  return new Response(
    JSON.stringify({
      token_hash: linkData.properties?.hashed_token,
      user: feishuUser,
    }),
    { status: 200 }
  );
}

[functions.feishu-auth]
verify_jwt = false

// supabase/functions/feishu-tenant-info/index.ts
serve(async (req) => {
  const appId = Deno.env.get("SUPERUN_FEISHU_APP_ID");
  const appSecret = Deno.env.get("SUPERUN_FEISHU_APP_SECRET");

  // Step 1: 获取 tenant_access_token
  const tokenResponse = await fetch(
    "https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal",
    {
      method: "POST",
      headers: { "Content-Type": "application/json; charset=utf-8" },
      body: JSON.stringify({ app_id: appId, app_secret: appSecret }),
    }
  );
  const tokenData = await tokenResponse.json();

  // Step 2: 查询企业信息
  const tenantResponse = await fetch(
    "https://open.feishu.cn/open-apis/tenant/v2/tenant/query",
    {
      method: "GET",
      headers: {
        Authorization: \`Bearer \${tokenData.tenant_access_token}\`,
        "Content-Type": "application/json; charset=utf-8",
      },
    }
  );
  const tenantData = await tenantResponse.json();
  // tenantData.data.tenant 包含 name, tenant_key, display_id 等

  return new Response(JSON.stringify(tenantData.data));
});

CREATE TABLE public.user_identities (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  oauth_provider TEXT,        -- 'feishu' | null
  oauth_open_id TEXT,         -- 飞书 open_id
  raw_metadata JSONB DEFAULT '{}'::jsonb,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- 同一 provider + open_id 不能重复
CREATE UNIQUE INDEX unique_oauth_identity
  ON public.user_identities(oauth_provider, oauth_open_id)
  WHERE oauth_provider IS NOT NULL AND oauth_open_id IS NOT NULL;

// ✅ 正确
const tmpCode = event.data.tmp_code;

// ❌ 错误 — 把 event.data 当字符串解析
const tmpCode = (event.data as string)?.match(/tmp_code=([^&]+)/)?.[1];

[
  { "scope": "contact:user.base:readonly", "name": "获取用户基本信息", "type": "tenant" },
  { "scope": "tenant:tenant:readonly", "name": "获取企业信息（白名单校验用）", "type": "tenant" }
]

{
  "scopes": {
    "tenant": ["contact:user.base:readonly", "tenant:tenant:readonly"],
    "user": []
  }
}

[
  { "type": "redirect_url", "name": "重定向 URL", "description": "https://{project_domain}/auth/callback/feishu" }
]