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 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:

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

  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(). 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.

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 trê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());
```

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 (".firebaseapp.com" theo mặc định). 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.

  1. 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 đến https://<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;
}

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

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

  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 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:

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 trê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.

Xem hướng dẫn cách lấy thông tin đăng nhập Apple tại đây.