微信扫码登录对接文档

用户扫码 → 微信授权 → 携带 code 回调到我们网站 → 后端用 code 换取用户信息 → 创建/匹配用户 → 建立登录会话

your-domain.com

VITE_WECHAT_OPEN_APP_ID=wxYOUR_OPEN_APP_ID

<Route path="/auth/wechat/callback" element={<WechatCallbackPage />} />

[functions.prod-wechat-auth]
verify_jwt = false

// 1. 从环境变量读取 AppID
const appid = import.meta.env.VITE_WECHAT_OPEN_APP_ID;
// 2. 加载微信 JS SDK
const script = document.createElement("script");
script.src = "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
// 3. 生成 CSRF 防护 state 并存入 sessionStorage
const state = crypto.randomUUID();
sessionStorage.setItem("wechat_oauth_state", state);
// 4. 构建回调地址
const redirectUri = `${window.location.origin}/auth/wechat/callback`;
// 5. 初始化二维码
new window.WxLogin({
  self_redirect: false,          // false = 扫码后当前窗口跳转
  id: "wechat-qr-container",    // 二维码容器 DOM 元素 ID
  appid,                         // 开放平台 AppID
  scope: "snsapi_login",        // 固定值，网站应用扫码登录
  redirect_uri: encodeURIComponent(redirectUri),
  state,                         // CSRF state
  style: "black",               // 二维码样式：black / white
});

// 1. 从 URL 获取参数
const code = searchParams.get("code");
const returnedState = searchParams.get("state");
// 2. CSRF 校验：对比回调 state 和 sessionStorage 中保存的 state
const savedState = sessionStorage.getItem("wechat_oauth_state");
if (!savedState || savedState !== returnedState) {
  // 安全校验失败，拒绝登录
  return;
}
sessionStorage.removeItem("wechat_oauth_state");
// 3. 调用后端 Edge Function
const { data } = await supabase.functions.invoke("prod-wechat-auth", {
  body: { action: "login", code },
});
// 4. 用返回的 token_hash 建立 Supabase 会话
await supabase.auth.verifyOtp({
  token_hash: data.token_hash,
  type: "magiclink",
});
// 5. 登录成功，跳转首页
navigate("/", { replace: true });

const hasProcessed = useRef(false);
useEffect(() => {
  if (hasProcessed.current) return;
  hasProcessed.current = true;
  // ... 处理逻辑
}, []);

import { isWechatBrowser } from "@/lib/wechat";
const inWechat = useMemo(() => isWechatBrowser(), []);
// 普通浏览器：默认展示手机号登录，微信扫码作为第三个 Tab
const [mode, setMode] = useState("phone");

export function isWechatBrowser(): boolean {
  if (typeof navigator === "undefined") return false;
  return /MicroMessenger/i.test(navigator.userAgent);
}

handleOAuthLogin(code, appId, appSecret, emailPrefix, providerLabel)

步骤 1: code → access_token + openid
─────────────────────────────────────
请求: GET https://api.weixin.qq.com/sns/oauth2/access_token
参数: appid, secret, code, grant_type=authorization_code
返回: { access_token, openid, unionid }

步骤 2: openid → 微信用户信息
──────────────────────────────
请求: GET https://api.weixin.qq.com/sns/userinfo
参数: access_token, openid, lang=zh_CN
返回: { nickname, headimgurl, sex, province, city, ... }

步骤 3: 创建或匹配 Supabase 用户
────────────────────────────────
邮箱格式: wx_{openid}@wechat.user
如果用户已存在则跳过创建。

步骤 4: 生成 Magic Link 令牌
────────────────────────────
使用 admin.generateLink({ type: "magiclink", email })
返回 token_hash 给前端，前端用 verifyOtp 建立会话。

步骤 5: 更新用户元数据
────────────────────────────
将微信昵称、头像等信息写入 user_metadata，
确保用户每次登录都能获取最新的微信资料。

{
  "email": "wx_{openid}@wechat.user",
  "user_metadata": {
    "oauth_provider": "wechat_open",
    "oauth_open_id": "{openid}",
    "wechat_openid": "{openid}",
    "wechat_unionid": "{unionid}",
    "wechat_nickname": "微信昵称",
    "avatar_url": "https://thirdwx.qlogo.cn/...",
    "provider": "wechat"
  }
}

发起扫码 → 生成 UUID 作为 state → 存入 sessionStorage
                                      ↓
微信回调 → 携带 state → 对比 sessionStorage 中的值
                                      ↓
                          匹配 → 继续登录
                          不匹配 → 拒绝（可能是伪造请求）

# 测试 login 接口（应返回 "授权码 (code) 不能为空" 或 "invalid code"，说明接口正常）
curl -X POST \
  https://<PROJECT_ID>.supabase.co/functions/v1/prod-wechat-auth \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <SUPABASE_ANON_KEY>" \
  -d '{"action": "login", "code": "test123"}'