Playground

可切换区域 / 环境的真实接口测试台。顶部 Tab 切换 国内版（手机号 + 短信码） 和 国际版（邮箱 / OIDC） 两套登录形态。两个区域都遵循"先调 checkIdentifier 自动判定 login / signup"的统一模式（OIDC 例外，由提供商侧判定）。所有 SDK 调用与响应都会进入下方日志，方便调试。

真实接口

本页直接调用 Tripo 的 Ory 服务（国内 / 海外，多环境可切），操作会真实创建 / 修改账号，请勿对生产环境做随手测试。日志里的密码 / 验证码字段已被打码。

使用要点

区域 Tab顶部 Tab 切换 cn / oversea 区域。每次切区域会跳到该区域第一个环境并重建 TripoAuth 实例
环境切换区域内的 select 切换该区域可用的 basePath。每次切环境同样会重建实例并清空 session
Session 状态初始化时自动调 initTokenized() 检查 Cookie 会话；已登录时显示 identifier 与 JWT 过期倒计时
区域专属流程cn 区一张卡片，oversea 区有验证码 / 密码 / OIDC / 找回 / 改密 / 退出。除 OIDC 外，所有「登录入口」都是 checkIdentifier → 自动 createLoginFlow 或 createSignupFlow 的统一模式（业务上不再区分两者）
日志面板统一封装 track() 包装每次 SDK 调用，记录入参、成功响应、异常的 name / message / code

实现要点

整个页面由 4 个文件组成：

auth-store.ts —— 模块单例：TripoAuth 实例 + 响应式状态 + 区域 / 环境切换 + 日志数组 + track() 包装器
Playground.vue —— 外壳：顶部 bar（区域 Tab + 环境 select + session 状态） + 日志面板
DomesticFlows.vue —— 国内版区域内容：单卡片，checkIdentifier → createLoginFlow / createSignupFlow → send / code
InternationalFlows.vue —— 国际版区域内容：邮箱验证码 / 邮箱密码 / OIDC / 找回 / 改密 / 退出共 6 张卡片，验证码与密码两张登录卡片共用同一个 resolveAuthFlow helper 做 check 自动分流
OidcCallback.vue + oidc.md —— OIDC popup 的同源落地页（/auth/playground/oidc），按 ?env= 切环境后调 oidcCallback()，BroadcastChannel 通知主窗后由主窗关闭弹窗

OIDC 回调链路

popup 模式必须有一个同源的回调页，否则三方认证完成后弹窗里的 SDK 调不到 oidcCallback()，主窗永远收不到 tokenized。本仓的接线：

主窗 loginOidc(provider)：用 ${origin}/auth/playground/oidc?env=${当前环境} 作 returnTo 调 createLoginFlow(returnTo)
主窗调 flow.oidc(provider, { mode: 'popup' })：SDK 打开 popup 跳到 Kratos OIDC 入口，链路是 Kratos → Provider → Kratos → returnTo
popup 落地 /auth/playground/oidc：OidcCallback.vue 按 ?env= 调 setEnv 切到主窗同一个 basePath（保证 session cookie 能命中），然后调 auth.oidcCallback()
oidcCallback() 内部走 initTokenized() 拿 JWT，再 postChannelMessage({ flow, tokenized }) 往 BroadcastChannel 'tripo3d_auth' 发
主窗的 OidcChannel.openOidcPopup 监听同 channel，收到 tokenized → 调 setTokenized → 关闭 popup → resolve flow.oidc()
主窗 loginOidc 继续执行 await auth.tokenized() + syncTokenized → UI 显示已登录

业务集成时只需仿照这个 callback 页：在自己的应用里建一条同源路由（如 studio 的 /oidc），路由组件 onMounted 调 auth.oidcCallback() 即可。

模块单例的好处是多个 flow 卡片共享同一份 session / log 状态，区域子组件挂载即可调用。

track() 自带打码逻辑：password / code 字段在打印入参时只展示长度，避免日志泄漏敏感数据。

区域差异

区域	登录方式	说明
`国内版（cn）`	`checkIdentifier + 手机号 + 短信码`	与 fe-tripo-studio 国内站对齐：手机号 1[3-9]\d{9} + +86 前缀，自动分流 login / registration，注册附带 { receiveMarketing: true }
`国际版（oversea）`	`checkIdentifier + 邮箱（验证码 / 密码） / OIDC`	邮箱场景同样先 checkIdentifier 自动分流；OIDC 由提供商侧判定（google / discord / twitter / lark）

环境配置

预置 4 套环境（可在 auth-store.ts 的 ENV_OPTIONS 数组里增删），按区域分组：

环境	basePath	说明
`国内测试（cn）`	`https://auth-cn-test.tripo3d.com`	国内测试集群，推荐日常调试
`国内生产（cn）`	`https://auth-cn.tripo3d.com`	国内正式集群，谨慎操作
`海外 Staging（oversea）`	`https://auth-staging.tripo3d.ai`	海外预发布
`海外生产（oversea）`	`https://auth.tripo3d.ai`	海外正式集群，谨慎操作

源码参考

主组件：Playground.vue
国内版：DomesticFlows.vue
国际版：InternationalFlows.vue
共享 store：auth-store.ts

Playground ​

使用要点 ​

实现要点 ​

OIDC 回调链路 ​

区域差异 ​

环境配置 ​

源码参考 ​