Thiết kế mô-đun của Firebase JS SDK cho phép bạn kiểm soát tốt hơn nhiều đối với cách ứng dụng của bạn được xây dựng. Tính linh hoạt này cho phép bạn điều chỉnh các phần phụ thuộc của mình cho nền tảng của bạn, cũng như tối ưu hoá kích thước gói bằng cách loại bỏ những tính năng mà bạn không cần.
Có hai cách để khởi chạy thư viện Xác thực: hàm getAuth() và
hàm initializeAuth(). Gói đầu tiên là getAuth() cung cấp mọi tính năng
ứng dụng của bạn cần để tận dụng tất cả các tính năng mà thư viện Xác thực
cung cấp. Nhược điểm là công cụ này lấy nhiều mã mà có thể
mà ứng dụng của bạn không dùng đến. Công cụ này cũng có thể lấy mã đơn giản không được hỗ trợ trên
nền tảng mà bạn đang nhắm đến, dẫn đến lỗi. Để tránh những vấn đề này, bạn có thể
sử dụng initializeAuth() để lấy bản đồ các phần phụ thuộc. getAuth()
chỉ gọi initializeAuth() với tất cả các phần phụ thuộc được chỉ định.
Để minh hoạ, sau đây là mã tương đương với getAuth() trên các môi trường trình duyệt:
import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: [indexedDBLocalPersistence, browserLocalPersistence, browserSessionPersistence],
popupRedirectResolver: browserPopupRedirectResolver,
});
Điều chỉnh các phần phụ thuộc
Không phải tất cả ứng dụng đều sử dụng nhóm signInWithPopup hoặc signInWithRedirect
. Nhiều ứng dụng sẽ không cần đến sự linh hoạt như indexedDB, hoặc
sẽ không cần có khả năng hỗ trợ cả indexedDB và localStorage nên
không có. Trong những trường hợp này, getAuth() mặc định bao gồm nhiều
mã không sử dụng làm tăng kích thước gói mà không vì lý do gì. Thay vào đó, những ứng dụng này có thể
điều chỉnh các phần phụ thuộc. Ví dụ: nếu ứng dụng của bạn chỉ sử dụng đường liên kết qua email
và localStorage là đủ (vì bạn không sử dụng web hoặc
tập lệnh trình chạy dịch vụ), bạn có thể loại bỏ nhiều phần mã dư thừa bằng cách khởi chạy tính năng Xác thực
như sau:
import {initializeAuth, browserLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: browserLocalPersistence,
// No popupRedirectResolver defined
});
Bằng đoạn mã này, bạn đã xoá 3 phần phụ thuộc lớn mà ứng dụng của bạn không giúp giảm đáng kể lượng băng thông mà người dùng sử dụng bất cứ khi nào họ truy cập vào trang web của bạn.
Những điểm cần cân nhắc theo nền tảng cụ thể
Trong nhiều trường hợp, bạn cần xác định các phần phụ thuộc Xác thực theo cách thủ công để
tránh lỗi khi khởi chạy. Hàm getAuth() giả định một cụ thể
chủ. Đối với điểm truy cập mặc định, đó là môi trường trình duyệt và dành cho
Điểm vào Cordova, đó là môi trường Cordova. Nhưng đôi khi nhu cầu của
ứng dụng cụ thể của bạn mâu thuẫn với những giả định này. Dành cho web và dịch vụ
các tập lệnh trình thực thi, chẳng hạn như khi triển khai getAuth() mặc định sẽ lấy dữ liệu
mã đọc từ đối tượng window nên sẽ gây ra lỗi. Trong các
trong trường hợp cụ thể, bạn cần phải điều chỉnh các phần phụ thuộc. Mã sau đây là
thích hợp để khởi chạy Thư viện xác thực trong ngữ cảnh trình chạy dịch vụ:
import {initializeAuth, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: indexedDBLocalPersistence,
// No popupRedirectResolver defined
});
Mã này hướng dẫn tính năng Xác thực khởi chạy với tính năng cố định indexedDB (là
có sẵn trong ngữ cảnh trình thực thi) và bỏ qua phần phụ thuộc popupRedirectResolver,
giả định rằng có ngữ cảnh DOM.
Có nhiều lý do khác khiến bạn có thể xác định thủ công các phần phụ thuộc trên một số
nền tảng. Bằng cách xác định trường popupRedirectResolver trong quá trình khởi chạy Xác thực,
trong một số trường hợp, thư viện sẽ thực hiện thêm công việc khi khởi chạy. Bật
trình duyệt trên thiết bị di động, thư viện sẽ tự động mở iframe để xác thực của bạn
giành quyền sở hữu miền. Điều này nhằm mang lại trải nghiệm liền mạch cho hầu hết
nhưng có thể ảnh hưởng đến hiệu suất do tải thêm mã ngay khi
ứng dụng khởi động. Bạn có thể tránh hành vi này bằng cách sử dụng initializeAuth() và
truyền phần phụ thuộc browserPopupRedirectResolver đến các hàm theo cách thủ công
cần đến:
import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});
// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);
Nếu đã cung cấp browserPopupRedirectResolver trong các phần phụ thuộc để
initializeAuth(), tham số thứ ba trong lệnh gọi đến signInWithRedirect()
là không cần thiết. Nhưng bằng cách di chuyển phần phụ thuộc đó vào lệnh gọi đến
signInWithRedirect(), hiệu suất ban đầu đạt trong khoảng thời gian
xoá quy trình khởi chạy. Khi chuyển
sự phụ thuộc, nhưng điều quan trọng là bạn có thể đưa ra quyết định
những sự đánh đổi đó bằng cách khởi chạy thư viện theo cách thủ công.
Trường hợp sử dụng quy trình khởi chạy tuỳ chỉnh
Tóm lại, hoạt động khởi chạy tuỳ chỉnh giúp bạn có nhiều quyền kiểm soát hơn đối với
việc sử dụng SDK xác thực. Hàm getAuth() chuẩn phù hợp để nhận
khởi động và phục vụ cho hầu hết các trường hợp sử dụng. Đối với hầu hết ứng dụng, getAuth() có thể là tuỳ chọn của bạn
của bạn. Nhưng có nhiều lý do khiến bạn muốn (hoặc cần) chuyển sang phương thức thanh toán thủ công
quản lý phần phụ thuộc:
- Đối với các ứng dụng mà kích thước gói và thời gian tải là cực kỳ quan trọng, hãy tuỳ chỉnh Khởi tạo tính năng xác thực có thể làm giảm nhiều kilobyte dữ liệu. Nó cũng có thể giảm thời gian tải ban đầu bằng cách chuyển các phần phụ thuộc sang thời gian thay vì thời gian khởi tạo.
- Đối với mã chạy trong ngữ cảnh không phải DOM (như trình chạy web và dịch vụ),
Bạn phải sử dụng
initializeAuth()để tránh lỗi.