Các phương pháp hay nhất để sử dụng signInWithRedirect trên các 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 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:

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

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

  3. Đảm bảo continue_uri của bạn nằm trong danh sách miền được ủy quyền .

  4. Triển khai lại bằng Dịch vụ lưu trữ Firebase nếu cần để tìm nạp tệp cấu hình Firebase cập nhật nhất được lưu trữ tại /__/firebase/init.json .

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

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

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

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

    Đâ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.

  3. 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 pháp 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 .