เข้าร่วมรายชื่อรอ
บทความทั้งหมด
OAuthlocal developmentauthenticationcallbacks

วิธีทดสอบ OAuth callback บนเครื่องโลคัล

การทดสอบ OAuth callback บนเครื่องโลคัล ต้องมี URL HTTPS สาธารณะที่ชี้มายังแอปบนเครื่องของคุณ ผู้ให้บริการ OAuth จะรีไดเรกต์ผู้ใช้กลับไปยัง URL callback ที่ลงทะเบียนไว้หลังการยืนยันตัวตน และส่วนใหญ่ต้องการ HTTPS ซึ่ง localhost เปล่าๆ ไม่สามารถให้ได้หากไม่มีการตั้งค่าเพิ่ม

ทำไม redirect URI ของ OAuth จึงบล็อก localhost

ผู้ให้บริการ OAuth 2.0 จะตรวจสอบพารามิเตอร์ redirect_uri เทียบกับ whitelist ของ URL ที่ลงทะเบียนไว้ ระหว่างพัฒนา callback ของคุณอาจมีหน้าตาแบบนี้:

https://your-app.portpreview.dev/auth/callback

หากไม่มีทันเนล คุณต้องลงทะเบียน http://localhost:3000/auth/callback (ผู้ให้บริการบางรายอนุญาต แต่ไม่ใช่ทั้งหมด) หรือดีพลอยขึ้น staging ทุกครั้งที่เปลี่ยน auth ทันเนล localhost ให้ endpoint HTTPS จริงบนเครื่องของคุณ

สิ่งที่ต้องใช้ในการทดสอบ OAuth บนเครื่องโลคัล

  • ข้อมูลรับรองแอป OAuth (client ID และ secret) จากผู้ให้บริการ
  • แอปบนเครื่องโลคัลที่มี route สำหรับเริ่ม login และจัดการ callback
  • URL ทันเนลที่ลงทะเบียนเป็น redirect URI ที่อนุญาตในแดชบอร์ดของผู้ให้บริการ
  • ตัวแปรสภาพแวดล้อมที่ชี้ไปยัง URL ทันเนลระหว่างพัฒนา

ทีละขั้นตอน: ทดสอบ OAuth บนเครื่องโลคัลด้วย PortPreview

  1. รันแอปบนเครื่องโลคัลโดยเปิดใช้งาน route ของ OAuth
  2. รัน npx portpreview 3000 เพื่อรับ URL HTTPS สาธารณะ
  3. เพิ่ม URL callback (เช่น https://your-app.portpreview.dev/auth/callback) ไปยัง redirect URI ที่อนุญาตของผู้ให้บริการ OAuth
  4. อัปเดตสภาพแวดล้อมโลคัลให้ใช้ URL ทันเนลเป็น base URL
  5. เริ่มฟลว์ OAuth ในเบราว์เซอร์และทำวงจรการรีไดเรกต์ให้ครบ
  6. ตรวจสอบการแลกเปลี่ยนโทเคน การสร้างเซสชัน และการจัดการข้อผิดพลาด

เคล็ดลับเฉพาะผู้ให้บริการ

Google OAuth

Google อนุญาต http://localhost สำหรับพัฒนา แต่การทดสอบด้วยทันเนล HTTPS ช่วยตรวจสอบพฤติกรรมที่ใกล้เคียงโปรดักชัน รวมถึง secure cookie flag และนโยบาย mixed content

GitHub OAuth

GitHub ต้องการให้ redirect URI ตรงกันทุกตัวอักษร ลงทะเบียน URL ทันเนลในการตั้งค่าแอป OAuth และอัปเดตเมื่อเซสชันทันเนลเปลี่ยน หรือใช้ subdomain ที่เสถียรหากผู้ให้บริการทันเนลรองรับ

Auth0 และ IdP ระดับองค์กร

ผู้ให้บริการระบุตัวตนระดับองค์กรมักต้องการ callback แบบ HTTPS และบางครั้งจำกัด localhost ทั้งหมด ทันเนลเป็นวิธีแก้มาตรฐานสำหรับการทดสอบ integration SAML และ OIDC บนเครื่องโลคัล

ข้อผิดพลาดที่พบบ่อยในการทดสอบ OAuth บนเครื่องโลคัล

  • redirect URI ไม่ตรงกัน: URL callback ต้องตรงกันทุกประการ รวมถึงเครื่องหมาย slash ท้ายและตัวพิมพ์เล็กพิมพ์ใหญ่ใน path
  • URL ทันเนลล้าสมัย: หาก URL ทันเนลเปลี่ยนระหว่างเซสชัน ให้อัปเดต whitelist ของผู้ให้บริการ
  • ไม่ตรวจสอบพารามิเตอร์ state: ตรวจสอบพารามิเตอร์ state เสมอเพื่อป้องกันการโจมตี CSRF แม้ระหว่างพัฒนา
  • ปัญหา domain ของ cookie: cookie เซสชันอาจไม่คงอยู่หากการตั้งค่า domain ขัดกับ hostname ของทันเนล

ข้อพิจารณาด้านความปลอดภัย

OAuth callback นำพา authorization code ที่ต้องแลกเปลี่ยนฝั่งเซิร์ฟเวอร์ อย่าเปิดเผย client secret ในโค้ดฝั่ง frontend และปฏิบัติต่อ URL ทันเนลเป็น endpoint สำหรับพัฒนาชั่วคราว ไม่ใช่โดเมนโปรดักชัน อ่าน คู่มือความปลอดภัยทันเนล localhost ของเราเพื่อดูแนวปฏิบัติที่ดี

แชร์ฟลว์ OAuth กับทีม

เมื่อทีมผลิตภัณฑ์หรือ QA ต้องทดสอบ social login ให้แชร์ URL ทันเนลแทนการดีพลอยขึ้น staging ดู วิธีแชร์เซิร์ฟเวอร์ dev บนเครื่องโลคัล สำหรับเวิร์กโฟลว์การทำงานร่วมกัน

เข้าร่วม waitlist ของ PortPreview เพื่อทำให้การทดสอบ OAuth และ Webhook จากทันเนลเดียวราบรื่นยิ่งขึ้น

คำถามที่พบบ่อย

ทดสอบ OAuth บน localhost ได้ไหม?
ได้ ผู้ให้บริการ OAuth ส่วนใหญ่อนุญาต redirect URI แบบ http://localhost แต่หลายรายต้องการ HTTPS สำหรับการทดสอบที่ใกล้เคียงโปรดักชัน ทันเนล localhost ให้ URL HTTPS สาธารณะที่แมปกับแอปบนเครื่องของคุณ
ทำไมผู้ให้บริการ OAuth จึงต้องการ redirect URI แบบ HTTPS?
HTTPS ปกป้อง authorization code และโทเคนระหว่างส่งผ่านในการรีไดเรกต์ ผู้ให้บริการหลายรายบังคับใช้ HTTPS เพื่อป้องกันการดักจับข้อมูลรับรองที่ละเอียดอ่อนบนเครือข่ายที่ไม่ปลอดภัย
จะลงทะเบียน URL ทันเนลเป็น redirect URI ของ OAuth ได้อย่างไร?
คัดลอก URL HTTPS ของทันเนล ต่อ path ของ callback แล้วเพิ่ม URL เต็มลงในรายการ redirect URI ที่อนุญาตในแดชบอร์ดนักพัฒนาของผู้ให้บริการ