Các phương pháp hay nhất để sử dụng signInWith Redirect trên trình duyệt chặn quyền truy cập vào bộ nhớ của bên thứ ba

Tài liệu này mô tả các phương pháp hay nhất để sử dụng chức năng đăng nhập bằng lệnh chuyển hướng trên 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 Quy trình 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ẽ 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 bên thứ ba quyền truy cập vào bộ nhớ.

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 bằng 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 Phương á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 của bạn

Nếu đang lưu trữ ứng dụng với tính năng Lưu trữ Firebase bằng 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. Chiến dịch 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 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 tuỳ chọn khác). Hãy đảm bảo rằng bạn đã thiết lập miền tuỳ chỉnh trên cùng một miền dự án mà bạn đang sử 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 thực hiện như sau:

  1. Đị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>"
};

  1. Thêm authDomain mới vào danh sách người dùng được uỷ quyền của nhà cung cấp OAuth URI chuyển hướng. Cách bạn 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 hướng dẫn trong phần "Trước khi bắt đầu" trong bất kỳ nhà cung cấp nào (ví dụ: nhà cung cấp Facebook). URI đã cập nhật thành uỷ quyền trông giống như https://<the-domain-that-serves-your-app>/__/auth/handler — đứng sau /__/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 của Dịch vụ người tiêu dùng xác nhận SAML (ACS).

  2. Đảm bảo continue_uri của bạn có trong danh sách miền được cấp phép.

  3. 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(). Chiến lược phát hành đĩa đơn phần mã còn lại của ứng dụng 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());
```

Đă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 đối với người dùng—cửa sổ bật lên đôi khi bị chặn bởi thiết bị hoặc nền tảng và quy trình sẽ ít suôn sẻ hơn đối với người dùng thiết bị di động. Nếu 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, bạn sẽ cần thực hiện theo một trong hai .

Cách 3: Yêu cầu xác thực proxy đến 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 đến miền được chỉ định trong thông số authDomain trong cấu hình Firebase (".firebaseapp.com" theo mặc định). authDomain lưu trữ trình trợ giúp đăng nhập mã chuyển hướng đến Nhà cung cấp danh tính, khi thành công, sẽ chuyển hướng trở lại cho miền ứng dụng.

Khi luồng xác thực trở lại miền ứng dụng của bạn, bộ nhớ của trình duyệt bạn đã truy cập vào miền của trình trợ giúp đăng nhập. Lựa chọn này và tiếp theo (để 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, vốn sẽ bị trình duyệt chặn.

  1. Thiết lập proxy ngược trên máy chủ ứng dụng của bạn để yêu cầu GET/POST https://<app domain>/__/auth/ được chuyển tiếp đến https://<project>.firebaseapp.com/__/auth/. Đảm bảo rằng quá trình chuyển tiếp này minh bạch đối với trình duyệt; thì 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;
}

  2. Làm theo các bước trong Phương án 1 để cập nhật redirect_uri được uỷ quyền, URL ACS và authDomain của bạn. Sau khi triển khai lại ứng dụng của bạn, thì 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.

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 Firebase. Tuy nhiên, phương pháp này không hiệu quả đối với Apple đăng nhập hoặc SAML. Chỉ sử dụng tuỳ chọn này nếu thiết lập proxy ngược trong lựa chọn 3 là không khả thi.

Quy trình lưu trữ mã trợ giúp gồm các bước sau:

  1. Tải các tệp xuống để lưu trữ từ vị trí của <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

  2. 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.

  3. Làm theo các bước trong Phương án 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 của bạn, thì 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.

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() dưới tên các phương thức thuận tiện để gói logic phức tạp và tránh cần liên quan đến 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 ký riêng cho nhà cung cấp của bạn, sau đó sử dụng signInWithCredential() đến trao đổ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 để có thông tin xác thực Tài khoản Google, sau đó tạo thông tin đăng nhập Google mới, bằng cách chạy đoạn 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 như trước đây.

Hướng dẫn lấy thông tin đăng nhập Apple: tại đây.