4ステップで導入
フロントエンドでログイン開始
@tutu/id-sdk の createTutuId({ baseUrl, clientId }) でインスタンスを作成し、クリック時に idSdk.startLogin() を呼びます。SDK が PKCE ペアを生成し、TutuID の認可ページへリダイレクトします。
ユーザーがTutuIDで認可
/oauth/authorize の同意画面でユーザーが「許可」をクリック(認可済みなら自動でスキップ)。TutuID が client_id と redirect_uri のホワイトリストを検証後、認可コードを付けてあなたの /auth/callback に戻します。
コールバックページで code を取得
/auth/callback で idSdk.completeCallback() を呼び { code, codeVerifier } を取得します。この2値はあなた自身のバックエンドに渡し、ブラウザで直接 token を交換しないでください。
バックエンドで token 交換 → アカウント作成
あなたのバックエンドは code + codeVerifier を access_token に交換し、/userinfo で { sub, email, emailVerified, ... } を取得、sub でローカルアカウントをマッピングまたは作成し、自身のセッションを発行します。
★ アカウント乗っ取り防止(必ず遵守)
あなたのバックエンドはsub(アカウント一意ID)によってのみローカルアカウントを関連付け・作成できます。emailVerified === true の場合に限り、メールで既存のローカルアカウントに関連付けできます。そうでなければ独立したアカウントを作成し、メールは空にしてください。
理由:攻撃者は被害者のメールでTutuアカウントを先取り登録できます。未確認メールで統合すると、被害者のローカルアカウントを明け渡すことになります。これはCVE級のレッドラインです。
SDK API リファレンス
@tutu/id-sdk · 純クライアントサイド、依存ゼロ(Web Crypto + sessionStorage が必要)。
createTutuId({ baseUrl, clientId, redirectUri? }) SDK インスタンスを作成。redirectUri の既定は ${location.origin}/auth/callback で、dev/prod に自動適応します。
startLogin(scope?) PKCE ペアを生成し認可ページへリダイレクトして「Tutuアカウントでログイン」を開始します。
trySilentLogin(scope?) サイレントログイン:中央セッションがあり認可済みなら無感でコード交換、なければ即座にログアウト状態へフォールバック(ユーザーを妨げません)。
completeCallback() コールバックページで結果を解析:成功時は { code, codeVerifier }、失敗/キャンセル時は { error } を返します。
logoutEverywhere(returnTo?) 中央セッションをログアウトし、スイート全製品を連鎖的にサインアウトさせ、完了後 returnTo に戻ります。
まず動きを見てみますか?