接入指南

用 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。

想先看看效果?