Có thể kiểm thử OAuth trên localhost không?

Có. Phần lớn nhà cung cấp OAuth cho phép redirect URI dạng http://localhost, nhưng nhiều bên yêu cầu HTTPS để kiểm thử gần với production. Tunnel localhost cung cấp một URL HTTPS công khai ánh xạ tới ứng dụng cục bộ của bạn.

Vì sao nhà cung cấp OAuth yêu cầu redirect URI HTTPS?

HTTPS bảo vệ mã ủy quyền và token khi truyền trong quá trình chuyển hướng. Nhiều nhà cung cấp bắt buộc HTTPS để ngăn việc đánh chặn thông tin nhạy cảm trên mạng không an toàn.

Làm sao đăng ký URL tunnel làm redirect URI của OAuth?

Sao chép URL HTTPS của tunnel, thêm đường dẫn callback, rồi thêm URL đầy đủ vào danh sách redirect URI được phép trong dashboard nhà phát triển của nhà cung cấp.

Cách kiểm thử OAuth callback trên máy cục bộ

Để kiểm thử OAuth callback trên máy cục bộ, bạn cần một URL HTTPS công khai trỏ tới ứng dụng cục bộ. Sau khi xác thực, nhà cung cấp OAuth chuyển hướng người dùng về một URL callback đã đăng ký — và phần lớn yêu cầu HTTPS, điều mà localhost thuần túy không thể cung cấp nếu không cấu hình thêm.

Vì sao redirect URI của OAuth chặn localhost

Nhà cung cấp OAuth 2.0 xác thực tham số redirect_uri dựa trên một whitelist các URL đã đăng ký. Khi phát triển, callback của bạn có thể trông như sau:

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

Nếu không có tunnel, bạn hoặc đăng ký http://localhost:3000/auth/callback (một số nhà cung cấp cho phép, nhưng không phải tất cả), hoặc deploy lên staging cho mỗi thay đổi auth. Một tunnel localhost cho bạn một endpoint HTTPS thật trên máy mình.

Bạn cần gì để kiểm thử OAuth cục bộ

Thông tin xác thực app OAuth (client ID và secret) từ nhà cung cấp.
Một ứng dụng cục bộ có các route auth để khởi tạo login và xử lý callback.
Một URL tunnel được đăng ký làm redirect URI được phép trong dashboard của nhà cung cấp.
Biến môi trường trỏ tới URL tunnel khi phát triển.

Từng bước: kiểm thử OAuth cục bộ với PortPreview

Khởi chạy ứng dụng cục bộ với các route OAuth được bật.
Chạy npx portpreview 3000 để lấy URL HTTPS công khai.
Thêm URL callback (ví dụ https://your-app.portpreview.dev/auth/callback) vào danh sách redirect URI được phép của nhà cung cấp OAuth.
Cập nhật môi trường cục bộ để dùng URL tunnel làm base URL.
Khởi tạo luồng OAuth trên trình duyệt và hoàn thành toàn bộ chu trình chuyển hướng.
Xác minh việc trao đổi token, tạo session và xử lý lỗi.

Mẹo theo từng nhà cung cấp

Google OAuth

Google cho phép http://localhost khi phát triển, nhưng kiểm thử với tunnel HTTPS sẽ xác thực hành vi gần với production, bao gồm cờ secure cookie và chính sách mixed content.

GitHub OAuth

GitHub yêu cầu redirect URI khớp chính xác. Đăng ký URL tunnel trong cài đặt app OAuth và cập nhật khi phiên tunnel thay đổi, hoặc dùng subdomain ổn định nếu nhà cung cấp tunnel hỗ trợ.

Auth0 và IdP doanh nghiệp

Các nhà cung cấp danh tính doanh nghiệp thường yêu cầu callback HTTPS và đôi khi chặn hoàn toàn localhost. Tunnel là giải pháp chuẩn cho kiểm thử tích hợp SAML và OIDC cục bộ.

Các lỗi thường gặp khi kiểm thử OAuth cục bộ

Redirect URI không khớp: URL callback phải khớp chính xác, bao gồm dấu gạch chéo cuối và phân biệt hoa thường trong path.
URL tunnel cũ: nếu URL tunnel đổi giữa các phiên, hãy cập nhật whitelist của nhà cung cấp.
Không xác thực tham số state: luôn kiểm tra tham số state để ngăn tấn công CSRF, kể cả khi phát triển.
Vấn đề domain cookie: cookie session có thể không được giữ nếu cấu hình domain xung đột với hostname của tunnel.

Các lưu ý bảo mật

OAuth callback mang mã ủy quyền phải được trao đổi ở phía máy chủ. Đừng bao giờ lộ client secret trong code frontend, và hãy xem URL tunnel như endpoint phát triển tạm thời, không phải domain production. Đọc hướng dẫn bảo mật tunnel localhost của chúng tôi để biết các thực hành tốt.

Chia sẻ luồng OAuth với đồng đội

Khi product hoặc QA cần kiểm thử đăng nhập mạng xã hội, hãy chia sẻ URL tunnel thay vì deploy lên staging. Xem cách chia sẻ server dev cục bộ để biết quy trình cộng tác.

Tham gia danh sách chờ PortPreview để tinh gọn việc kiểm thử OAuth và webhook từ một tunnel.