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 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 đă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 tuân 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

Để làm cho 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ử 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 bộ nhớ của bên thứ ba.

Bởi vì việc yêu cầu người dùng của bạn tắt các tính năng phân vùng lưu trữ trên trình duyệt hiếm khi là một tùy chọn, thay vào đó, 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 các 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 , 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 một 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 của bạn để sử dụng miền tùy chỉnh làm authDomain của bạn

Nếu bạn đ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, thì 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 giúp ngăn chặn sự cố đăng nhập. (Nếu bạn không sử dụng Firebase Hosting, bạn cần sử dụng một tùy chọn khác.)

Để cập nhật cấu hình Firebase của bạn 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 Firebase JS để 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 điều này sẽ tùy thuộc vào nhà cung cấp, nhưng nói chung, bạn có thể theo dõi phần "Trước khi bắt đầu" ở 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 để ủy quyền trông giống như https://<the-domain-that-serves-your-app>/__/auth/handler — phần cuối /__/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ụ khách hà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 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 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 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, nếu thành công, mã này sẽ chuyển hướng trở lại 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ớ 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ã) loại bỏ quyền truy cập bộ nhớ trên 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 tới 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; đ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ẽ giống như sau:

    # 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 được ủy quyền, URL ACS 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 bộ nhớ trên 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 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 hoạt động đố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ủ lưu trữ 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

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

    Đây là một 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 theo đị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. Làm 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 bộ nhớ trên nhiều nguồn gốc sẽ không còn xảy ra nữa.

Tùy chọn 5: Xử lý đăng nhập 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 dạng các phương thức tiện lợi để bọc logic phức tạp và tránh phải sử dụng 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 Xác thực Firebase. Ví dụ: bạn có thể sử dụng SDK đăng nhập Google , mã mẫu để nhận thông tin xác thực tài khoản Google, sau đó khởi 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 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 của bạn sẽ hoạt động giống như trước đây.

Hướng dẫn lấy chứng chỉ Apple có tại đây .