Bạn có thể sử dụng tính năng Xác thực Firebase để cho phép người dùng đăng nhập vào ứng dụng của mình bằng một hoặc phương thức đăng nhập khác, bao gồm đăng nhập bằng địa chỉ email và mật khẩu, và nhà cung cấp danh tính được liên kết, chẳng hạn như Đăng nhập bằng Google và Đăng nhập Facebook. Chiến dịch này sẽ giúp bạn bắt đầu với Xác thực Firebase bằng cách chỉ cho bạn cách thêm địa chỉ email và mật khẩu để đăng nhập vào ứng dụng của bạn.
Thêm và khởi chạy SDK xác thực
Nếu bạn chưa thực hiện, cài đặt Firebase JS SDK và khởi chạy Firebase.
Thêm SDK JS xác thực Firebase và khởi chạy tính năng Xác thực Firebase:
Web
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
Web
import firebase from "firebase/compat/app"; import "firebase/compat/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(Không bắt buộc) Tạo nguyên mẫu và thử nghiệm bằng Bộ mô phỏng cục bộ của Firebase
Trước khi nói về cách ứng dụng của bạn xác thực người dùng, hãy giới thiệu một số công cụ bạn có thể sử dụng để tạo nguyên mẫu và kiểm tra chức năng Xác thực: Bộ mô phỏng cục bộ của Firebase. Nếu bạn đang quyết định chọn các kỹ thuật xác thực và nhà cung cấp, thử các mô hình dữ liệu khác nhau với dữ liệu công khai và riêng tư bằng cách sử dụng Quy tắc bảo mật Firebase và Xác thực hoặc tạo nguyên mẫu cho thiết kế giao diện người dùng đăng nhập, có thể làm việc cục bộ mà không triển khai dịch vụ trực tiếp có thể là ý tưởng hay.
Trình mô phỏng Xác thực là một phần của Bộ công cụ mô phỏng cục bộ, cho phép ứng dụng của bạn tương tác với cấu hình và nội dung cơ sở dữ liệu được mô phỏng, như cũng như các tài nguyên dự án được mô phỏng (không bắt buộc) (các hàm, cơ sở dữ liệu khác, và quy tắc bảo mật).
Việc sử dụng Trình mô phỏng xác thực chỉ bao gồm một vài bước:
- Thêm một dòng mã vào cấu hình kiểm thử của ứng dụng để kết nối với trình mô phỏng.
- Trên gốc của thư mục dự án cục bộ, chạy
firebase emulators:start
. - Sử dụng giao diện người dùng Bộ công cụ mô phỏng cục bộ để tạo nguyên mẫu tương tác, hoặc API REST của trình mô phỏng xác thực để kiểm thử không tương tác.
Bạn có thể xem hướng dẫn chi tiết tại bài viết Kết nối ứng dụng với Trình mô phỏng xác thực. Để biết thêm thông tin, hãy xem Giới thiệu về Bộ công cụ mô phỏng cục bộ.
Giờ hãy tiếp tục với cách xác thực người dùng.
Đăng ký người dùng mới
Tạo một biểu mẫu cho phép người dùng mới đăng ký ứng dụng của bạn bằng địa chỉ email của họ
địa chỉ và mật khẩu. Khi người dùng hoàn tất biểu mẫu, hãy xác thực email
địa chỉ và mật khẩu do người dùng cung cấp, sau đó chuyển chúng đến
Phương thức createUserWithEmailAndPassword
:
Web
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed up const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Đăng nhập người dùng hiện có
Tạo biểu mẫu cho phép người dùng hiện tại đăng nhập bằng địa chỉ email của họ
và mật khẩu. Khi người dùng hoàn tất biểu mẫu, hãy gọi
Phương thức signInWithEmailAndPassword
:
Web
import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Web
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Thiết lập trình quan sát trạng thái xác thực và nhận dữ liệu người dùng
Đối với mỗi trang trong ứng dụng cần thông tin về người dùng đã đăng nhập, đính kèm trình quan sát vào đối tượng xác thực toàn cục. Trình quan sát này sẽ nhận được được gọi bất cứ khi nào trạng thái đăng nhập của người dùng thay đổi.
Đính kèm đối tượng tiếp nhận dữ liệu bằng phương thức onAuthStateChanged
. Khi một người dùng
đăng nhập thành công, bạn có thể nhận thông tin về người dùng trong trình quan sát.
Web
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... } });
Web
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/v8/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Các bước tiếp theo
Tìm hiểu cách thêm tính năng hỗ trợ cho các nhà cung cấp danh tính và khách ẩn danh khác tài khoản: