接入指南

用 OAuth2 + PKCE,四步为你的产品接入「用图图账号登录」。

四步接入

用 @tutu/id-sdk 的 createTutuId({ baseUrl, clientId }) 创建实例,点击时调 idSdk.startLogin()。SDK 自动生成 PKCE 对并跳转图图ID 授权页。

用户在 /oauth/authorize 同意屏点「允许」(已授权过则自动跳过)。图图ID 校验 client_id 与 redirect_uri 白名单后,带授权码回跳你的 /auth/callback。

在 /auth/callback 调 idSdk.completeCallback() 拿到 { code, codeVerifier }。把这两个值交给你自己的后端,别在浏览器直接换 token。

你的后端用 code + codeVerifier 换 access_token,调 /userinfo 拿 { sub, email, emailVerified, ... },按 sub 映射或创建本地账号,再签发你自己的会话。

你的后端只可按 sub(账号唯一 ID)关联或创建本地账号。仅当 emailVerified === true 时,才允许按邮箱关联既有本地账号;否则请建独立账号、邮箱置空。

原因:攻击者可用受害者邮箱抢注图图账号 —— 若按未验证邮箱合并,即等于把受害者的本地账号拱手交出。这是 CVE 级红线。

@tutu/id-sdk · 纯客户端、零依赖(需 Web Crypto + sessionStorage)。

createTutuId({ baseUrl, clientId, redirectUri? })

创建 SDK 实例。redirectUri 缺省为 ${location.origin}/auth/callback,dev/prod 自适应。

startLogin(scope?)

生成 PKCE 对并跳转授权页,发起「用图图账号登录」。

trySilentLogin(scope?)

静默登录:有中央会话且已授权则无感换码,否则立即回落登出态(不打断用户)。

completeCallback()

在回调页解析结果:成功回 { code, codeVerifier },失败/取消回 { error }。

logoutEverywhere(returnTo?)

注销中央会话,级联下线全家桶所有产品,完成后回到 returnTo。

想先看看效果?