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 những 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 được liệt kê ở đây để signInWithRedirect() hoạt động như dự kiến trong môi trường phát hành công khai, trên tất cả các trình duyệt.
Tổng quan
Để quy trình signInWithRedirect() diễn ra liền mạch cho bạn và người dùng, Firebase Authentication JavaScript SDK sử dụng một iframe trên nhiều nguồn kết nối với miền Firebase Hosting của ứng dụng.
Tuy nhiên, cơ chế này không hoạt động với những 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 người dùng muốn tắt các tính năng phân vùng bộ nhớ trên trình duyệt, nên thay vào đó, bạn nên áp dụng một trong các lựa chọn thiết lập sau cho ứng dụng của mình, tuỳ thuộc vào thông tin cụ thể về trường hợp sử dụng của bạn.
- Nếu lưu trữ ứng dụng bằng Lưu trữ Firebase trên một miền con của
firebaseapp.com, thì bạn sẽ không gặp phải vấn đề này và không cần làm gì cả. - Nếu bạn lưu trữ ứng dụng của mình bằng Firebase Hosting 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 của mình bằng một dịch vụ không phải Firebase, hãy sử dụng Lựa chọn 2, Lựa chọn 3, Lựa chọn 4 hoặc Lựa 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
Nếu đang lưu trữ ứng dụng bằng Firebase Hosting bằng một miền tuỳ chỉnh, bạn có thể định cấu hình Firebase SDK để sử dụng miền tuỳ chỉnh làm authDomain. Điều này đảm bảo rằng ứng dụng của bạn và iframe uỷ quyền sử dụng cùng một miền, giúp ngăn chặn vấn đề đă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). Đảm bảo rằng 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 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
authDomainmới vào danh sách URI chuyển hướng được uỷ quyền 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 nói chung, bạn có thể làm theo phần "Trước khi bắt đầu" trong bất kỳ nhà cung cấp nào để 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 có dạnghttps://<the-domain-that-serves-your-app>/__/auth/handler– dấu/__/auth/handlerở cuối là rất quan trọng.Tương tự, nếu bạn đang sử dụng một nhà cung cấp SAML, hãy thêm
authDomainmới vào URL Dịch vụ sử dụng xác nhận SAML (ACS).Đảm bảo
continue_uricủa bạn có trong danh sách miền được uỷ quyền.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.
Cách 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 sẽ đượ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());
```
Đă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 này không mượt mà đố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 gây ra vấn đề cho ứng dụng của bạn, thì bạn cần phải làm theo một trong các lựa chọn khác.
Cách 3: Uỷ quyền yêu cầu xác thực cho 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 tham số authDomain trong cấu hình firebase ("authDomain lưu trữ mã trợ lý đăng nhập chuyển hướng đến Nhà cung cấp danh tính. Nếu thành công, Nhà cung cấp danh tính 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. Lựa chọn này và lựa chọn sau (tự lưu trữ mã) sẽ loại bỏ quyền truy cập vào bộ nhớ trên nhiều nguồn gốc. Nếu không, quyền này sẽ bị trình duyệt chặn.
Thiết lập một proxy đảo ngược trên máy chủ ứng dụng để các yêu cầu GET/POST đến
https://<app domain>/__/auth/được chuyển tiếp đếnhttps://<project>.firebaseapp.com/__/auth/. Đảm bảo rằng trình duyệt không nhận thấy việc chuyển tiếp này; bạn không thể thực hiện việc này thông qua lệnh chuyển hướng 302.Nếu bạn đang sử dụng nginx để phân phát miền tuỳ chỉnh, thì cấu hình proxy đảo 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 Lựa chọn 1 để cập nhật
redirect_uri, URL ACS vàauthDomainđược uỷ quyền. Sau khi bạn triển khai lại ứng dụng, quyền truy cập vào bộ nhớ trên nhiều nguồn gốc sẽ không còn xảy ra nữa.
Cách 4: Tự lưu trữ mã trợ lý đă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 là tự lưu trữ mã trợ giúp đăng nhập Firebase. Tuy nhiên, phương pháp này không hoạt động đối với tính năng đăng nhập bằng Apple hoặc SAML. Chỉ sử dụng lựa chọn này nếu không thể thiết lập proxy đảo ngược theo lựa chọn 3.
Quá trình lưu trữ mã trợ lý gồm các bước sau:
Tải các tệp xuống để lưu trữ từ vị trí
<project>.firebaseapp.combằ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/__/auth/links wget https://<project>.firebaseapp.com/__/auth/links.js wget https://<project>.firebaseapp.com/__/firebase/init.jsonLư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à ví dụ về cách triển khai máy chủ mẫu để 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 định kỳ để đảm bảo nhận được 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àauthDomaincủa bạn. Sau khi bạn triển khai lại ứng dụng, quyền truy cập vào bộ nhớ trên nhiều nguồn gốc sẽ không còn xảy ra nữa.
Cách 5: Xử lý hoạt động đăng nhập bằng nhà cung cấp một cách độc lập
Firebase Authentication SDK cung cấp signInWithPopup() và signInWithRedirect() làm phương thức thuận tiện để bao bọc logic phức tạp và tránh cần đến một SDK khác. Bạn có thể hoàn toàn tránh sử dụng cả hai phương thức bằng cách đăng nhập độc lập vào nhà cung cấp của mình, sau đó dùng signInWithCredential() để trao đổi thông tin đăng nhập của nhà cung cấp lấy thông tin đăng nhập 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 một thông tin đăng nhập mới bằng Google 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(), các chức năng còn lại của ứng dụng sẽ hoạt động giống như trước đây.
Bạn có thể xem hướng dẫn về cách lấy thông tin đăng nhập Apple tại đây.