Tài liệu này mô tả các phương pháp hay nhất để sử dụng tính năng đăng nhập bằng lệnh chuyển hướng trên các trình duyệt chặn cookie của bên thứ ba. Bạn phải làm theo một trong các lựa chọn nêu tại đây cho signInWithRedirect()
để hoạt động như dự kiến trong môi trường phát hành công khai và trên mọi trình duyệt.
Tổng quan
Để giúp luồng signInWithRedirect()
liền mạch với bạn và người dùng, SDK JavaScript xác thực Firebase sử dụng iframe trên nhiều nguồn gốc kết nối với miền Lưu trữ Firebase của ứng dụng.
Tuy nhiên, cơ chế này không hoạt động với các trình duyệt chặn quyền truy cập vào bộ nhớ của bên thứ ba.
Vì hiếm khi việc yêu cầu người dùng tắt tính năng phân vùng bộ nhớ trên trình duyệt, bạn nên áp dụng một trong các tuỳ chọn thiết lập sau đây cho ứng dụng, tuỳ thuộc vào trường hợp sử dụng cụ thể của bạn.
- Nếu bạn lưu trữ ứng dụng thông qua tính năng Lưu trữ Firebase trên miền con của
firebaseapp.com
, thì vấn đề này sẽ không ảnh hưởng đến bạn và bạn không cần làm gì cả. - Nếu bạn lưu trữ ứng dụng thông qua tính năng Lưu trữ Firebase trên một miền tuỳ chỉnh hoặc miền con của
web.app
, hãy sử dụng Lựa chọn 1. - Nếu bạn lưu trữ ứng dụng bằng một dịch vụ không phải Firebase, hãy sử dụng Tuỳ chọn 2, Tuỳ chọn 3, Tuỳ chọn 4 hoặc Tuỳ chọn 5.
Cách 1: Cập nhật cấu hình Firebase để sử dụng miền tuỳ chỉnh làm authDomain
của bạn
Nếu đang lưu trữ ứng dụng thông qua dịch vụ Lưu trữ Firebase bằng một miền tuỳ chỉnh, bạn có thể định cấu hình SDK Firebase để sử dụng miền tuỳ chỉnh của bạn làm authDomain
. Điều này đảm bảo rằng ứng dụng và iframe xác thực sử dụng cùng một miền, nhờ đó giúp ngăn chặn sự cố đăng nhập. (Nếu không sử dụng tính năng Lưu trữ Firebase, bạn cần sử dụng một lựa chọn khác.). Hãy đảm bảo bạn đã thiết lập miền tuỳ chỉnh trên cùng một dự án mà bạn đang dùng để xác thực.
Để cập nhật cấu hình Firebase nhằm sử dụng miền tuỳ chỉnh làm miền xác thực, hãy làm như sau:
Định cấu hình Firebase JS SDK để sử dụng miền tuỳ chỉnh của bạn làm
authDomain
:const firebaseConfig = { apiKey: "<api-key>", authDomain: "<the-domain-that-serves-your-app>", databaseURL: "<database-url>", projectId: "<project-id>", appId: "<app-id>" };
Thêm
authDomain
mới vào danh sách URI chuyển hướng được phép của nhà cung cấp OAuth. Cách thực hiện việc này sẽ tuỳ thuộc vào nhà cung cấp, nhưng nhìn chung, bạn có thể làm theo phần "Trước khi bắt đầu" của nhà cung cấp bất kỳ để biết hướng dẫn chính xác (ví dụ: nhà cung cấp Facebook). URI được cập nhật để uỷ quyền trông giống nhưhttps://<the-domain-that-serves-your-app>/__/auth/handler
—/__/auth/handler
theo sau rất quan trọng.Tương tự, nếu bạn đang sử dụng nhà cung cấp SAML, hãy thêm
authDomain
mới vào URL của Dịch vụ người tiêu dùng xác nhận SAML (ACS).Đảm bảo
continue_uri
của bạn có trong danh sách miền được cấp phép.Triển khai lại bằng tính năng Lưu trữ Firebase nếu cần để tìm nạp tệp cấu hình Firebase mới nhất được lưu trữ tại
/__/firebase/init.json
.
Lựa chọn 2: Chuyển sang signInWithPopup()
Sử dụng signInWithPopup()
thay vì signInWithRedirect()
. Phần còn lại của mã trong ứng dụng của bạn vẫn giữ nguyên, nhưng đối tượng UserCredential được truy xuất theo cách khác.
Web
// Before
// ==============
signInWithRedirect(auth, new GoogleAuthProvider());
// After the page redirects back
const userCred = await getRedirectResult(auth);
// After
// ==============
const userCred = await signInWithPopup(auth, new GoogleAuthProvider());
Web
// Before
// ==============
firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
// After the page redirects back
var userCred = await firebase.auth().getRedirectResult();
// After
// ==============
var userCred = await firebase.auth().signInWithPopup(
new firebase.auth.GoogleAuthProvider());
```
Tính năng đăng nhập bằng cửa sổ bật lên không phải lúc nào cũng lý tưởng cho người dùng. Đôi khi, cửa sổ bật lên bị thiết bị hoặc nền tảng chặn và quy trình đăng nhập ít suôn sẻ hơn đối với người dùng thiết bị di động. Nếu ứng dụng gặp vấn đề với việc sử dụng cửa sổ bật lên, thì bạn cần làm theo một trong những tuỳ chọn khác.
Cách 3: Yêu cầu xác thực proxy đến firebaseapp.com
Quy trình signInWithRedirect
bắt đầu bằng cách chuyển hướng từ miền ứng dụng của bạn đến miền được chỉ định trong thông số authDomain
trong cấu hình Firebase ("authDomain
lưu trữ mã trợ giúp đăng nhập chuyển hướng đến Nhà cung cấp danh tính. Khi thành công, mã này sẽ chuyển hướng trở lại miền ứng dụng.
Khi quy trình xác thực quay lại miền ứng dụng của bạn, bộ nhớ trình duyệt của miền trợ giúp đăng nhập sẽ được truy cập. Tuỳ chọn này và tuỳ chọn sau (để tự lưu trữ mã) loại bỏ quyền truy cập vào bộ nhớ trên nhiều nguồn gốc mà nếu không thì sẽ bị trình duyệt chặn.
Thiết lập proxy ngược trên máy chủ ứng dụng để các yêu cầu GET/POST tới
https://<app domain>/__/auth/
được chuyển tiếp đếnhttps://<project>.firebaseapp.com/__/auth/
. Hãy đảm bảo rằng quá trình chuyển tiếp này minh bạch với trình duyệt; bạn không thể thực hiện việc này thông qua Chuyển hướng 302.Nếu bạn đang sử dụng nginx để phân phối miền tuỳ chỉnh của mình, cấu hình proxy ngược sẽ có dạng như sau:
# reverse proxy for signin-helpers for popup/redirect sign in. location /__/auth { proxy_pass https://<project>.firebaseapp.com; }
Làm theo các bước trong Cách 1 để cập nhật
redirect_uri
, URL ACS vàauthDomain
đã được cấp phép. Sau khi triển khai lại ứng dụng, bạn sẽ không thể tiếp tục truy cập vào bộ nhớ trên nhiều nguồn gốc nữa.
Cách 4: Tự lưu trữ mã trình trợ giúp đăng nhập trong miền của bạn
Một cách khác để loại bỏ quyền truy cập vào bộ nhớ trên nhiều nguồn gốc là tự lưu trữ mã trợ giúp đăng nhập vào Firebase. Tuy nhiên, phương pháp này không phù hợp với tính năng đăng nhập của Apple hoặc SAML. Chỉ sử dụng tuỳ chọn này nếu việc thiết lập proxy ngược trong lựa chọn 3 không khả thi.
Quy trình lưu trữ mã trợ giúp gồm các bước sau:
Tải các tệp xuống máy chủ lưu trữ từ vị trí
<project>.firebaseapp.com
bằng cách thực thi các lệnh sau:mkdir signin_helpers/ && cd signin_helpers wget https://<project>.firebaseapp.com/__/auth/handler wget https://<project>.firebaseapp.com/__/auth/handler.js wget https://<project>.firebaseapp.com/__/auth/experiments.js wget https://<project>.firebaseapp.com/__/auth/iframe wget https://<project>.firebaseapp.com/__/auth/iframe.js wget https://<project>.firebaseapp.com/__/firebase/init.json
Lưu trữ các tệp trên trong miền ứng dụng của bạn. Đảm bảo rằng máy chủ web của bạn có thể phản hồi
https://<app domain>/__/auth/<filename>
vàhttps://<app domain>/__/firebase/init.json
.Sau đây là cách triển khai máy chủ mẫu sẽ tải xuống và lưu trữ các tệp. Bạn nên tải xuống và đồng bộ hoá các tệp theo định kỳ để đảm bảo cập nhật các bản sửa lỗi và tính năng mới nhất.
Làm theo các bước trong Cách 1 để cập nhật
redirect_uri
được uỷ quyền vàauthDomain
của bạn. Sau khi triển khai lại ứng dụng, bạn sẽ không thể tiếp tục truy cập vào bộ nhớ trên nhiều nguồn gốc nữa.
Cách 5: Xử lý hoạt động đăng nhập của nhà cung cấp một cách độc lập
SDK xác thực Firebase cung cấp signInWithPopup()
và signInWithRedirect()
làm phương thức thuận tiện để gói logic phức tạp và tránh cần sử dụng một SDK khác. Bạn có thể tránh sử dụng toàn bộ một trong hai phương thức bằng cách đăng nhập độc lập vào trình cung cấp của mình, sau đó sử dụng signInWithCredential()
để đổi thông tin đăng nhập của trình cung cấp lấy thông tin xác thực Firebase.
Ví dụ: bạn có thể sử dụng SDK đăng nhập bằng Google, mã mẫu để lấy thông tin đăng nhập Tài khoản Google, sau đó tạo thông tin đăng nhập Google mới bằng cách chạy mã sau:
Web
// `googleUser` from the onsuccess Google Sign In callback.
// googUser = gapi.auth2.getAuthInstance().currentUser.get();
const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
const result = await signInWithCredential(auth, credential);
Web
// `googleUser` from the onsuccess Google Sign In callback.
const credential = firebase.auth.GoogleAuthProvider.credential(
googleUser.getAuthResponse().id_token);
const result = await firebase.auth().signInWithCredential(credential);
Sau khi bạn gọi signInWithCredential()
, phần còn lại của ứng dụng sẽ hoạt động giống như trước đây.
Xem hướng dẫn cách lấy thông tin đăng nhập Apple tại đây.