คู่มือการเชื่อมต่อ
เพิ่ม «เข้าสู่ระบบด้วย Tutu» ให้ผลิตภัณฑ์ของคุณในสี่ขั้นตอนด้วย OAuth2 + PKCE
สี่ขั้นตอนเชื่อมต่อ
ฟรอนต์เอนด์เริ่มล็อกอิน
สร้างอินสแตนซ์ด้วย createTutuId({ baseUrl, clientId }) จาก @tutu/id-sdk แล้วเรียก idSdk.startLogin() เมื่อคลิก SDK จะสร้างคู่ PKCE และเปลี่ยนเส้นทางไปหน้าอนุญาตของ TutuId
ผู้ใช้อนุญาตบน TutuId
ที่หน้าจอยินยอม /oauth/authorize ผู้ใช้คลิก «อนุญาต» (ข้ามอัตโนมัติหากเคยอนุญาต) หลัง TutuId ตรวจ client_id และ allowlist ของ redirect_uri แล้วจะรีไดเรกต์กลับมายัง /auth/callback ของคุณพร้อมรหัสอนุญาต
หน้าคอลแบ็กรับ code
ที่ /auth/callback เรียก idSdk.completeCallback() เพื่อรับ { code, codeVerifier } ส่งสองค่านี้ให้แบ็กเอนด์ของคุณเอง อย่าแลก 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
อยากดูการทำงานก่อนไหม?