Bắt đầu xác thực Firebase trên trang web

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 bạn bằng một hoặc nhiều phương thức đăng nhập, bao gồm cả đăng nhập bằng địa chỉ email và mật khẩu, cũng như các nhà cung cấp danh tính được liên kết như Đăng nhập bằng Google và Đăng nhập bằng Facebook. Hướng dẫn này giúp bạn bắt đầu tính năng Xác thực Firebase bằng cách thêm thông tin đăng nhập bằng địa chỉ email và mật khẩu vào ứng dụng.

Thêm và khởi chạy SDK xác thực

1. Cài đặt Firebase JS SDK và khởi chạy Firebase nếu bạn chưa thực hiện.

2. Thêm SDK JS xác thực Firebase và khởi chạy tính năng Xác thực Firebase:

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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

API không gian tên trên web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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 bộ công cụ mà bạn có thể dùng để tạo nguyên mẫu và kiểm thử chức năng Xác thực: Bộ công cụ trình mô phỏng cục bộ Firebase. Nếu bạn quyết định chọn các kỹ thuật và nhà cung cấp xác thực, hãy 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 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, thì việc có thể hoạt động cục bộ mà không cần 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ộ trình mô phỏng cục bộ. Bộ công cụ này cho phép ứng dụng của bạn tương tác với nội dung và cấu hình của cơ sở dữ liệu được mô phỏng, 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:

1. 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.
2. Trên gốc của thư mục dự án cục bộ, chạy firebase emulators:start.
3. Sử dụng giao diện người dùng Bộ 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 mang tính 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 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 và mật khẩu của họ. Khi người dùng hoàn tất biểu mẫu, hãy xác thực địa chỉ email và mật khẩu do người dùng cung cấp, sau đó truyền các thông tin đó đến phương thức createUserWithEmailAndPassword:

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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;
    // ..
  });
auth_signup_password.js

API không gian tên trên web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Đă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 và mật khẩu của họ. Khi người dùng hoàn tất biểu mẫu, hãy gọi phương thức signInWithEmailAndPassword:

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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;
  });
auth_signin_password.js

API không gian tên trên web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

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, hãy đính kèm đối tượng tiếp nhận dữ liệu vào đối tượng xác thực chung. Trình quan sát này đượ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 trình quan sát bằng phương thức onAuthStateChanged. Khi người dùng đăng nhập thành công, bạn có thể nhận được thông tin về người dùng này trong đối tượng tiếp nhận dữ liệu.

API mô-đun web

Tìm hiểu thêm về API Web mô-đun có thể thay đổi dạng cây và nâng cấp từ API không gian tên.

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
    // ...
  }
});
auth_state_listener.js

API không gian tên trên 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
    // ...
  }
});
index.js

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 khác và tài khoản khách ẩn danh:

• Đăng nhập bằng Google
• Đăng nhập vào Facebook
• Đăng nhập Twitter
• Đăng nhập GitHub
• Đăng nhập ẩn danh