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 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 tùy chọn được liệt kê ở đây để signInWithRedirect()
hoạt động như dự định trong môi trường sản xuất, trên tất cả các trình duyệt.
Tổng quan
Để giúp luồng signInWithRedirect()
liền mạch cho bạn và người dùng của bạn, SDK JavaScript xác thực Firebase sử dụng iframe nhiều nguồn gốc kết nối với miền Lưu trữ Firebase của ứng dụng của bạn. 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 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 nên bạn nên áp dụng một trong các tùy chọn thiết lập sau cho ứng dụng của mình, tùy thuộc vào chi tiết cụ thể trong trường hợp sử dụng của bạn.
- Nếu bạn lưu trữ ứng dụng của mình bằng Dịch vụ lưu trữ Firebase trên miền phụ của
firebaseapp.com
thì bạn sẽ không bị ảnh hưởng bởi sự cố này và không cần thực hiện hành động nào. - Nếu bạn lưu trữ ứng dụng của mình bằng Dịch vụ lưu trữ Firebase trên miền tùy chỉnh hoặc miền phụ của
web.app
, hãy sử dụng Tùy chọn 1 . - Nếu bạn lưu trữ ứng dụng của mình bằng dịch vụ không phải Firebase, hãy sử dụng Tùy chọn 2 , Tùy chọn 3 , Tùy chọn 4 hoặc Tùy chọn 5 .
Tùy chọn 1: Cập nhật cấu hình Firebase để sử dụng miền tùy chỉnh làm authDomain
của bạn
Nếu đang lưu trữ ứng dụng của mình bằng Dịch vụ lưu trữ Firebase bằng miền tùy chỉnh, bạn có thể định cấu hình SDK Firebase để sử dụng miền tùy chỉnh của mình làm authDomain
. Điều này đảm bảo rằng ứng dụng của bạn và iframe xác thực sử dụng cùng một miền, điều này ngăn chặn sự cố đăng nhập. (Nếu không sử dụng Firebase Hosting, bạn cần sử dụng tùy chọn khác.)
Để cập nhật cấu hình Firebase nhằm sử dụng miền tùy chỉnh làm miền xác thực, hãy làm như sau:
Định cấu hình SDK JS Firebase để sử dụng miền tùy 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 ủy quyền của nhà cung cấp OAuth của bạn. Cách bạn thực hiện việc này sẽ tùy 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" ở bất kỳ nhà cung cấp nào để có hướng dẫn chính xác (ví dụ: nhà cung cấp Facebook ). URI được cập nhật để ủy quyền có dạng nhưhttps://<the-domain-that-serves-your-app>/__/auth/handler
— dấu/__/auth/handler
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 Dịch vụ người tiêu dùng xác nhận SAML (ACS).
Tùy chọn 2: Chuyển sang signInWithPopup()
Sử dụng signInWithPopup()
thay vì signInWithRedirect()
. Phần còn lại của mã ứng dụng vẫn giữ nguyên nhưng đối tượng UserCredential được truy xuất theo cách khác.
API mô-đun web
// Before
// ==============
signInWithRedirect(auth, new GoogleAuthProvider());
// After the page redirects back
const userCred = await getRedirectResult(auth);
// After
// ==============
const userCred = await signInWithPopup(auth, new GoogleAuthProvider());
API không gian tên 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());
```
Đă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—cửa sổ bật lên đôi khi bị thiết bị hoặc nền tảng chặn và quy trình đăng nhập kém suôn sẻ hơn đối với người dùng thiết bị di động. Nếu việc sử dụng cửa sổ bật lên là một vấn đề đối với ứng dụng của bạn thì bạn cần thực hiện theo một trong các tùy chọn khác.
Tùy chọn 3: Yêu cầu xác thực proxy tới firebaseapp.com
Luồng signInWithRedirect
bắt đầu bằng cách chuyển hướng từ miền ứng dụng của bạn sang miền được chỉ định trong tham số authDomain
trong cấu hình firebase ("authDomain
lưu trữ mã trợ giúp đăng nhập sẽ chuyển hướng đến Nhà cung cấp danh tính, nếu thành công sẽ chuyển hướng trở lại miền ứng dụng.
Khi luồng xác thực quay trở 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. Tùy chọn này và tùy chọn sau (để tự lưu trữ mã) sẽ loại bỏ quyền truy cập vào bộ lưu trữ nhiều nguồn gốc, nếu không sẽ bị trình duyệt chặn.
Thiết lập proxy ngược trên máy chủ ứng dụng của bạn để các yêu cầu GET/POST tới
https://<app domain>/__/auth/
được chuyển tiếp đếnhttps://<project>.firebaseapp.com/__/auth/
. Đảm bảo rằng việc chuyển tiếp này là minh bạch đối với trình duyệt; điều này không thể được thực hiện thông qua Chuyển hướng 302.Nếu bạn đang sử dụng nginx để phục vụ miền tùy chỉnh của mình, cấu hình proxy ngược sẽ trông như thế này:
# reverse proxy for signin-helpers for popup/redirect sign in. location /__/auth { proxy_pass https://<project>.firebaseapp.com; }
Thực hiện theo các bước trong Tùy chọn 1 để cập nhật
redirect_uri
, URL ACS vàauthDomain
được ủy quyền của bạn. Sau khi bạn triển khai lại ứng dụng của mình, quyền truy cập vào bộ nhớ nhiều nguồn gốc sẽ không còn xảy ra nữa.
Tùy chọn 4: Tự lưu trữ mã 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ớ nhiều nguồn là tự lưu trữ mã trợ giúp đăng nhập Firebase. Tuy nhiên, phương pháp này không hiệu quả đối với đăng nhập Apple hoặc SAML. Chỉ sử dụng tùy chọn này nếu thiết lập proxy ngược trong tùy chọn 3 không khả thi.
Lưu trữ mã trợ giúp có các bước sau:
Tải các tệp xuống máy chủ từ vị trí
<project>.firebaseapp.com
bằng cách thực hiện 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
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>
.Đây là cách triển khai máy chủ mẫu để tải xuống và lưu trữ các tệp. Chúng tôi khuyên bạn nên tải xuống và đồng bộ hóa các tệp định kỳ để đảm bảo rằng các bản sửa lỗi và tính năng mới nhất được chọn.
Thực hiện theo các bước trong Tùy chọn 1 để cập nhật
redirect_uri
được ủy quyền vàauthDomain
của bạn. Sau khi bạn triển khai lại ứng dụng của mình, quyền truy cập vào bộ nhớ nhiều nguồn gốc sẽ không còn xảy ra nữa.
Tùy chọn 5: Xử lý việc đă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 tiện lợi để bao bọc logic phức tạp và tránh cần phải liên quan đến SDK khác. Bạn có thể tránh sử dụng hoàn toàn một trong hai phương pháp bằng cách đăng nhập độc lập vào nhà cung cấp của mình, sau đó sử dụng signInWithCredential()
để trao đổi thông tin xác thực của 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 Google , mã mẫu để lấy thông tin xác thực tài khoản Google, sau đó tạo thông tin xác thực Google mới bằng cách chạy mã sau:
API mô-đun 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);
API không gian tên 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.
Hướng dẫn lấy thông tin xác thực của Apple có tại đây .